支持复制粘贴word公式的xhEditor编辑器

于 2023-05-19 16:15:56 发布
阅读量67 收藏
点赞数
文章标签： word 编辑器 servlet
原文链接：https://www.cnblogs.com/songsu/p/17415533.html
版权
该文章描述了一个使用JavaServlet进行文件上传的示例，特别是针对图片的处理。它涉及web.xml的配置，以及如何在后台解析请求并保存文件到指定目录。此外，文章还提到了前端使用ueditor编辑器与后端交互，实现了从Word中批量上传图片到服务器并更新编辑器内图片地址的功能。
摘要由CSDN通过智能技术生成

这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用

后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下）

<%@ 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.*" %><%

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();  

ServletFileUpload upload = new ServletFileUpload(factory);

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();

     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()+"");

%>

配置web.xml

 <?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"

    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <welcome-file-list>

    <welcome-file>index.jsp</welcome-file>

  </welcome-file-list>

</web-app>

前端（页面）测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

     <title>WordPaster-jsp-ueditor-1.2.6.0</title>

     <script type="text/javascript" src="ueditor.config.js" charset="utf-8"></script>

     <script type="text/javascript" src="ueditor.all.min.js" charset="utf-8"></script>

     <link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>

    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />

    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.edge.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.app.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/w.file.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>

    <script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>

</head>

<body>

     <textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>

     <script type="text/javascript">

        var pasterMgr = new WordPasterManager();

        //pasterMgr.Config["PostUrl"] = "http://www.ncmem.com/products/upload_ori.aspx"

    pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"

    //pasterMgr.Config["PostUrl"] = "http://cloud.dyso.cn/ueditor/upload.jsp"

    pasterMgr.Load();//加载控件

        var ue = UE.getEditor('myEditor');

        

         ue.ready(function() {

             //设置编辑器的内容

             ue.setContent('hello');

             //获取html内容，返回: <p>hello</p>

             var html = ue.getContent();

             //获取纯文本内容，返回: hello

             var txt = ue.getContentTxt();

             pasterMgr.SetEditor(ue);

         });

                  

     </script>

</body>

</html>

实现后的效果，能够批量上传word中的全部图片，大幅度提升图片上传效率。而且能够保留Word样式。

 

 

 

图片上传完后，编辑器里面的图片地址也全部都改成了服务器的图片地址了，

视频教程：

动易SiteFactory 4.7整合,动易SiteFactory 5.6整合,动易SiteFactory 6.2整合,PbootCMS整合,PHPCMS v9整合,dedecms 5.7-ueditor整合,dedecms 5.7-ckeditor3x整合,帝国CMS-ueditor整合,帝国CMS-ckeditor4x整合,dokuwiki整合,Windows控件安装,macOS控件安装,linux-deb控件安装,linux-rpm控件安装,uos控件安装,linux-银河麒麟控件安装,

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

详细思路及源码

示例下载：

wordpaster-vue3-cli-ueditor1.5，wordpaster-vue-ueditor1.5，wordpaster-asp.net-ueditor1.5x，wordpaster-php-ueditor1x，wordpaster-jsp-ueditor1x​

Mr_Zang666
关注
xhEditor编辑器 v0.9.7 简体中文
04-24
软件介绍xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器，基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。Features(特点)： Small：初始加载5个文件，包括：1个js(36k)+2个css(6k)+2个图片(4k)，总共46k。若js和css文件进行gzip压缩，可以进一步缩减为18k左右。 Fast：基于jQuery引擎开发，提供高效的代码执行效率 Simple：简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。 Word：实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。 UBB: 提供完美的UBB可视化编辑解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷 ver 0.9.7 Change(2009-7-21) 1.调整：标签显示功能由原先的显示在左上方并增高8像素，改为显示在右上方且不增高 2.调整：编辑器内部的settings变量由原先的内部变量改为公有变量，以方便从外部动态的对参数进行修改 3.修正：修正了Chrome浏览器下字体效果转换错误的问题，此问题仅出现在0.9.6版中 4.修正：在非WebKit内核下，使用3个字符的16进制颜色值无效的问题进行了修正，例：<span xss=removed>aaa</span> 5.修正：appendHTML和pasteHTML两个函数添加的图片或者链接，相对地址变绝对地址问题的修正 6.修正：XHTML格式化功能进一步完善，例：<b>aaa<bbb>，修正前<bbb这部分内容会消失，修正后此BUG消失 7.修正：之前表情插入后默认是选中当前表情，现修正为插入表情后光标定位在表情之后，这样便于在后面继续插入新表情 8.添加：ajax上传功能模块化，使链接、动画和视频在不增加代码大小的情况下都具备上传功能 9.添加：在readonly只读模式下除了全屏和关于按钮可用，其它所有按钮都禁用，并且内容不可编辑，可通过toggleReadonly接口来进行切换状态 10.添加：showModal接口，模仿桌面程序的模式窗口，必需完成窗口内事件或者关闭窗口才能返回窗口，本程序已扩展到ajax上传模块中，并可在插件中调用
xhEditor编辑器v1.2.2简体中文
08-08
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，基于网络访问并且兼容IE 6.0 ,Firefox 3.0 ,Opera 9.6 ,Chrome 1.0 ,Safari 3.22 。 xhEditor完全基于Javascript开发，您可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。 xhEditor可以在您的CMS、博客
xheditor编辑器的使用
weixin_34274029的博客
04-26 126
一个博客、cms网站都一定会用到一个html编辑器，刚好xmfdsh在做网站时候需要用到这类编辑器，在对比了之后，发现其实差不了多少，刚好一个不错的friend在用xheditor，想到后面有不懂的还可以请教下，所以选择了这个xheditor，那么这个html到底怎么使用呢？？摸索了一个晚上个人觉得对于初学者，xheditor的使用教程实在还应该加上一些注意的地方。好，废话不多说，这里就来说一下怎...
xhEditor编辑器
zhou_he的博客
04-08 135
[b] xhEditor编辑器[/b] 下载地址：http://xheditor.com/download 要用编辑器需要加入的东西： 1.xheditor-zh-cn.min.js和jquery.js文件 2.xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹 放到Java项目中的webRoot下边,在页面引入两个js文件，加一个text...
xheditor html5,Flask项目集成富文本编辑器XHEditor
weixin_30470929的博客
07-02 349
本文介绍如何在Flask项目中集成富文本编辑器xhEditor，并实现图片上传、文件上传、视频上传、远程抓图等(包括拖拽上传)功能。xhEditor简介xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+, Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+。xhEditor曾经是...
XHEditor编辑器使用文档
10-28
### XHEditor编辑器使用指南 #### 一、简介 XHEditor是一款功能强大的富文本编辑器，适用于网页开发中的内容编辑场景。它不仅能够提供基本的文字处理功能，还支持多媒体元素（如图片、视频）的插入，以及复杂的排版...
xhEditor编辑器入门基础
10-28
xhEditor还支持通过class属性传递初始化参数，以满足不同用户对于编辑器外观和功能的定制化需求。 xhEditor的一大亮点是它的高度可定制性和良好的兼容性。它支持多种皮肤和工具栏配置，可以根据实际需求选择不同...
xhEditor编辑器 v1.2.2
10-06
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 xhEditor完全基于Javascript开发，您可以应用在
xhEditor编辑器源代码
03-18
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器，基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。 Features(特点)： Small：初始加载5个文件，包括：1个js...
【jQuery】网页文本格式编辑器xheditor
编程记录，亲测有效
03-22 2593
网页文本格式编辑器xheditor是一款优秀的、开源的JQuery插件。现在很多网站都涉及到用户的交互，很难想象一个没有输入框的网站是怎么样的，你总不能一个给一个空白的文本框给别人吧？如果让你自己用javascript或者jquery写一款文本格式编辑器，费时费力。jQuery插件xheditor是首选。这框插件非常出名、经典，甚至现在正在写csdn的博客编辑器，就是在它的基础上改进过来的，只是比
springmvc集成xhEditor编辑器的使用
lzy295481710的专栏
06-03 886
1.简介 xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器。
xhEditor - 支持word上传的富文本编辑器
yjjatqihc的博客
11-25 139
这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下） <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@ pagecontentType="text/html;charset=utf-8"%><%@ pageim...
xhEditor用法-可视化HTML编辑器
暴走影视
12-14 654
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，而且兼容很多浏览器，所以就选它了，具体使用如下： 1、下载xhEditor最新版本 下载地址：http://xheditor.com/download 2、解压压缩文件【demo文件夹中可以查看各种形式的配置实例】，将其中的jquery- 1.4.2.min.js、xheditor-zh-cn.min.js【这里暂时使用中文版】以及xheditor_emot、xheditor_plugins和xh...
富文本编辑器XHEditor实现
技术随笔
07-18 407
首先下载XHEditor，并解压，将文件放入工程，记得要在同一个目录 其次，引用XHEditor的JS文件 在页面上构建一个文本域的DOM对象                     图文详情：                                                     在该页面的ONLOAD方法中，初始化该文本编辑器，注意ID要
spring mvc + xheditor编辑器的使用
.
08-07 2249
这个编辑的使用有几个关键的地方，比如文件上传后后台返回的必须是一个json格式的字符串，而且这个字符串必须该文件的地址，否者插不进编辑器，还有就是上传完后是立即插入还是点击按钮插入，下面我会注明一下。（文件和图片的上传可以参照我之前的spring mvc上传：http://blog.csdn.net/yangxuan0261/article/details/9746283） 先来看前台。
xhEditor用法
weixin_34336292的博客
08-04 165
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，而且兼容很多浏览器，所以就选它了，具体使用如下： 1 、下载xhEditor 最新版本 下载地址：http://xheditor.com/download 2 、解压压缩文件 【demo 文件夹中可以查看各种形式的配置实例】，将其中的jquery- 1.4.2.min.js 、xheditor-zh-cn...
开源HTML编辑器xhEditor用法详解
Carey
06-26 7469
在本月的MIS开发任务中，有一项是完善帮助信息的开发任务，因为设计到对文字大小，样式及图片的处理等我想到了HTML编辑器CKEditor， 但最近的版本使用中需要在jsp页面嵌入tablib标签，但现MIS系统中的JSP版本过于太低，不支持，所以我只能从网上找到能够代替的，在浏览当中我觉得xhEditor不错，它是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，而且兼容很多浏...
配置xheditor图片上传功能
SuperDevilBoy的博客
01-27 2937
一、xheditor在线编辑器的完全配置 　　到官方网站http://xheditor.com/download中先下载该编辑器，我下载的版本是稳定版中的V1.1.14版本。下载之后，你就解压，得到文件目录。它所包含的文件夹和文件如下图。总的就这么多文件，别看走眼了。 　　文件解压好了，现在该怎么办呢？该如何在网站项目中使用这些文件呢？先到你的网站项目的根目录下面，建立一个专门用来处理
几款在线文本编辑器的比较(jquery文本编辑器)
素年小事
04-24 815
最近几天一直在寻找一款在线的文本编辑器,并试用了其中一些,有些体会,现记录于下:一个国外的网站,记录了一份几乎涵盖所有 WYSIWYG 在线编辑器比较表:http://www.geniisoft.com/showcase.nsf/WebEditors国内的开源社区网站,记录了常用在线编辑器http://www.open-open.com/ajax/Editor.htmhttp://w...
在Flask中集成xhEditor：教程与图片文件上传
3. **初始化编辑器**：找到需要转换为富文本编辑器的`textarea`元素，添加一个特定的类名（通常是`xheditor`），xhEditor会根据这个类名来初始化编辑器。 4. **配置编辑器**：xhEditor允许通过JavaScript进行配置，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值