能粘贴Word 内容(含公式)的Web编辑器

最新推荐文章于 2024-07-20 13:41:56 发布
最新推荐文章于 2024-07-20 13:41:56 发布
阅读量216 收藏
点赞数
分类专栏： word图片一键粘贴 文章标签： word 前端 编辑器
原文链接：https://www.cnblogs.com/songsu/p/17402137.html
版权
该文介绍了一种使用JavaServlet处理文件上传的方法，代码示例展示了如何在web.xml中配置servlet，并在后台处理上传到指定文件夹的图片。前端使用ueditor编辑器，通过配置PostUrl与后台交互，实现图片上传后在编辑器中显示服务器上的图片地址。
摘要由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样式。

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

效果展示：

 

 

 

视频教程：

WordPaster网络图片上传功能

动易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
关注
专栏目录
kindeditor集成jmeditor公式HTML富文本编辑器
Leo的专栏
01-26 3976
最近公司需要做一个带公式的HTML编辑器，网上找了很多插件都不是很满意，然后看到一个kindeditor集成jmeditor公式的，感觉还不错，下面是集成后的效果！ 避免大家都踩坑，下面记录一下详细集成步骤： 1.下载kindeditor和jmeditor kindeditor V4.1.11 官网下载地址：http://kindeditor.net/down.php kindedi...
为自己收录的web公式编辑方式-MarkDown
bi_mang的博客
09-01 1072
1.最简单的方式 打开该网址，在公式编辑框中输入公式，公式编辑框下方就会自动显示对应的公式图片，右击该图片，选择复制图片，然后在博文中粘贴即可。 网址1：http://codecogs.com/latex/eqneditor.php 网址2：http://www.numberempire.com/texequationeditor/equationeditor.php2.
webeq公式编辑器
11-25
FCKeditorV4.1 集成 WebEq公式编辑器
推荐项目：MathLive - 数学公式编辑的Web组件
gitblog_00090的博客
05-15 793
推荐项目：MathLive - 数学公式编辑的Web组件 mathliveA web component for easy math input项目地址:https://gitcode.com/gh_mirrors/ma/mathlive 在数字化教育和科学研究的今天，高质量的数学公式编辑器显得尤为重要。MathLive是一款强大的Web组件，专为方便用户编辑数学公式而设计。其内置了超过800个...
支持复制粘贴WORD公式的WEB编辑器
最新发布
alisky119的博客
07-20 811
编辑器：FCKEditor，CKEditor，KindEditor，UEditor，TinyMCE，wangEditor，xhEditor，eWebEditor，JMEditor，CuteEditor，CMS和Web应用：动易SiteFactory，帝国CMS，DEDECMS，PHPCMS，PbootCMS，KesionCMS，FoosunCMS，YouDianCMS，DokuWiki，Z-Blog。国内唯一提供OEM产品授权，完全买断产品使用授权，不限用户数量，不限站点数量，不限服务器数量。
VUE中使用CKEDITOR,支持WPS,WORD,网页粘贴
alisky119的博客
07-18 304
在之前我们发布新闻的时候，图片上传就是一个痛点，因为用户单位的新闻都是在word里面编辑好的，发新闻的时候是希望能够一键直接导入到编辑器中，或者复制word内容，然后一键粘贴到网站后台的web编辑器中，如果word里面有图片就自动上传到服务器中，这样就能够大幅度提升用户的发文效率。12.国内唯一提供年费版授权方式，以年为单位为企业提供不限数量的授权服务，域名不限，IP不限，服务器不限，产品数量不限，满足企业灵活使用，灵活部署需求。免费提供CentOS平台产品源代码，免费提供编译，开发，部署等指导服务。
html超级公式编辑器
08-30
专业公式编辑器,功能强大.
html 公式编辑器,基于web的在线复杂公式编辑器的实现
weixin_36414864的博客
06-22 1632
基于web的在线复杂公式编辑器的实现直接调用word的公式编辑器，关键是解决web调用word，借用word的公式编辑器，解决在线编辑公式的问题。如何在线使用word是关键所在。由于能力问题没有解决，可是又必须做公式管理模块。只能用自己的笨方法做了。做法：2 在网上下载个editor3.js3 在jsp页面加入点击此处开始编辑公式(*打开编辑窗口后，编辑完公式后，点击‘复制到文档中’按钮，然后关闭...
编辑器 eWebEditor 支持word 源代码
04-17
eWebEditor支持直接粘贴来自Word的内容，这极大地便利了那些习惯于在Word中撰写文档的用户。它可以自动处理Word中的格式，如字体、颜色、对齐方式、列表等，并将其转换为HTML格式，无需担心格式混乱或丢失。此外，它...
NicTeX网络数学公式编辑器v1.0.zip
10-05
NicTeX网络数学公式编辑器v1.0.rar这个压缩文件可能包含该编辑器的安装程序或Web应用程序文件，用户解压后根据指南进行安装或在浏览器中运行。 总之，NicTeX为需要处理数学公式的用户提供了强大的工具，无论是在...
【论文技巧】Latex、Word、图片里的公式互转
qq_39804671的博客
03-31 2845
在MathType中打开“预置”-》“剪切和复制预置”-》勾选MathML或Tex，勾选“在转换中包括MathType 数据(D)”这一项-》确定，这样直接复制MathType中的公式就可以直接粘贴到Latex中了，不过这样粘需要把前后的。这个网站可以很方便将Latex转成MathML格式（就是Word里的MathType格式），还支持图片直接转Latex代码，不过每天只有两次。可以直接将图片转成Latex格式，缺点是有次数限制，每个月十次，不过可以多注册几个账号（。将图片转成Latex格式，再使用。
网络公式编辑器(专业html公式编辑器)
10-10
网络数学公式编辑器的主要特点： 　　1、对于初学者，有直观易用、所见即所得（英文：What You See Is What You Get，缩写：WYSIWYG）的用户界面；对于TeX/LaTeX语法精通者，能所想即所得（英文：What You Think Is What You Get，缩写：WYTIWYG），随心所欲编辑数学公式，无需再像MS-WORD那样在工具栏中选来选去，直接写下你心中的公式，编译一下，马上就能看到你心中所想的数学公式，不行再改。 　　2、对于初学者，具有可视化的WEB编辑界面；对于精通者，可直接在网页中插入公式TeX代码，存储一下，即可完成公式的网络发布，而不必先在MathType或MS-WORD中编好公式，再以在网页中插图的方式来进行数学公式的网络发布。 　　3、能在Windows、Linux和FreeBSD等各种网络服务器中运行。 　　4、自动智能改变公式的字体和格式，适合各种复杂的公式，支持多种字体。 　　5、支持TeX和LaTeX，并能够把公式转化为支持Web的各种图形。 　　6、超过600种公式符号和模版，涵盖数学、物理、化学、地理等科学领域，另外能生成围棋棋普、乐谱等。
在线数学公式编辑器插件
03-12
在线数学公式编辑器插件 web在线 js 数学公式 特殊符号
开源公式编辑器
07-28
这个可以在大家开发一个计算器时很有帮助
WebTeX 可视化网络公式编辑器源码
05-15
WebTeX 网络公式可视化编辑器 的源码分为两部分。一部分是核心源码，是一个基于TeX/LaTeX的CGI应用程序、dll组件或浏览器插件。另一部分是基于ASP/PHP/ASP.NET/JSP的输入TeX/LaTeX指令的可视化编辑器源码，它可在线对数学方程式进行可视化编辑。编辑后有四种输出方式供选择。一是将数学公式生成图片，放在WebServer上，链接地址由ASP/PHP/ASP.NET插入网页中。二是直接生成静态网页，当访客打开含有数学公式的静态网页时，再激发WebServer上的CGI将数学公式生成图片输出。三是将编辑好的数学公式的TeX/LaTeX指令与网页一起存于数据库中，在访客通过ASP/PHP/ASP.NET/JSP调用时，由WebServer生成图片并输出网页。四是生成符合MathML标准的文本文件，再由浏览器插件解析为公式显示。 　　WebTeX 网络数学公式编辑器的主要特点： 　　1、对于初学者，有直观易用、所见即所得（英文：What You See Is What You Get，缩写：WYSIWYG）的用户界面；对于TeX/LaTeX语法精通者，能所想即所得（英文：What You Think Is What You Get，缩写：WYTIWYG），随心所欲编辑数学公式，无需再像MS-WORD那样在工具栏中选来选去，直接写下你心中的公式，编译一下，马上就能看到你心中所想的数学公式，不行再改。 　　2、对于初学者，具有可视化的WEB编辑界面；对于精通者，可直接在网页中插入公式TeX代码，存储一下，即可完成公式的网络发布，而不必先在MathType或MS-WORD中编好公式，再以在网页中插图的方式来进行数学公式的网络发布。 　　3、能在Windows、Linux和FreeBSD等各种网络服务器中运行。 　　4、自动智能改变公式的字体和格式，适合各种复杂的公式，支持多种字体。 　　5、支持TeX和LaTeX，并能够把公式转化为支持Web的各种图形。 　　6、超过600种公式符号和模版，涵盖数学、物理、化学、地理等科学领域，另外能生成围棋棋普、乐谱等。
支持复制粘贴word公式的Web编辑器
weixin_52041354的博客
01-10 115
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题，于是各种网上扒拉，终于找到解决方案，在这里感谢一下知乎中众大神以及TheViper。 通过知乎提供的思路找到粘贴的原理，通过TheViper找到粘贴图片的方法。 其原理为一下步骤： 监听粘贴事件；【用于插入图片】 获取光标位置；【记录图片插入位置】 获取剪切板内容；【主要是获取文件】 上传剪切板图片； 在指定光标位置插入图片。 以下是代码部分： 1.获取光标代码部分，大部分都是直接利用TheViper的代码，只是做了简单的修改，在获
支持复制粘贴word公式的百度Web编辑器
Mr_Zang666的博客
05-25 94
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
推荐开源项目：FormulaEdit-react - 在Web上优雅地编写数学公式
gitblog_00027的博客
04-23 595
推荐开源项目：FormulaEdit-react - 在Web上优雅地编写数学公式 项目地址:https://gitcode.com/bruceliu68/formulaEdit-react FormulaEdit-react 是一个基于React的轻量级组件库，专为在Web应用中添加交互式数学公式编辑功能而设计。如果你是一名开发者，正在寻找一种简单且高效的方式，让你的用户能够方便地创建和编辑La...
Html编辑器粘贴内容过滤技术深度解析
“Html 编辑器粘贴内容过滤技术详解 - 解决数据粘贴需求，包括过滤纯文本、HTML、Word数据，同时保持用户体验，适用于iframe实现的Html编辑器，主要参考tinymce的实现方式。” 在开发Html在线编辑器时，粘贴内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值