富文本编辑器 从word中复制内容带多张图片

富文本编辑器从word复制包含多个图片的内容。

？

1.4.2之后官方没有做任何功能上的改动。1 . 4 . 2 word复制没有bug，其他版本不能手动转移。

本文的背景是Java。前端是Jsp(前端是一样的，如果语言不合理后台可以自己做Base64编解码)

因为公司业务需要支持IE8，所以网上其实有很多富文本框，效果很好。

例如，Www.wangEditor.com在尝试了一圈后不支持IE8。

所以回到Ueditor，因为没有官方维护，新的neuditor不知道什么时候能支持自动转字，只能自己想办法。

如果没有必要，不建议使用Ueditor。我也没办法。

修改后的插件只适合IE8。

这里需要注意的一点是，百度官方编辑器不支持文字图片批量传输。粘贴word后，需要手动选择图片，再次上传。网上找到的例子大部分都是这个操作。如果需要批量自动上传word图片，可以使用WordPaster控件。

1.工业工程设置

将可信网站添加到可信网站。

这里的原生测试直接使用http://localhost。

因为需要读取客户端的文件，所以需要设置访问数据源的权限。

ActiveXObject设置可以在线参考，这里没有列出。

以前的

这里，IE的准备工作已经完成。

修改ueditor.all.js的关键代码

在第1006行附近，如果是ueditor的另一个版本，如果功能正常，可以复制下面的代码。

var imgPath=attrs.src

var imgUrl=attrs.src

if(navigator . appname==' Microsoft Internet Explorer '){//判断是否为IE浏览器。

if(navigator . user agent . match(/Trident/I)navigator . user agent . match(/msie 8.0/I)){//判断浏览器内核是否为Trident内核ie8.0。

var real path=IMgpath . substring(8，IMgpath . length)；

var filename=IMgpath . substring(IMgpath . LastIndex of('/')1，IMgpath . length)；

var result=uploadforie . save attachment(文件名，真实路径)；

if(结果){ 0

var JSON=eval('(' result ')')；

imgUrl=json.url

}

}

}

img . SetAttr({ 0

宽度： attrs.width，

高度： attrs.height，

alt: attrs.alt，

word_img: attrs.src，

src: imgUrl，

style ' : ' background : URL('(flag opt . theme path opt . theme '/images/word . gif ' : opt . lang path opt . lang '/images/local image . png ')')无重复居中；border:1px实心#ddd '

})

uploadForIE.js .

var UploadForIE={

//保存为xml附件，通过ajax上传。

保存附件：函数(上传_文件名，本地文件路径){ 0

//后台接受图片保存的方法。

var upload _ target _ URL=' uploadImg '；

var strTempFile=localFilePath

//创建XML对象并组合XML文档数据

var XML _ DOM=uploadforie . create document()；

xml_dom.loadXML('xml版本='1.0 '编码='GBK '根/')；

//创建ADODB。流对象

var ado _ stream=newactivexoobject(' adodb . stream ')；

//将流数据类型设置为二进制类型。

ado_stream。type=1；//adTypeBinary

//打开ADODB。溪流

对象

ado_stream.Open();

//将本地文件装载到ADODB.Stream对象中

ado_stream.LoadFromFile(strTempFile);

//获取文件大小（以字节为单位）

var byte_size=ado_stream.Size;

//设置数据传输单元大小为1KB

var byte_unit=1024;

//获取文件分割数据单元的数量

var read_count=parseInt((byte_size/byte_unit).toString())+parseInt(((byte_size%byte_unit)==0)0:1);

//创建XML元素节点，保存上传文件名称

var node=xml_dom.createElement("uploadFilename");

node.text=upload_filename.toString();

var root=xml_dom.documentElement;

root.appendChild(node);

//创建XML元素节点，保存上传文件大小

var node=xml_dom.createElement("uploadFileSize");

node.text=byte_size.toString();

root.appendChild(node);

//创建XML元素节点，保存上传文件内容

for(var i=0;iread_count;i++){

var node=xml_dom.createElement("uploadContent");

//文件内容编码方式为Base64

node.dataType="bin.base64";

//判断当前保存的数据节点大小，根据条件进行分类操作

if((parseInt(byte_size%byte_unit)!=0)(i==parseInt(read_count-1))){

//当数据包大小不是数据单元的整数倍时，读取最后剩余的小于数据单元的所有数据

node.nodeTypedValue=ado_stream.Read();

}else{

//读取一个完整数据单元的数据

node.nodeTypedValue=ado_stream.Read(byte_unit);

}

root.appendChild(node);

}

//关闭ADODB.Stream对象

ado_stream.Close();

delete ado_stream;

//创建Microsoft.XMLHTTP对象

// var xmlhttp = new ActiveXObject("microsoft.xmlhttp");

var xmlhttp=window.XMLHttpRequestnewXMLHttpRequest():newActiveXObject("Microsoft.XMLHttp");

//打开Microsoft.XMLHTP对象

xmlhttp.open("post",upload_target_url,false);

//使用Microsoft.XMLHTP对象上传文件

xmlhttp.send(xml_dom);

var state=xmlhttp.readyState;

var success_state=true;

if(state!=4){

success_state=false;

}

var result=xmlhttp.responseText;

delete xmlhttp;

returnresult;

},

//创建DOMdocuemnt

createDocument:function(){

var xmldom;

var versions=["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument"],

i,

len;

for(i=0,len=versions.length;ilen;i++){

try{

xmldom=newActiveXObject(versions[i]);

if(xmldom!=null)break;

}catch(ex){

//跳过

alert("创建document对象失败！");

}

}

returnxmldom;

}

}

UEditorAction保存图片方法

@RequestMapping("/uploadImg")

publicvoiduploadADO(HttpServletRequest request,HttpServletResponse response){

String path1=request.getContextPath();

String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path1;

String rootPath=request.getServletContext().getRealPath("/");

//设置数据传输单元大小为1KB

intunit_size=1024;

//初始化xml文件大小（以字节为单位）

intxmlFileSize=0;

//初始化上传文件名称（完整文件名）

String xmlFilename="";

//初始化上传文件保存路径（绝对物理路径）

String xmlFilepath="";

//声明文件存储字节数组

byte[]xmlFileBytes=null;

try{

//初始化 SAX 串行xml文件解析器

SAXBuilder builder=newSAXBuilder();

Document doc=builder.build(request.getInputStream());

Element eRoot=doc.getRootElement();

//获取上传文件的完整名称

Iterator it_name=eRoot.getChildren("uploadFilename").iterator();

if(it_name.hasNext()){

xmlFilename=((Element)it_name.next()).getText();

}

//存放的相对路径目录

String relativePath="/temp/"+EditorUtil.getToday()+"/";

xmlFilepath=rootPath+relativePath;

//获取上传文件的大小

Iterator it_size=eRoot.getChildren("uploadFileSize").iterator();

if(it_size.hasNext()){

xmlFileSize=Integer.parseInt(((Element)it_size.next())

.getText());

if(xmlFileSize0){

intunit_count=0;

//为存储文件内容的字节数组分配存储空间

xmlFileBytes=newbyte[xmlFileSize];

//循环读取文件内容，并保存到字节数组中

Iterator it_content=eRoot.getChildren("uploadContent")

.iterator();

while(it_content.hasNext()){

//初始化Base64编码解码器

BASE64Decoder base64=newBASE64Decoder();

byte[]xmlNodeByteArray=base64

.decodeBuffer(((Element)it_content.next())

.getText());

if(xmlNodeByteArray.length=unit_size){

//读取一个完整数据单元的数据

System.arraycopy(xmlNodeByteArray,0,xmlFileBytes,

unit_count*unit_size,unit_size);

}else{

//读取小于一个数据单元的所有数据

System.arraycopy(xmlNodeByteArray,0,xmlFileBytes,

unit_count*unit_size,xmlFileSize

%unit_size);

}

//继续向下读取文件内容

unit_count++;

}

}

}

//保存路径

File path=newFile(xmlFilepath);

if(!path.exists()){

path.mkdirs();

}

//保存文件 word粘贴图片的名称

File file=newFile(path,xmlFilename);

//创建文件输入输出流

FileOutputStream fos=newFileOutputStream(file);

//写入文件内容

fos.write(xmlFileBytes);

fos.flush();

//关闭文件输入输出流

fos.close();

ReturnUploadImage rui=newReturnUploadImage();

rui.setTitle(xmlFilename);//这里需要设置文件名称如：xxx.jpg

rui.setOriginal(xmlFilename);//这里需要设置文件名称如：xxx.jpg

rui.setState("SUCCESS");

rui.setUrl(basePath+relativePath+xmlFilename);

JSONObject json=newJSONObject(rui);

String result=json.toString();//这边就是为了返回给UEditor做的格式转换

response.getWriter().write(result);

}catch(Exception e){

e.printStackTrace();

}

}

优化后的代码：

upload.jsp

%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%

%@pagecontentType="text/html;charset=utf-8"%

%@pageimport="Xproer.*"%

%@pageimport="org.apache.commons.lang.StringUtils"%

%@pageimport="org.apache.commons.fileupload.*"%

%@pageimport="org.apache.commons.fileupload.disk.*"%

%@pageimport="org.apache.commons.fileupload.servlet.*"%

%out.clear();

/*

更新记录：

2013-01-25取消对SmartUpload的使用，改用commons-fileupload组件。因为测试发现SmartUpload有内存泄露的问题。

*/

//String path = request.getContextPath();

//String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

String uname ="";// = request.getParameter("uid");

String upass ="";// = request.getParameter("fid");

// Check that we have a file upload request

booleanisMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory =newDiskFileItemFactory();

ServletFileUpload upload =newServletFileUpload(factory);

//upload.setSizeMax(262144);//256KB

List files =null;

try

{

files = upload.parseRequest(request);

}

catch(FileUploadException e)

{//处理文件尺寸过大异常

out.println("上传文件异常："+e.toString());

return;

}

FileItem imgFile =null;

//得到所有上传的文件

Iterator fileItr = files.iterator();

//循环处理所有文件

while(fileItr.hasNext())

{

//得到当前文件

imgFile = (FileItem) fileItr.next();

//忽略简单form字段而不是上传域的文件域(input type="text" /等)

if(imgFile.isFormField())

{

String fn = imgFile.getFieldName();

String fv = imgFile.getString();

if(fn.equals("uname")) uname = fv;

if(fn.equals("upass")) upass = fv;

}

else

{

break;

}

}

Uploader up =newUploader(pageContext,request);

up.SaveFile(imgFile);

String url = up.GetFilePathRel();

out.write(url);

response.setHeader("Content-Length",url.length()+"");//返回Content-length标记，以便控件正确读取返回地址。

%

剩下的后台功能和js参考下载文件中的UEditorAction 和 uploadForIE.js。

下面是我安装的依赖pom结构，可以根据自己的进行调整。

dependency

groupIdcom.baidu/groupId

artifactIdueditor/artifactId

version1.1.0/version

/dependency

基于springboot 和idea ，这里只提取了自动转存功能出来，功能还没测试，git代码没做公开，等后续测试好了再公开。

可以先使用csdn下载查看代码。

pom里引用了ueditor.jar

需要根据各自情况安装jar包

1.4.2中的jar包版本是1.1.0

mvn install:install-file -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.0 -Dpackaging=jar -Dfile=\ueditor\jsp\lib\ueditor-1.1.0.jar

运行

UeditorApplication的main方法

然后访问http://localhost:8088/ueditor/ 就可以测试了。

完成后的效果：

图片自动批量上传，不需要手动一张张选择图片上传，用户体验比百度ueditor自带的更好，传图效率更高。

?

上传成功后，图片地址自动替换成服务器地址

?

图片自动保存在服务器中

?

详细资料可以参考这篇文章：

Ueditor Word图片转存交互

讨论群：223813913

?