空间日志编辑器：word文档图文快速粘贴到web

百度ueditor可以实现word文档图文快速粘贴到web

1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况

本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码）

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

例如www.wangEditor.com  但试了一圈都不支持IE8 。

所以回到Ueditor，由于官方没有维护，新的ueditor 也不知道什么时候能支持word自动转存，只能自己想办法。

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

改动过后的插件只适合IE8。

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

1.IE设置

在受信任站点里添加信任网站。

这里本机测试使用的直接是   http://localhost

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

ActiveXObject设置可以去网上参考，这里不列举了。

前面的

到这里 IE 的准备工作完成了。

修改ueditor.all.js关键代码

14006行附近,如果是其他版本的ueditor，在功能正常的情况下，可以拷贝下面代码。

var imgPath = attrs.src;

var imgUrl = attrs.src;

if(navigator.appName === ‘Microsoft Internet Explorer‘) { //判断是否是IE浏览器

if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0

var realPath = imgPath.substring(8, imgPath.length);

var filename = imgPath.substring(imgPath.lastIndexOf(‘/‘) + 1, imgPath.length);

var result = UploadForIE.saveAttachment(filename, realPath);

if (result) {

var json = eval(‘(‘ + result + ‘)‘);

imgUrl = json.url;

}

}

}

img.setAttr({

width: attrs.width,

height: attrs.height,

alt: attrs.alt,

word_img: attrs.src,

src: imgUrl,

‘style‘: ‘background:url(‘ + (flag ? opt.themePath + opt.theme + ‘/images/word.gif‘: opt.langPath + opt.lang + ‘/images/localimage.png‘) + ‘) no-repeat center center;border:1px solid #ddd‘

})

uploadForIE.js。

var UploadForIE ={

// 保存到xml附件，并且通过ajax 上传

saveAttachment: function(upload_filename, localFilePath){

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

var upload_target_url ="uploadImg";

var strTempFile = localFilePath;

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

var xml_dom = UploadForIE.createDocument();

xml_dom.loadXML(‘<?xml version="1.0" encoding="GBK" ?> <root/>‘);

// 创建ADODB.Stream对象

var ado_stream =new ActiveXObject("adodb.stream");

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

ado_stream.Type = 1;// adTypeBinary

// 打开ADODB.Stream对象

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; i < read_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.XMLHttpRequest ?new XMLHttpRequest():new ActiveXObject("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;

return result;

},

// 创建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; i < len; i++){

try{

xmldom =new ActiveXObject(versions[i]);

if(xmldom !=null)break;

}catch(ex){

//跳过

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

}

}

return xmldom;

}

}

UEditorAction保存图片方法

@RequestMapping("/uploadImg")

publicvoid uploadADO(HttpServletRequest request, HttpServletResponse response){

String path1 = request.getContextPath();

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

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

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

int unit_size = 1024;

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

int xmlFileSize = 0;

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

String xmlFilename ="";

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

String xmlFilepath ="";

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

byte[] xmlFileBytes =null;

try{

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

SAXBuilder builder =new SAXBuilder();

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(xmlFileSize > 0){

int unit_count = 0;

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

xmlFileBytes =newbyte[xmlFileSize];

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

Iterator it_content = eRoot.getChildren("uploadContent")

.iterator();

while(it_content.hasNext()){

// 初始化Base64编码解码器

BASE64Decoder base64 =new BASE64Decoder();

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 =new File(xmlFilepath);

if(!path.exists()){

path.mkdirs();

}

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

File file =new File(path,xmlFilename);

// 创建文件输入输出流

FileOutputStream fos =new FileOutputStream(file);

// 写入文件内容

fos.write(xmlFileBytes);

fos.flush();

// 关闭文件输入输出流

fos.close();

ReturnUploadImage rui =new ReturnUploadImage();

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

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

rui.setState("SUCCESS");

rui.setUrl(basePath +relativePath+xmlFilename);

JSONObject json =new JSONObject(rui);

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

response.getWriter().write(result);

}catch(Exception e){

e.printStackTrace();

}

}

优化后的代码：

upload.jsp

<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@page contentType="text/html;charset=utf-8"%>

<%@page import = "Xproer.*" %>

<%@page import="org.apache.commons.lang.StringUtils" %>

<%@page import="org.apache.commons.fileupload.*" %>

<%@page import="org.apache.commons.fileupload.disk.*" %>

<%@page import="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

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(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 = new Uploader(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>

<groupId>com.baidu</groupId>

<artifactId>ueditor</artifactId>

<version>1.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自带的更好，传图效率更高。

​

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

​

图片自动保存在服务器中

​

详细配置信息：

http://blog.ncmem.com/wordpress/2019/08/12/ueditor-word%E5%9B%BE%E7%89%87%E8%BD%AC%E5%AD%98%E4%BA%A4%E4%BA%92/

原文地址：https://www.cnblogs.com/songsu/p/11670546.html

时间： 2024-08-09 06:18:43

空间日志编辑器：word文档图文快速粘贴到web的相关文章

Word文档中如何快速切换英文大小写？掌握这个方法轻松完成

最近很多小伙伴问我Word文档中如何快速切换英文大小写?遇到这样的问题相信很多人都是直接将单词一个个的进行修改,这样操作简直是太浪费时间了,看着大家这样操作,我在一旁看着实在是太着急了,于是总结了这方面的技巧来帮助有需要的朋友,一起看看吧! 一．快速切换大小写 常常为了统一英文格式需要切换成英文统一格式,其实很简单,我们可以直接通过快捷键Shift+F3进行操作,也可以点击开始菜单栏,在子菜单栏中找到更改大小写按钮,在弹出的栏目中点击选择更改大小写-切换大小写,之后点击确定即可: 这样操作起来是

怎样快速把jpg图片转换成word文档？

在日常的生活或者是工作中我们经常见到的图片就是jpg格式的了,无论是在哪个方面,我们都会多多少少的遇到将图片转换成文字的情况发生.在高中的时候,就经常有些jpg图片需要转化的.可是一直没有找到好的转换方法.今天小编将这个好用的方法分享给大家. 具体操作: 第一步:小编的电脑里有OCR文字识别软件工具,没有该工具的小伙伴们,就需要在浏览器中搜索并下载到我们的电脑里了. 第二步:打开OCR文字识别软件,在我们的电脑上自动弹出该工具的界面.并且在页面左侧可以看到该工具的功能板块.小编需要的是jpg图片

C#程序通过模板自动创建Word文档

原文:C#程序通过模板自动创建Word文档 引言:这段时间有项目要用到c#生成Word文档,通过网络查找到很多内容,但是功能上满足不了个人需求,于是决定借助网友们已经写好的代码,加以修改完善,以便于更好的交流和以后相似问题可以迅速的解决! 备注:本文用到的相关文件,在日志结尾提供下载 ? 第一步.项目基础--引用的添加 ?? 注意:此处要查找的"Microsoft.Office.Interop.Word.dll"版本必须为"11.*.*.*","*&quo

还在为画“类Word文档报表”而发愁吗？

?Word 是非常强大的文档编辑工具,一些行业制式文档都是使用Word来创建的,像教育行业的申请表,履历表,审批表等,像石油业的勘探记录表,记录报告,检测报告等,如房地产业的制式合同,不仅包含大量的文字描述,还会嵌入图片,表格等一些数据控件.我们通常选择使用 Word 来创建这些文档,因为它有着极强的图文混排的能力能够实现集图表,表格,图片等组成的一个混合布局的复杂报表. 但使用Word越是创建这些复杂的结构,越需要耗费过多的时间来"画"出这些复杂的样式, 且所有的数据都需要手动输入,

ABBYY将JPEG文件转换成Word文档的方法

日常工作中处理JPEG格式的图像文件时,有时需要转换成Word文档进行编辑,市场上应用而生了很多转换工具,相信不少人听说过OCR(光学字符识别)软件,可以用来转换图像文件,而在OCR软件中, ABBYY FineReader 12已被越来越多的企业和个人熟知,在日常工作中的应用范围也越来月广泛,本文主要教大家使用ABBYY FineReader 12将JPEG文件转换成Word文档. ABBYY FineReader 12是一款OCR图文识别软件,可快速方便地将扫描纸质文档.PDF文件和数码相机

黄聪：利用Aspose.Word控件实现Word文档的操作（转）

撰写人:伍华聪  http://www.iqidi.com  Aspose系列的控件,功能都挺好,之前一直在我的Winform开发框架中用Aspose.Cell来做报表输出,可以实现多样化的报表设计及输出,由于一般输出的内容比较正规化或者多数是表格居多,所以一般使用Aspose.Cell来实现我想要的各种Excel报表输出.虽然一直也知道Aspose.Word是用来生成Word文档的,而且深信其也是一个很强大的控件,但一直没用用到,所以就不是很熟悉. 偶然一次机会,一个项目的报表功能指定需要导出

C#/VB.NET 给Word文档添加/撤销书签

在现代办公环境中,阅读或者编辑较长篇幅的Word文档时,想要在文档中某一处或者几处留下标记,方便日后查找.修改时,需要在相对应的文档位置插入书签.那对于开发者而言,在C#或者VB.NET语言环境中,如何来快速.简便的插入书签呢,我分享一下我的经验.这里我用到了一款E-iceblue公司发布的一款免费的Word组件(Free Spire.Doc for .NET),方法很简单,如下: 步骤一:初始化Document实例并加载Word文档 Document document = new Docume

利用Aspose.Word控件实现Word文档的操作

Aspose系列的控件,功能都挺好,之前一直在我的Winform开发框架中用Aspose.Cell来做报表输出,可以实现多样化的报表设计及输出,由于一般输出的内容比较正规化或者多数是表格居多,所以一般使用Aspose.Cell来实现我想要的各种Excel报表输出.虽然一直也知道Aspose.Word是用来生成Word文档的,而且深信其也是一个很强大的控件,但一直没用用到,所以就不是很熟悉. 偶然一次机会,一个项目的报表功能指定需要导出为Word文档,因此寻找了很多篇文章,不过多数介绍的比较简单一

velocity模板技术生成word文档

本文介绍采用velocity技术在Java中生成word文档的方法. 1.新建一个word文档,编辑内容如下: 2.将上述word文档另存为htm格式的文件 3.新建一个Java Project项目velocityTest,加入Velocity所依赖的Jar包velocity-dep-1.5-beta2.jar. 4.在src目录下新建一个velocity.vm文件,将第二步生成的velocity.htm用文本编辑器打开,复制内容到velocity.vm中.内容如下: <html xmlns:v