UEditor

注意： 修改 JS 文件后, 需要清理浏览器缓存或强制刷新页面，才能看到效果

UEditor 集成

UEditor 的配置位于 udeitor.config.js 文件 可查阅后端配置项的相关说明, 获取配置信息

访问服务器上 php/config.json 及 ueditor/php/controller.php?action=config 检查是否能正常返回

// 改为controller.php文件的完整访问路径
serverUrl: "http://www.moeapp.com/BlogDemo/Frame/Vendor/UEditor/php/controller.php"

文件上传配置

文件上传的配置，对应修改 php/config.json 文件

文件上传目录

文件默认上传至 ueditor/php/upload 目录

// 改成自定义的文件上传目录
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

文件上传大小限制

关于文件上传大小限制, 还需要修改 php.ini 文件。调整 POST 请求携带数据的最大限制，及上传文件的最大限制。如果使用Nginx, 同样需要修改 nginx.conf 文件

POST 请求携带数据的最大限制

; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST data reading
; is disabled through enable_post_data_reading.
; http://php.net/post-max-size
post_max_size = 100M

上传文件的最大限制

; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize = 100M

自定义模板

模版配置文件位于 dialogs/template/config.js

UEditor提供了模板功能, 点击操作面板上的”模板按钮”, 可以选择预先定义的代码模板, 自动填充到页面内容中。默认提供了5个模板代码, 可参考修改

• 可使用JS/HTML格式化工具将模板代码压缩成一行
• 中文语言修改lang\zh-cn.js, 英文语言修改lang\en.js

模板的参考代码

{
    // 模板选择时候的预览图, 位于UEditor/dialogs/template/images, 可自定义
    "pre":"pre0.png",   
    // 模板预览时显示的标题, 对应文本描述在`lang\zh-cn.js`(中文)文件的 `template` 中查找, 可自行添加
    'title':lang.blank,
    // 效果预览代码
    'preHtml':'<p class="ue_t">&nbsp;欢迎使用UEditor！</p>',
    // 模板生成的html代码
    "html":'<p class="ue_t">欢迎使用UEditor！</p>'
},

自定义模板的示例代码

{
    "pre":"pre0.png",
    'title':lang.titleBar,
    'preHtml':'<h2>该不该创业,这是个问题</h2><p><span style="color: rgba(0,0,0,0.3); font-size: 15px;">林大佐</span>&nbsp;&nbsp;<a href="https://www.moemoetech.com"style="color: #576b95; text-decoration: none;">萌盟科技</a>&nbsp;&nbsp;<span style="color: rgba(0,0,0,0.3); font-size: 15px;">今天</span>&nbsp;</p><p><br/></p>',
    "html":'<h2>该不该创业,这是个问题</h2><p><span style="color: rgba(0,0,0,0.3); font-size: 15px;">林大佐</span>&nbsp;&nbsp;<a href="https://www.moemoetech.com"style="color: #576b95; text-decoration: none;">萌盟科技</a>&nbsp;&nbsp;<span style="color: rgba(0,0,0,0.3); font-size: 15px;">今天</span>&nbsp;</p><p><br/></p>',
},

'template':{
    'static':{
        'lang_template_bkcolor':'背景颜色',
        'lang_template_clear' : '保留原有内容',
        'lang_template_select' : '选择模板'
    },
    'blank':"空白文档",
    'blog':"博客文章",
    'resume':"个人简历",
    'richText':"图文混排",
    'sciPapers':"科技论文",
    'titleBar':"标题栏"    // 添加了自定义的标题titleBar, 与自定义模板的title对应
}

自定义工具栏

工具栏配置文件位于 Ueditor\ueditor.config.js

修改 toolbars 的值, 根据实际情况删除不需要的值即可。配置值的名称, 正好对应 ueditor.all.js文件中的实现代码, 如: 图片上传工具的参数名为simpleupload, 对应的功能实现为 ueditor.all.js文件中的UE.plugin.register('simpleupload', function (){}

参考代码

, toolbars: [[
    'fullscreen', 'source', '|', 'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
    'directionalityltr', 'directionalityrtl', 'indent', '|',
    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
    'link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
    'simpleupload', 'insertimage', 'emotion', 'insertvideo', 'music', 'attachment', 'map', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
    'horizontal', 'date', 'time', 'spechars', '|',
    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
    'preview', 'searchreplace', 'drafts'
]]

视频上传

工具栏的“视频”面板的视频上传功能，对应修改 Ueditor\ueditor.all.js 文件的 me.commands["insertvideo"] 方法

修改生成的 html 代码

查找 UE.plugins['video'] 方法。修改如下所示位置的代码, 其中 video 分支语句下的 str 变量即为生成的html代码

switch (type){
    case 'image':
        str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"'  +
            ' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'
        break;
    case 'embed':
        str = '<embed type="application/x-shockwave-flash" class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
            ' src="' +  utils.html(url) + '" width="' + width  + '" height="' + height  + '"'  + (align ? ' style="float:' + align + '"': '') +
            ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
        break;
    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="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
        '<source src="' + url + '" type="video/' + ext + '" /></video>';
        break;
}
return str;

显示空白的处理

查找 me.commands["insertvideo"] 方法, 修改如下代码:

// 第17769行附近, 修改 image 为 video
// 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'));

查找 setContent: function (html, isAppendTo, notFireSelectionchange) 方法, 修改如下代码:

// 第7343行附近, 注释如下代码
// var root = UE.htmlparser(html);
// me.filterInputRule(root);
// html = root.toHtml();

音频上传

工具栏上“视频”面板支持音频上传功能，对应修改 Ueditor\ueditor.all.js 文件的 UE.plugins['video'] 方法

增加音频上传支持

修改如下位置的代码, 增加对音频文件类型的处理

case 'video':
    var ext = url.substr(url.lastIndexOf('.') + 1);
    if(ext == 'ogv') ext = 'ogg';

    // 针对音频文件类型添加的判断
    var is_music = false;
    var music_type = ['mp3','wav'];
    for(var i in music_type){
        if(music_type[i] == ext) {
            is_music = true;
        }
    }
    if (is_music) {
        // 修改后, 插入音频生成的HTML代码
        str = '<audio' + (id ? ' id="' + id + '"' : '') + (align ? ' style="float:' + align + '"': '') +
            ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '"></audio>';
    } else {
        // 原本插入视频生成的HTML代码
        // str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
        //     ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
        //     '<source src="' + url + '" type="video/' + ext + '" /></video>';

        // 修改后, 插入视频生成的HTML代码
        str = '<video' + (id ? ' id="' + id + '"' : '') + (align ? 'style="float:' + align + '"': '') + ' src="' + url + '" width=100% controls=""></video>';
    }
break;

修改 config/UeditorUpload.php 配置文件, 添加 mpga 格式（.mp3文件上传后, 解析出来的后缀名为.mpga, 不清楚是否为Bug）

/* 上传视频配置 */
"videoActionName" => "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName" => "upfile", /* 提交的视频表单名称 */
"videoPathFormat" => "/uploads/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix" => "", /* 视频访问路径前缀 */
"videoMaxSize" => 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles" => [
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".mpga",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
], /* 上传视频格式显示 */

图片上传

工具栏上“图片”面板的图片上传功能(多图上传左边)，对应修改 ueditor.all.js 文件的 UE.plugin.register('simpleupload', function() {} 方法

修改生成的 html 代码

查找 me.execCommand 方法，该方法的第二个参数即为生成的html代码

me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');

多图上传

工具栏上的“多图上传”面板的“本地上传”功能，对应修改 ueditor.all.js 文件的 UE.commands['insertimage'] 方法

修改单图生成的 html 代码

选择单张图片上传时, 修改如下位置的代码，其中 str 变量即为生成的html代码

if (opt.length == 1) {
    unhtmlData(ci);

    str = '<img src="' + ci.src + '" ' + (ci._src ? ' _src="' + ci._src + '" ' : '') +
        (ci.width ? 'width="' + ci.width + '" ' : '') +
        (ci.height ? ' height="' + ci.height + '" ' : '') +
        (ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="float:' + ci['floatStyle'] + ';"' : '') +
        (ci.title && ci.title != "" ? ' title="' + ci.title + '"' : '') +
        (ci.border && ci.border != "0" ? ' border="' + ci.border + '"' : '') +
        (ci.alt && ci.alt != "" ? ' alt="' + ci.alt + '"' : '') +
        (ci.hspace && ci.hspace != "0" ? ' hspace = "' + ci.hspace + '"' : '') +
        (ci.vspace && ci.vspace != "0" ? ' vspace = "' + ci.vspace + '"' : '') + '/>';
    if (ci['floatStyle'] == 'center') {
        str = '<p style="text-align: center">' + str + '</p>';
    }
    html.push(str);
}

修改多图生成的 html 代码

选择多张图片上传时, 修改如下位置的代码，其中 str 变量即为生成的html代码

for (var i = 0; ci = opt[i++];) {
    unhtmlData(ci);
    str = '<p ' + (ci['floatStyle'] == 'center' ? 'style="text-align: center" ' : '') + '><img src="' + ci.src + '" ' +
        // (ci.width ? 'width="' + ci.width + '" ' : '') +
        ' width="100%"' +
        (ci._src ? ' _src="' + ci._src + '" ' : '') +
        (ci.height ? ' height="' + ci.height + '" ' : '') +
        ' style="' + (ci['floatStyle'] && ci['floatStyle'] != 'center' ? 'float:' + ci['floatStyle'] + ';' : '') +
        (ci.border || '') + '" ' +
        (ci.title ? ' title="' + ci.title + '"' : '') + ' /></p>';
    html.push(str);
}