使用ueditor踩过的坑

因为要做个文章发布系统，所以要使用这个富文本编辑器的功能，但是需要添加进去图片和视频的上传功能，图片上传layui框架是有的，但是没有视频上传功能，技术选型 php+layui框架，图片使用七牛云进行存储。

因为使用了layui框架，里面有个layeditor模块，但是layui官网现在已经取消了这个功能模块文档。
看网上有修改源码实现的，尝试了一下，但是遇到了一个致命的问题：视频上传成功后，没有办法选中视频了，如果用户上传错了，就不能删除已经上传的视频了，太不满足需求了，弃用。

然后，转战ueditor,因为最后的上传要上传到七牛云上面，所以找到了为大神做好的七牛云版的ueditor开始修改。

参考文章：http://www.widuu.com/archives/01/932.html
插件下载： https://github.com/widuu/qiniu_ueditor_1.4.3下载后可以直接测试图片和视频的上传功能

首先我的七牛储存用的而是华南地区的，所以按照操作步骤修改了下php/config.json ：

"uploadQiniuUrl"     : "http://up-z2.qiniu.com/", /* 七牛上传地址 */
"ChunkUploadQiniuUrl": "http://up-z2.qiniu.com", /* 分片上传创建的host地址 */

然后修改config.php：

'upload_type' => 'qiniu',    // qiniu 上传到七牛云存储服务器
/* 七牛云存储信息配置 */
'bucket'      => 'gitwiduu', // 七牛Bucket的名称
'host'        => '设置存储空间时生成的域名，或你自己绑定的域名', // 七牛绑定的域名
'access_key'  => '自己的七牛的access_key', // 七牛的access_key
'secret_key'  => '自己的七牛的secret_key', // 七牛的secret_key

/* 上传配置 */
'timeout'     => '3600',  // 上传时间
'save_type'   => 'date',  // 保存类型

/* 水印设置 */
'use_water'   => false,  // 是否开启水印
/* 七牛水印图片地址 */
'water_url'   => 'http://gitwiduu.u.qiniudn.com/ueditor-bg.png',

/* 水印显示设置 */ 
'dissolve'    => 50,  // 水印透明度
'gravity'     => 'SouthEast',  // 水印位置具体见文档图片说明和选项
'dx'          => 10,  //边距横向位置
'dy'          => 10   //边距纵向位置

修改好后，测试了一下，报错：

incorrect region, please use up-z2.qiniu.com

然后，看大牛使用的是华东地区的，灵机一动，我也创建了个华东地区的存储空间，哈哈哈，跟着走吧！
然后php/config.json的配置路径再改回来：

"uploadQiniuUrl"     : "http://upload.qiniu.com/", /* 七牛上传地址 */
"ChunkUploadQiniuUrl": "http://upload.qiniu.com/", /* 分片上传创建的host地址 */

html：

<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>

js

<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor.all.js"></script>

<script type="text/javascript">
    <!-- 实例化编辑器 -->
    var ue = UE.getEditor('container',{
        toolbars: [
            [
                'undo', //撤销
                'redo', //重做
                'link', //超链接
                'unlink', //取消链接
                'formatmatch', //格式刷
                'fontfamily', //字体
                'fontsize', //字号
                'forecolor', //字体颜色
                'backcolor', //背景色
                'bold', //加粗
                'italic', //斜体
                'subscript', //下标
                'superscript', //上标
                'underline', //下划线
                'horizontal', //分隔线
                'strikethrough', //删除线
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'lineheight', //行间距
                'indent', //首行缩进
                'justifyleft', //居左对齐
                'justifycenter', //居中对齐
                'justifyright', //居右对齐
                'justifyjustify', //两端对齐
                'removeformat', //清除格式
                'simpleupload', //单图上传
                'insertvideo', //视频

                'source', //源代码
                'blockquote', //引用
                'time', //时间
                'date', //日期
                'emotion', //表情
                'spechars', //特殊字符
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'insertframe', //插入Iframe
                'inserttable', //插入表格
                'deletetable', //删除表格
                'selectall', //全选
                'help', //帮助
            ]
        ],
        initialFrameHeight:400,
        elementPathEnabled:false,
        catchRemoteImageEnable:false
    });
</script>

开始测试上传，上传成功后video元素编程了img元素了，这时候要找到ueditor.all.js文件里面找到：

 me.commands["insertvideo"] = {
        execCommand: function (cmd, videoObjs, type){
            videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
            var html = [],id = 'tmpVedio', cl;
            for(var i=0,vi,len = videoObjs.length;i<len;i++){
                vi = videoObjs[i];
                cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
                html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
            }
            me.execCommand("inserthtml",html.join(""),true);
            var rng = this.selection.getRange();
            for(var i= 0,len=videoObjs.length;i<len;i++){
                var img = this.document.getElementById('tmpVedio'+i);
                domUtils.removeAttributes(img,'id');
                rng.selectNode(img).select();
                me.execCommand('imagefloat',videoObjs[i].align)
            }
        },

做如下修改：

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
改成：
html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));

然后视频上传成功了。就是下面的样子：

太丑了，应该把第一帧显示出来呀，好吧，查找源码继续修改，在ueditor.all.js,里面找到creatInsertStr 函数：

 case 'video':
                var ext = url.substr(url.lastIndexOf('.') + 1);
                if(ext == 'ogv') ext = 'ogg';
                str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls preload width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                    '<source src="' + url + '" type="video/' + ext + '" /></video>';
                break;

修改：controls="controls" preload="true"

然后，你就可以看到上传的视频的第一帧了。

文章添加做好了，但是还要把这个功能放到文章修改里，继续修改。

我先将文章的内容放到一个display:none;的元素中，然后等到ueditor加载完之后再把它放到文本编辑器中。

html:

<div style="display:none;" id="editor"><=$newsInfo['content']/></div>
<script id="container" name="content" type="text/plain"></script>

js:

<!-- 配置文件 -->
<script type="text/javascript" src="<=__RESPATH__/>/theme/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<=__RESPATH__/>/theme/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    <!-- 实例化编辑器 -->
    var ue = UE.getEditor('container',{
        toolbars: [
            [
                'undo', //撤销
                'redo', //重做
                'link', //超链接
                'unlink', //取消链接
                'formatmatch', //格式刷
                'fontfamily', //字体
                'fontsize', //字号
                'forecolor', //字体颜色
                'backcolor', //背景色
                'bold', //加粗
                'italic', //斜体
                'subscript', //下标
                'superscript', //上标
                'underline', //下划线
                'horizontal', //分隔线
                'strikethrough', //删除线
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'lineheight', //行间距
                'indent', //首行缩进
                'justifyleft', //居左对齐
                'justifycenter', //居中对齐
                'justifyright', //居右对齐
                'justifyjustify', //两端对齐
                'removeformat', //清除格式
                'simpleupload', //单图上传
                'insertvideo', //视频

                'source', //源代码
                'blockquote', //引用
                'time', //时间
                'date', //日期
                'emotion', //表情
                'spechars', //特殊字符
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'insertframe', //插入Iframe
                'inserttable', //插入表格
                'deletetable', //删除表格
                'selectall', //全选
                'help', //帮助
            ]
        ],
        initialFrameHeight:400,
        elementPathEnabled:false,
        catchRemoteImageEnable:false
    });

    ue.addListener("ready", function () {
        //ueditor加载完之后才能设置里面的内容
        var that = this;
        var targetCon = document.getElementById('editor').innerHTML;
        that.body.innerHTML = targetCon;//这里使用ue.seContent()时，会将video转换为img,所以要使用这种方法。
    });
</script>