富文本转换html,在百度富文本编辑器UEditor中增加word转html的方法

1.需求

在一个项目中有个需求：复制word的内容到编辑器中。但是在复制过程中图片不能成功的复制过来，需要安装flash插件，但是吧又不能要求每个客户都安装上，这就比较麻烦了。所以考虑是不是可以把word转成html，这样放入编辑器中打开就没问题了把。

2.准备

麻烦的又来了，UEditor1.4之后才支持简便的二次开发扩展，但项目使用了老版本的UEditor，全面替换吧肯定又是一堆坑，没办法就只能改源码，顺便在这里记录一下。

3.实施

研究了一通之后发现主要业务逻辑写在了ueditor.all.js&ueditor.parse.js这两个js中，同时有大量的dialog去做了一些交互。

ueditor.all.js&ueditor.parse.js

我打算在上传附件时增加一个tab页去专门处理转换的工作，这样可以做到改动比较小。

3.1 增加上传附件并转换

UEditor的上传附件交互主要在dialog下的attachment文件夹，包括了attachment.html;attachment.css;attachment.js三个文件，下面依次来改下。

3.1.1 更改attachment.html

参照原来的tab页增加一个我们自己的：

Tab页对应的展示块：

0%

要想我们新增的内容匹配到文字描述，这里要配置下zh-cn.js和en.js

在en.js的'attachment':'static':中增加：

'lang_tab_transform': 'Word Trans Html',

'lang_word_upload':"Word upload",

在zh-cn.js的'attachment':'static':中增加：

'lang_tab_transform': 'Word转Html',

'lang_word_upload':"Word上传",

3.1.2 更改attachment.css

再添加相应的css，这个比较简单把原来upload的css复制一份，把"upload"改成我自己定义的"transform"添加进去即可。太多太长这里就不贴了。

3.1.3 更改attachment.js

首先增加一个对象transFile：

var uploadFile,

transFile,

onlineFile;

在设置tab的时候增加tansFile:

switch (id) {

case 'upload':

uploadFile = uploadFile || new UploadFile('queueList');

break;

case 'transform':

transFile = transFile || new UploadFile('queueListTrans');

break;

case 'online':

onlineFile = onlineFile || new OnlineFile('fileList');

break;

}

初始化dialog确认按钮时增加transFile:

/* 初始化onok事件 */

function initButtons() {

dialog.onok = function () {

var list = [], id, tabs = $G('tabhead').children;

for (var i = 0; i < tabs.length; i++) {

if (domUtils.hasClass(tabs[i], 'focus')) {

id = tabs[i].getAttribute('data-content-id');

break;

}

}

switch (id) {

case 'upload':

list = uploadFile.getInsertList();

var count = uploadFile.getQueueCount();

if (count) {

$('.info', '#queueList').html('' + '还有2个未上传文件'.replace(/[\d]/, co