百度编辑器:上传图片二

<!DOCTYPE html>
<html>
<head>

    <title>we234234</title>
    <script src="ueditor.config.js"></script>
    <script src="ueditor.all.min.js"></script>
    <script src="lang/zh-cn/zh-cn.js"></script>
    <script src="jquery-3.1.1.min.js"></script>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <style>
        /*上传*/
        .up-box{margin: 10px 0;border: 1px solid #eee;
            min-height:220px;
            /*display: none;*/}
        .up-box ul{padding: 0px;}
        .up-box li{width: 120px; height: 200px;
            float: left; margin: 10px;}
        .up-box li .img{width: 120px;
            height:120px; overflow: hidden;}
        .up-box .img img{width: 100%; vertical-align:bottom;}

        .up-box li .input{margin: 5px 0; width: 100%; border: 1px solid #eee; padding: 5px; }
        .up-box li .delete{cursor: pointer; color: #eee}
        .up-box li .delete:hover{color: #5cb85c }
        .clearfix{clear:both}
    </style>
</head>
<body>
<!--上传按钮-->
<button type="button" onClick="upImage()">上传</button>
<!--li 指针位置-->
<input type="" id="li-pointer" value="">
<hr>
<!-- 加载默认图片 json格式 -->
<div>加载默认的图片</div>
<div id="thumb_str">[{"src":"\/ueditor\/php\/upload\/image\/20170526\/1495787497215115.jpg","title":"123","top":1},{"src":"\/ueditor\/php\/upload\/image\/20170526\/1495789723119809.jpg","title":"undefined","top":0}]</div>
<!-- 图片显示框-->
<div class="up-box clearfix">
    <ul id="up-append">

    </ul>
</div>

<!-- 隐藏编辑器 -->
<div id="up_edit" style="display: none;" title="隐藏的编辑器"></div>

</body>
<script>
    var up = UE.getEditor(‘up_edit‘);
    $(document).ready(function(){
        /*初始化相册内容*/
        // 获取相册内容并且转数组格式
        $thumb_str = $(‘#thumb_str‘).text();
        var arg = eval(‘(‘ + $thumb_str + ‘)‘);
        DivShow(arg);

        // 初始化指针位置
        $l = $("#up-append li").length;
        $("#li-pointer").val($l);
    });

    //弹出图片上传的对话框
    function upImage()
    {
        var myImage = up.getDialog("insertimage");
        myImage.open();
    }
    //监听图片上传
    up.addListener(‘beforeInsertImage‘, function (t,arg)
    {
        DivShow(arg);
    });

    // 图片格式
    function DivShow(arr){
        var $str=‘‘;
        // 数组长度
        var $arr_length = arr.length;
        // 获取li指针位置
        $length = Number($("#li-pointer").val());

        for(i=0;i<$arr_length;i++){
            // 指针长度
            $ii = $length+i;
            //alert($ii);
            $str += "<li class=‘list_"+$ii+"‘>";
            $str+= "<input name=‘up-thumb[]‘ id=‘up-thumb-"+i+"‘ type=‘hidden‘ value=‘"+arr[i].src+"‘>";
            $str +="<div class=‘img‘><img src=‘"+arr[i].src+"‘ /></div>";
            $str +="<input name=‘up-title[]‘ id=‘up-title-"+i+"‘ value=‘"+arr[i].title+"‘ class=‘input‘ placeholder=‘请设置标题‘>"

            if(arr[i][‘top‘] ==1){
                $str +="<label class=‘pull-left‘><input name=‘up-top‘ type=‘radio‘ value=‘"+$ii+"‘ checked>设置封面 </label>"
            }else{
                $str +="<label class=‘pull-left‘><input name=‘up-top‘ type=‘radio‘ value=‘"+$ii+"‘/>设置封面 </label>"
            }

            $str +="<label class=‘pull-right‘ class=‘delete‘><a href=‘javascript:dele_list("+$ii+")‘>删除</a> </label>";
            $str += "</li>";
        }

        $("#up-append").append($str)

        // 重新生成指针位置
        $t =  parseInt($length)  + $arr_length;
        $("#li-pointer").val($t);

    }
    // 删除
    function dele_list($id){
        $(".list_"+$id).remove();
    }

</script>

</html>
时间: 2024-08-25 00:24:19

百度编辑器:上传图片二的相关文章

百度编辑器前端二开图片上传Js

百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: 替换原来的 ueditor.all.min.js  原文地址:https://www.cnblogs.com/q1104460935/p/10278629.html

为百度UEDITOR编辑器上传图片添加水印

form:http://www.uphtm.com/php/255.html UEDITOR编辑器上传图片是自动提取的,但是图片没有水印功能,下面小编和各位一起来看看. UEditor编辑器没有上传图片加水印的功能,需要进行二次开发,本例是在PHPCMS系统中对百度编辑器进行二次开发,添加上传图片加水印功能. 首先打开UEditor编辑器文件目录的php文件夹,打开Uploader.class.php,把PHPCMS添加水印的方法复制过来,加到这个类所有成员方法最后面,然后进行修改如下: //图

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

ueditor 百度编辑器 配置如何上传图片

1.准备工作 下载地址  http://ueditor.baidu.com/website/ 下载出来 你所需要的udditor版本 2.解压出来 3.导包 解压出来文件jsp下的lib导入  到项目中web-inif 下的lib中 注意: 如果导入包仍然报 inser... server  ... 这种错误,把包导入 服务器 lib下 4.修改配置文件 ueditor.config.js window.UEDITOR_HOME_URL = "/default/eos/"; 从注释中取

百度编辑器拦截上传图片提交上传腾讯server并返回腾讯url

微信图文编辑时图片必须为上传到腾讯server的url,外连接所有屏蔽,则须要改动百度编辑器的源代码,源代码详细处理地方例如以下图.类为BinaryUploader.java InputStream is = fileStream.openStream(); State storageState = StorageManager.saveFileByInputStream(is,physicalPath, maxSize); is.close(); if (storageState.isSucc

百度编辑器拦截上传图片提交上传腾讯服务器并返回腾讯url

微信图文编辑时图片必须为上传到腾讯服务器的url,外连接全部屏蔽,则需要修改百度编辑器的源码,源码具体处理地方如下图,类为BinaryUploader.java InputStream is = fileStream.openStream(); State storageState = StorageManager.saveFileByInputStream(is,physicalPath, maxSize); is.close(); if (storageState.isSuccess())

ECSHOP集成百度ueditor编辑器上传图片到服务器或又拍云(七牛云)

1.打开admin/includes/lib_main.php文件找到:(大约在306-323行左右) /** * 生成编辑器 * @param string input_name 输入框名称 * @param string input_value 输入框值 */ function create_html_editor($input_name, $input_value = '') { global $smarty; $editor = new FCKeditor($input_name); $

百度编辑器序号和项目符号不能显示解决

在做论坛.个人网站.办公OA,对于富文本编辑器的使用,业界使用最多.最好的应该是百度编辑器.在使用百度编辑器做富文本编辑,碰到序号.项目符号,在个性化页面展示不能显示的问题.简单分析下,将百度编辑器,编辑后的HTML存储,再用于个性化页面显示,对于指定序号和项目符号显示没有相关的样式.那解决起来就比较简单了,把相关的样式在个性化页面单独添加引用就可以了. 一.查看是什么样式: 二.个性化页面添加list-style-type样式 通过w3school 找到, list-style-type介绍,

jsp 百度编辑器配置 整合springmvc注意细节

百度配置器中默认处理的action可以处理各种请求不需要自己在单独写,尽量不要破坏百度编辑器中自带的jsp demo  我们可以直接使用 参数配置 前后端的配置统一写在后端(PHP版本的config在php/config.json),编辑器实例化时,异步读取后端配置信息,覆盖到前端的配置里. 后端获取的配置项 > 实例化传入的配置项 > ueditor.config.js文件的配置项. 我们需要配置的部分是 1.ueditor.config.js 中入口的位置 // 服务器统一请求接口路径,如

百度编辑器ueditor的图片地址修正

我用的百度编辑器为1.4.2的,相对于现在这个时间来说是比较新的.之前去的1.3版的,后来更新到1.4之后出现路径问题.因为今天晚上出现特别奇怪的问题,所以特地又整了一遍,发现这玩意还是得自己弄通了好好使.今晚出现的问题是,本机win7可以正常上传,线上centos可以正常上传,测试机是ios的,前几天还可以正常上传,今晚不知道怎么回事,文件上传目录,确认不是权限问题,很奇怪. # 这个是定义百度编辑器的根目录.考虑到安全问题,只能写http://...这种host格式的绝对路径,不能将你项目的