当前功能基于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文件中

<?phpclass WordToHtmlController
{public function index(){require 'vendor/autoload.php';$base64 = "upload";$config = array("pathFormat" => '/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}',"maxSize" => 102400000,"allowFiles" => [".docx"]);$fieldName = 'upfile';include 'Uploader.class.php';$up = new Uploader($fieldName, $config, $base64);$path = ltrim($up->getFileInfo()['url'], '/');//        $phpWord = \PhpOffice\PhpWord\IOFactory::load('public/uploads/word/20211029/test.docx');$phpWord = \PhpOffice\PhpWord\IOFactory::load($path);// 直接输出到页面显示
//        $phpWord->save('php://output', 'HTML');$xmlWriter = \PhpOffice\PhpWord\IOFactory::createWriter($phpWord, 'HTML');header("Content-Type:text/html; charset=utf-8");exit($this->replaceImageSrc($xmlWriter->getContent()));
//        exit($xmlWriter->getContent());}/*** 将HTML代码中的所有图片地址替换* @param $content string 要查找的内容* @return string*/private function replaceImageSrc($content){$preg = '/(\s+src\s?\=)\s?[\'|"]([^\'|"]*)/is'; // 匹配img标签的正则表达式preg_match_all($preg, $content, $allImg); // 匹配所有的imgif (!$allImg)return $content;foreach ($allImg[0] as $k => $v) {$old = ltrim($v, '" src=');preg_match('/^(data:\s*image\/(\w+);base64,)/', $old, $temp);$tempType = $temp[2];   // 获取类型// 判断目录是否存在,不存在时创建$tempFilePath = 'public/uploads/word_images/' . date('Y-m-d', time());if (!file_exists($tempFilePath))mkdir($tempFilePath);// 拼接完整路径$tempFileName = $tempFilePath . '/word_image_' . time() . $k . '.' . $tempType;$base64 = str_replace($temp[1], '', $old);file_put_contents($tempFileName, base64_decode($base64));// 替换路径字符串$content = str_replace($old, $tempFileName, $content);}return $content;}
}

7.编辑器实现导入操作

在ueditor\ueditor.all.js文件中UE.plugin.register('simpleupload', function (){})下方新增如下方法


/*** @description* word上传:点击按钮,直接选择文件上传*/
UE.plugin.register('wordupload', function (){var me = this,isLoaded = false,containerBtn;function initUploadBtn(){var w = containerBtn.offsetWidth || 20,h = containerBtn.offsetHeight || 20,btnIframe = document.createElement('iframe'),btnStyle = 'display:block;width:' + w + 'px;height:' + h + 'px;overflow:hidden;border:0;margin:0;padding:0;position:absolute;top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor:pointer;';domUtils.on(btnIframe, 'load', function(){var timestrap = (+new Date()).toString(36),wrapper,btnIframeDoc,btnIframeBody;btnIframeDoc = (btnIframe.contentDocument || btnIframe.contentWindow.document);btnIframeBody = btnIframeDoc.body;wrapper = btnIframeDoc.createElement('div');wrapper.innerHTML = '<form id="edui_form_' + timestrap + '" target="edui_iframe_' + timestrap + '" method="POST" enctype="multipart/form-data" action="' + me.getOpt('serverUrl') + '" ' +'style="' + btnStyle + '">' +'<input id="edui_input_' + timestrap + '" type="file" accept="application/msword" name="' + me.options.wordFieldName + '" ' +'style="' + btnStyle + '">' +'</form>' +'<iframe id="edui_iframe_' + timestrap + '" name="edui_iframe_' + timestrap + '" style="display:none;width:0;height:0;border:0;margin:0;padding:0;position:absolute;"></iframe>';wrapper.className = 'edui-' + me.options.theme;wrapper.id = me.ui.id + '_iframeupload';btnIframeBody.style.cssText = btnStyle;btnIframeBody.style.width = w + 'px';btnIframeBody.style.height = h + 'px';btnIframeBody.appendChild(wrapper);if (btnIframeBody.parentNode) {btnIframeBody.parentNode.style.width = w + 'px';btnIframeBody.parentNode.style.height = w + 'px';}var form = btnIframeDoc.getElementById('edui_form_' + timestrap);var input = btnIframeDoc.getElementById('edui_input_' + timestrap);var iframe = btnIframeDoc.getElementById('edui_iframe_' + timestrap);domUtils.on(input, 'change', function(){if(!input.value) return;var loadingId = 'loading_' + (+new Date()).toString(36);var allowFiles = me.getOpt('wordAllowFiles');me.focus();me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('wordupload.loading') || '') + '" >');function callback(){try{// 获取到内容var body = (iframe.contentDocument || iframe.contentWindow.document).body;// 获取加载中图片并关闭var loader = me.document.getElementById(loadingId);loader.removeAttribute('id');domUtils.removeClasses(loader, 'loadingclass');// 向编辑器赋值me.setContent(body.innerHTML, false);// me.execCommand('insertHtml', body.innerHTML);}catch(er){showErrorLoader && showErrorLoader(me.getLang('wordupload.loadError'));}form.reset();domUtils.un(iframe, 'load', callback);}function showErrorLoader(title){if(loadingId) {var loader = me.document.getElementById(loadingId);loader && domUtils.remove(loader);me.fireEvent('showmessage', {'id': loadingId,'content': title,'type': 'error','timeout': 4000});}}/* 判断后端配置是否没有加载成功 */if (!me.getOpt('wordActionName')) {errorHandler(me.getLang('autoupload.errorLoadConfig'));return;}// 判断文件格式是否错误var filename = input.value,fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {showErrorLoader(me.getLang('wordupload.exceedTypeError'));return;}domUtils.on(iframe, 'load', callback);// 上传操作// form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);// 替换请求地址为框架后台地址form.action = "/admin.php?m=fwordToHtml&a=index"//这个地址依据自己系统而定form.method = "post"form.submit();});var stateTimer;me.addListener('selectionchange', function () {clearTimeout(stateTimer);stateTimer = setTimeout(function() {var state = me.queryCommandState('wordupload');if (state == -1) {input.disabled = 'disabled';} else {input.disabled = false;}}, 400);});isLoaded = true;});btnIframe.style.cssText = btnStyle;containerBtn.appendChild(btnIframe);}return {bindEvents:{'ready': function() {//设置loading的样式utils.cssRule('loading','.loadingclass{display:inline-block;cursor:default;background: url(\''+ this.options.themePath+ this.options.theme +'/images/loading.gif\') no-repeat center center transparent;border:1px solid #cccccc;margin-right:1px;height: 22px;width: 22px;}\n' +'.loaderrorclass{display:inline-block;cursor:default;background: url(\''+ this.options.themePath+ this.options.theme +'/images/loaderror.png\') no-repeat center center transparent;border:1px solid #cccccc;margin-right:1px;height: 22px;width: 22px;' +'}',this.document);},/* 初始化word上传按钮 */'worduploadbtnready': function(type, container) {containerBtn = container;me.afterConfigReady(initUploadBtn);}},outputRule: function(root){utils.each(root.getNodesByTagName('img'),function(n){if (/\b(loaderrorclass)|(bloaderrorclass)\b/.test(n.getAttr('class'))) {n.parentNode.removeChild(n);}});},commands: {'wordupload': {queryCommandState: function () {return isLoaded ? 0:-1;}}}}
});

然后在同文件下的btnCmds变量中添加上自定义的按钮:

    //为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起var btnCmds = ['undo', 'redo', 'formatmatch','bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase','strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent','blockquote', 'pasteplain', 'pagebreak','selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink','insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow','deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts', 'wordupload'];

至此,配置完成,结果示意图:

 

Ueditor粘贴word里图文内容到编辑器中相关推荐

  1. wangEditor粘贴word里图文内容到编辑器中

    百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,... ueditor实现word文档的导入和下载功能的方法:1.UEditor没有提供word的导入功能,只能说是粘贴复制. ...

  2. 富文本粘贴word文档内容图片处理

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  3. ueditor粘贴word图片无法显示的问题

    1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...

  4. 百度ueditor粘贴word图片且图片文件自动上传功能

    当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...

  5. Java使用Spire.Doc将多个word里的内容合并到一个word里边,格式保留

    import com.spire.doc.*; /*** 合并word文档*/ public class MergeDocFile {//将2.doc合并到1里边,这是在1.doc里另开一页放的2.d ...

  6. php读取word里的内容

    <? // 建立一个指向新COM组件的索引 $word = new COM("word.application") or die("Can't start Word ...

  7. 如何实现导入Word文档到kindeditor编辑器中?

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找 ...

  8. 网页编辑器如何能实现直接粘贴把图片上传到服务器中

    ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安全的原因是不允许访 ...

  9. 【转】vi编辑器中如何复制粘贴文本

    转自:http://old.blog.edu.cn/user2/icethawless/archives/2006/1489681.shtml vi中多个文件相互之间的复制.粘贴功能简介 大家在vi编 ...

最新文章

  1. 传统多视图立体算法:PatchMatchStereo详解
  2. 学习资料,欧姆社学习漫画-电力电气类-漫画电池
  3. AndroidStudio中提示:Didn‘t find class “android.support.v7.widget.RecyclerView“
  4. 红茶一杯话Binder(传输机制篇_下)
  5. 互联网日报 | 4月20日 星期二 | 华为正式宣布卖车;携程在港交所挂牌上市;广州期货交易所正式揭牌...
  6. 网站性能Web压力测试工具webbench
  7. 让Python输出更漂亮
  8. 限时|领取黄博士整理的人工智能数学资料
  9. 升级到新SQL Server版本
  10. 如何显示Windows 10登录过程详细信息
  11. linux网卡mode6,RedHat/CentOS(Linux)双网卡bond(mode=6)
  12. wifi mesh测试软件,网件MK63:Wifi 6+Mesh组网一步到位
  13. DOS BAT脚本批量打开Edge网页
  14. 常用的邮箱有哪些,可用好用的邮箱大全推荐
  15. 织梦CMS模板安装教程详细图文
  16. Mic Android 8.1 方案
  17. 医院病案管理系统MRMS源码 病案管理 医院源码
  18. kali虚拟机如何使用桥接模式连接外网
  19. linux安装浏览器 linux本地浏览器进行访问
  20. python截取视频_python+ffmpeg截取视频段

热门文章

  1. 腾讯正式放弃独家版权,但欢呼“听歌自由”为时尚早
  2. ANSYS学习3——加载求解
  3. 学python先学什么基础_python学完基础学什么
  4. 简单个人博客系统java web_JavaWeb个人博客项目:手把手教你实现博客后台系统之登录与注册...
  5. Netty 入门教程
  6. 拼多多新店前期如何开始?哪里有拼多多运营工具?
  7. 淘宝客月赚3000元的简单方法
  8. 经济不确定环境下,制造业的数字化转型之道
  9. 软件缺陷分析-软件测试之犯罪心理学
  10. MSN:移花接木巧玩“QQ秀”(转)