xhEditor - 支持word上传的富文本编辑器

最新推荐文章于 2024-09-03 04:26:29 发布
最新推荐文章于 2024-09-03 04:26:29 发布
阅读量139 收藏
点赞数
分类专栏： word图片上传控件 文章标签： vue.js 前端 javascript
原文链接：https://www.cnblogs.com/zyzzz/p/15603897.html
版权

这种方法是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样式。

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

所有代码已经全部传到网上，有需要的朋友可以直接下载使用，http://blog.ncmem.com/wordpress/2019/08/07/javaword图片上传控件/

讨论群：223813913

yjjatqihc
关注
专栏目录
Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误
cwhatiscs的专栏
04-19 1504
公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器（在线富文本编辑器）中。Chrome+IE默认支持粘贴剪切板中的图片，但是我要粘贴的文章存在word里面，图片多达数十张，我总不能一张一张复制吧 ？ 我希望打开文档doc直接复制粘贴到富文本编辑器，直接发布 网上找了很久，大部分都有一些不成熟的问题，皇天不负有心人终于让我找到了一个成熟的项目。 1、前端引用代码 ...
最新版本xheditor-v1.2.2
10-22
XHEditor是一款基于JavaScript的开源富文本编辑器，适用于Web应用程序，为用户提供类似Microsoft Word的在线编辑体验。最新版本XHEditor-v1.2.2带来了多项优化和改进，提升了用户体验和稳定性，是开发人员构建动态...
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编辑器的使用
weixin_34274029的博客
04-26 128
一个博客、cms网站都一定会用到一个html编辑器，刚好xmfdsh在做网站时候需要用到这类编辑器，在对比了之后，发现其实差不了多少，刚好一个不错的friend在用xheditor，想到后面有不懂的还可以请教下，所以选择了这个xheditor，那么这个html到底怎么使用呢？？摸索了一个晚上个人觉得对于初学者，xheditor的使用教程实在还应该加上一些注意的地方。好，废话不多说，这里就来说一下怎...
XHEDITOR – 支持WORD上传的富文本编辑器
最新发布
weixin_37086298的博客
09-03 404
最近搞定块挻火的，今天早上又有网友加我微信私聊，也是想了解这块的技术和方案。 昨天晚上论坛里面的一个网友给我发私信，想了解一下如何解决word内容图片复制粘贴的问题，主要是想一起探讨一下这块的技术问题，他用的是xhEditor这个富文本编辑器，这位老哥说他也是刚开始学习，很多知识都不太懂，所以先开始花了大概半个小时左右的时...
【jQuery】网页文本格式编辑器xheditor
编程记录，亲测有效
03-22 2597
网页文本格式编辑器xheditor是一款优秀的、开源的JQuery插件。现在很多网站都涉及到用户的交互，很难想象一个没有输入框的网站是怎么样的，你总不能一个给一个空白的文本框给别人吧？如果让你自己用javascript或者jquery写一款文本格式编辑器，费时费力。jQuery插件xheditor是首选。这框插件非常出名、经典，甚至现在正在写csdn的博客编辑器，就是在它的基础上改进过来的，只是比
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曾经是...
富文本编辑器 .zip
07-23
富文本编辑器是一种用于网页应用的工具，它允许用户以类似Word的方式编辑内容，并能直接在网页上预览效果。富文本编辑器的核心功能在于提供一个用户友好的界面，使得非程序员也能方便地创建和编辑复杂的文本格式，...
xheditor 文本编辑器插件
02-13
xheditor是一款基于JavaScript的开源富文本编辑器，它具有轻量级、高效、易用的特点。其设计目标是为开发者提供一个功能强大且易于集成到现有系统的编辑解决方案。通过xheditor，用户可以在网页上进行文字格式化、...
jsp+xheditor web文本编辑器源代码
08-05
XHEditor是一款开源的Web富文本编辑器，主要用JavaScript编写，适用于Ajax和Web 2.0应用。它提供了丰富的文本格式化选项，如字体、字号、颜色、对齐方式等，以及图片上传、表格、链接等功能，使得用户可以在网页上像...
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.js
07-31
xheditor.js源码，来自网上。xheditor.js源码，来自网上。
xhEditor 免费的国产HTML在线编辑器
10-28
在线编辑器，CKeditor+CKfinder的组合是首选的，可惜CKfinder要收费，黄金搭档只有1个是免费的，又不想用回老版本，所以站长只好另寻他路。
Xheditor网页文本编辑器
11-04
添加到MyEclipse中就可以用了,最好把编码改成UTF—8，这个只是初学者学习的文件。
xheditor 1.2.2.zip
05-23
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，基于网络访问并且兼容IE 6.0 ,Firefox 3.0 ,Opera 9.6 ,Chrome 1.0 ,Safari 3.22 。完全基于JavaScript开发，您可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。 主要特点： 精简迷你 编辑器初始加载4个文件，包括：1个js(50k) 2个css(10k) 1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。 高效jQuery引擎 基于强大的开源jQuery引擎开发，提供高效的代码执行效率，并完美的实现最佳浏览器兼容性。 使用简单 简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化HTML编辑器。 强大Ajax上传 内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，追求完美的用户上传体验。 Word完美支持 实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。 安全的UBB 提供完美的UBB可视化编辑器解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷。 兼容以下浏览器： IE6, IE7, IE8, IE9 Firefox 3.0 Chrome 1.0 Opera 9.6 Safari 3.22
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
hamber
03-31 124
    xhEditor     http://xheditor.com/
KINDEDITOR实现WORD粘贴公式自动上传
weixin_52041354的博客
07-31 1049
嗯，这是一个好问题，主要还是很多网友反馈了这个问题，有很多网友还是大学生，平时对这块的技术也比较感兴趣，希望通过源代码能够学习这块的技术，对自己也是一个提高，还有一些是自由职业者，平时在网上接一些网站做，然后有些用户也有这个需求，大多数企业网站管理员都不太懂技术，或者也有上班的员工。返回图片地址HTML，编辑器：FCKEditor，CKEditor，KindEditor，UEditor，TinyMCE，wangEditor，xhEditor，eWebEditor，JMEditor，CuteEditor，
在Flask中集成xhEditor：教程与图片文件上传
3. **初始化编辑器**：找到需要转换为富文本编辑器的`textarea`元素，添加一个特定的类名（通常是`xheditor`），xhEditor会根据这个类名来初始化编辑器。 4. **配置编辑器**：xhEditor允许通过JavaScript进行配置，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值