当前功能基于PHP，其它语言流程大致相同
1.新增上传word json配置
在ueditor\php\config.json中新增如下配置：
/* 上传word配置 */
"wordActionName": "wordupload", /* 执行上传视频的action名称 */
"wordFieldName": "upfile", /* 提交的视频表单名称 */
"wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"wordMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
"wordAllowFiles": [".docx"] /* 仅支持docx格式的word */
2.修改编辑器配置文件，在工具栏上新增按钮
在ueditor\ueditor.config.js文件中，新增按钮名称"wordupload"，并添加鼠标悬浮提示，如下所示：
//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, 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', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help', 'wordupload'
]]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
,labelMap:{
'wordupload': '上传word文件',
}
在ueditor\themes\default\images\目录下新增按钮图标"word_upload.png"：
在ueditor\themes\default\css\ueditor.css文件中新增按钮样式：
.edui-for-wordupload .edui-icon {
width: 16px;
height: 16px;
background: url(../images/word_upload.png) no-repeat 2px 2px !important;
}
最后在ueditor\ueditor.all.js文件中editorui["simpleupload"] = function (editor){}后面添加如下代码：
/* word上传 */
editorui["wordupload"] = function (editor) {
var name = 'wordupload',
ui = new editorui.Button({
className:'edui-for-' + name,
title:editor.options.labelMap[name] || editor.getLang("labelMap." + name) || '',
onclick:function () {},
theme:editor.options.theme,
showText:false
});
editorui.buttons[name] = ui;
editor.addListener('ready', function() {
var b = ui.getDom('body'),
iconSpan = b.children[0];
editor.fireEvent('worduploadbtnready', iconSpan);
});
editor.addListener('selectionchange', function (type, causeByUi, uiReady) {
var state = editor.queryCommandState(name);
if (state == -1) {
ui.setDisabled(true);
ui.setChecked(false);
} else {
if (!uiReady) {
ui.setDisabled(false);
ui.setChecked(state);
}
}
});
return ui;
};
最终样式如下：
编辑3. 新增语言配置
在ueditor\lang\zh-cn\zh-cn.js文件中在"simpleupload"配置下方新增以下配置：
'simpleupload':{
'exceedSizeError': '文件大小超出限制',
'exceedTypeError': '文件格式不允许',
'jsonEncodeError': '服务器返回格式错误',
'loading':"正在上传...",
'loadError':"上传错误",
'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！'
},
'wordupload':{
'exceedSizeError': '文件大小超出限制',
'exceedTypeError': '文件格式不允许',
'jsonEncodeError': '服务器返回格式错误',
'loading':"正在上传...",
'loadError':"上传错误",
'errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！'
},
在ueditor\lang\zh-cn\en.js文件中在"simpleupload"配置下方新增以下配置：
'simpleupload':{
'exceedSizeError': 'File Size Exceed',
'exceedTypeError': 'File Type Not Allow',
'jsonEncodeError': 'Server Return Format Error',
'loading':"loading...",
'loadError':"load error",
'errorLoadConfig': 'Server config not loaded, upload can not work.',
},
'wordupload':{
'exceedSizeError': 'File Size Exceed',
'exceedTypeError': 'File Type Not Allow',
'jsonEncodeError': 'Server Return Format Error',
'loading':"loading...",
'loadError':"load error",
'errorLoadConfig': 'Server config not loaded, upload can not work.',
},
4.修改过滤配置
由于导入word时，编辑器会自动过滤掉图片等样式，所以需取消过滤
在ueditor\ueditor.config.js文件中修改如下配置：
// xss 过滤是否开启,inserthtml等操作
,xssFilterRules: false
//input xss过滤
,inputXssFilter: false
//output xss过滤
,outputXssFilter: false
在ueditor\ueditor.all.js文件中，修改UE.plugins[‘defaultfilter’]，新增return ;如下所示：
// plugins/defaultfilter.js
///import core
///plugin 编辑器默认的过滤转换机制
UE.plugins['defaultfilter'] = function () {
return;
var me = this;
me.setOpt({
'allowDivTransToP':true,
'disabledTableInTable':true
});
……
5.安装PHPword
composer require phpoffice/phpword
6.自定义文件转换类
实现上传文件，并将文件转换为HTML
直接将ueditor自带的上传文件"ueditor\php\Uploader.class.php"类内容直接复制到自定义WordToHtmlController.class.php文件中