edui 富文本编辑_终于我还是输给了免费富文本编辑器
前因后果
考虑给百度编辑器开发的一个二次插件,等下会进行说明如何使用改源码的方式开发二次插件
后端增加接口,接受word文档,转为html返回前台,前台再根据html内容对于富文本编辑框继续赋值和一些处理
然而,理想很美好,现实很骨感:
无法达到100%还原,word里面转译html会存在各种问题
有存在无法解析和翻译的部分
客户不会买账!(核心原因)
如何解决word转译到富文本编辑的问题
这两天搜索了几乎所有的富文本编辑器(国内用的比较多的)似乎都没有解决这个问题。
然后几乎所有的带word导入粘贴的,几乎都是商业收费软件(还很贵)
无奈之下,BOSS决定掏钱升级ewebeditor并且怪为什么没有提早说百度编辑器实现不了。(经理&我:???)
所以最后结果就是:我瞎忙活了几天(内心一万个草泥马)。
既然知道了结果为什么还要写这篇文章,我其实很不甘心,一个方案被否决,我决定记录一下这个可行的数据方案
JAVA&百度编辑器实现word粘贴(非完美)
不扯那么多,直接上菜:
1. 前端为百度编辑器自定义一个上传word的功能
搜索一下:UE.commands["setbordervisible"] = {
在它的下面加入如下的代码:
UE.commands["getword"] = {
execCommand: function (Name) {
if (window.FileReader) {
var inputObj=document.createElement('input')
inputObj.setAttribute('id','my_inputObj');
inputObj.setAttribute('type','file');
// inputObj.setAttribute('accept','application/msword');
inputObj.setAttribute("style",'visibility:hidden');
document.body.appendChild(inputObj);
inputObj.onchange = function(){
//拿取上传的文档
var fileData = inputObj.files[0]
if(fileData.type.indexOf('word')>-1){
if(fileData.size>1048576){ //控制在1M以内
alert('您上传的文件大于1MB,请上传1MB以内的word文件')
return;
}
console.log(fileData)
}else{
alert('请选择一个word文件')
}
}
inputObj.click();
}
}
};
增加一个命令叫做:getword
模拟一个input file,并且模拟一次点击文件上传
如果上传了具体文件,触发onchange,并且进行word的各种判断
然后将文件的内容传到后台的接口(具体怎么做根据自己的语言来处理)
加入自定义的命令
//为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起
var btnCmds = ['undo', 'redo', 'formatmatch',
'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
'blockquote', 'pasteplain', 'pagebreak',
'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts','getword'];
注意到最后一个getword了么,这就是刚刚加进去的
在Lang/zh-cn/zh-cn.js文件当中,增加按钮说明,直接照着截图加就行
,'getword':'获取word'
为了防止图裂,还是写一下,搜一下`scrawl:'涂鸦',基本可以找到大概的位置
修改ueditor.config.js文件,增加新的按钮
在help的后面加一个getword就好了,注意以下json格式,逗号不能少
增加样式,修改Themes/default/ueditor.css,直接在最底下增加
.edui-default .edui-toolbar .edui-for-getword .edui-icon {
background-image: url(../images/wordT1.png);
background-repeat: no-repeat;
width: 20px !important;
background-size: 18px;
background-position: center;
}
Tip:wordT1.png 是一个word的小图标,这里就不提供了
才怪:Themes/default/images/wordT1.png
上面这一套做完之后,基本上在百度编辑器里面会多出一个图标,接下来需要后端开发接口,对接这个插件的行为和操作
2. 后端为word文件做转化为html的操作,然后将html原文返回给前端
做这个接口要特别的小心,需要防止接口被滥用,拖垮服务器资源,因为转化和图片存储的代价还是不小的,需要控制可以转化的大小
前文也说了,老板都出钱升级了,我还玩你个鬼的百度编辑器,溜了溜了,用ewebeidor,下面是网上搜下来的一个word转html的工具方法,需要apach-poi的支持,我用的是3.12版本,具体的内容看自己。
注意以下:docx 和 doc 在poi里面是需要用不同的对象进行操作的,后续自己也会补一补这一块的内容
poi 还是挺强的,很牛逼,把巨硬的那一套治的服服帖帖
import org.apache.commons.io.FileUtils;
import org.apache.poi.hwpf.HWPFDocument;
import org.apache.poi.hwpf.converter.PicturesManager;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.extractor.WordExtractor;
import org.apache.poi.hwpf.model.PAPX;
import org.apache.poi.hwpf.usermodel.Picture;
import org.apache.poi.hwpf.usermodel.PictureType;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.apache.poi.xwpf.usermodel.XWPFNumbering;
import org.apache.poi.xwpf.usermodel.XWPFParagraph;
import org.openxmlformats.schemas.wordprocessingml.x2006.main.CTNumbering;
import org.w3c.dom.Document;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;
/**
* 根据poi写的word帮助类
* home.php?mod=space&uid=686237 2020/10/12 18:26
**/
public class WordHelper {
public static void parseDocx2Html() throws Throwable {
final String path = "D:\\XXX\\mark\\XXX\\XXXX\\";
final String file = "XXXX.doc";
InputStream input = new FileInputStream(path + file);
String suffix = file.substring(file.indexOf(".")+1);// //截取文件格式名
//实例化WordToHtmlConverter,为图片等资源文件做准备
WordToHtmlConverter wordToHtmlConverter = new WordToHtmlConverter(
DocumentBuilderFactory.newInstance().newDocumentBuilder()
.newDocument());
wordToHtmlConverter.setPicturesManager(new PicturesManager() {
@Override
public String savePicture(byte[] content, PictureType pictureType,
String suggestedName, float widthInches, float heightInches) {
return suggestedName;
}
});
if ("doc".equals(suffix.toLowerCase())) {
// docx
HWPFDocument wordDocument = new HWPFDocument(input);
wordToHtmlConverter.processDocument(wordDocument);
//处理图片,会在同目录下生成 image/media/ 路径并保存图片
List pics = wordDocument.getPicturesTable().getAllPictures();
if (pics != null) {
for (int i = 0; i < pics.size(); i++) {
Picture pic = (Picture) pics.get(i);
try {
pic.writeImageContent(new FileOutputStream(path
+ pic.suggestFullFileName()));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
}
// 转换
Document htmlDocument = wordToHtmlConverter.getDocument();
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
DOMSource domSource = new DOMSource(htmlDocument);
StreamResult streamResult = new StreamResult(outStream);
TransformerFactory tf = TransformerFactory.newInstance();
Transformer serializer = tf.newTransformer();
serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");//编码格式
serializer.setOutputProperty(OutputKeys.INDENT, "yes");//是否用空白分割
serializer.setOutputProperty(OutputKeys.METHOD, "html");//输出类型
serializer.transform(domSource, streamResult);
outStream.close();
String content = new String(outStream.toByteArray());
System.err.println(content);
FileUtils.writeStringToFile(new File(path, "interface.html"), content,
"utf-8");
}
public static void main(String[] args) throws Throwable {
WordHelper.parseDocx2Html();
}
}
后续
滚回去继续升级ewebeditor了,擦公司的前辈居然有人做了一个一键排版和文章重排,直接动了源代码,有时间研究一下,果然老系统出神仙。
PS:老系统代码里面老板的名字在上面,老板是大公司程序员出身,挺好。
总结:
永远不要小看任何细节的点,看似平平无奇的功能,其实真正考虑要实现的时候。
一个简单的复制粘贴其实也并不简单。word的复制和原样粘贴要实现其实不太容易。
那么这种word转译的exe插件,他们是怎么做到的,我现在产生了无限的思考......
edui 富文本编辑_终于我还是输给了免费富文本编辑器相关推荐
- 文本编辑器_国外程序员最爱的5种文本编辑器
文本编辑器的选择是很多初学编程者在学习编程时需要考虑的问题之一,当前IT行业应用开发平台软件较多,可供程序员选择的文本编辑器类型较多,但是一个好的文本编辑器能够提高程序工作的效率,达到事半功倍的效果. ...
- edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...
- edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
- 富文本编辑_博客的后台富文本编辑和阅读计数
哈喽,大家好呀,我是滑稽君.本期我们为博客加上分类统计功能.后台富文本编辑功能.和阅读计数功能.那么我们先说说富文本编辑器是什么. 富文本编辑器,Rich Text Editor, 简称 RTE, 它 ...
- swift 富文本编辑_如何使用Swift构建协作式文本编辑器
swift 富文本编辑 by Neo Ighodaro 由新Ighodaro 如何使用Swift构建协作式文本编辑器 (How to build a collaborative text editor ...
- java简单的文本编辑器_采用java语言如何建立一个简单的文本编辑器
1.类的框架: 所谓类的框架,就是给出这个类需要的属性和方法,比如本文就需要我们的类继承JFrame父类和载入ActionListener接口,属性有按钮,面板,文本区域框,方法构造方法与事件处理方法 ...
- tinymce vue 部分工具不显示_工具栏图标未在tinymce(4.0.1)文本编辑器中显示
我正在将tinyMCE从3.4.2升级到4.0.1.一切都在当地完美.但是,当我在服务器上发布所有内容时,问工具栏加载正常,但图标显示不正确.注意:我有针对app和CDN的单独项目.我猜这是一个跨域/ ...
- html实现富文本编辑器,前端程序员福利,6款轻量级富文本编辑器,轻松实现富文本编辑...
1.国产富文本编辑wangEditor 基于javascript跟css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义typecho 富文本编辑器,菜单栏可以自定义配置. 下载 ...
- uniapp editor富文本编辑器,h5富文本编辑器封装成插件
重点提示:工具栏的图标请自行在iconfont(https://www.iconfont.cn/)去添加,否则图标无法显示 公司业务需求,需要在h5实现富文本编辑功能.uniapp的editor可以实 ...
最新文章
- CVPR 2021| 基于深度图匹配的鲁棒点云配准框架
- 基于OpenLDAP_MirrorMode的OpenLDAP高可用
- dbvis 数据库工具:数据库驱动集合包获取,dbvis数据库工具安装驱动实例演示
- [Python人工智能] 三十四.Bert模型 (3)keras-bert库构建Bert模型实现微博情感分析
- FreeBsd网络性能优化方案sysctl
- c++中多线程传递参数原理分析
- Python3的方法解析顺序(MRO)
- 【EOJ Monthly 2019.01 - E】唐纳德先生与假骰子(假概率问题)
- ISA Server 2004防火墙的基本配置
- java javax.crypto.mac dofinal_Java密码学 - 2. MAC example
- 怎么阻止计算机安装游戏软件,华硕win8系统怎么禁止电脑自动安装其他软件和游戏?...
- 配置内网windows域教程,模拟公司内网架构
- 安洵信息渗透工程师面试经验分享
- 超算入门笔记:大型机上如何运行WRF模式?一文总结(并行运算、Linux基础、作业调度、WRF运行)
- 性能测试七种常用方法,以及四大应用领域
- Request Headers 和Response Headers——请求头和响应头
- 论文研读——n个物体相互间的碰撞避免
- 163邮箱开启SMTP权限
- 《程序员的自我修养-链接-装载与库》第三章 目标文件里有什么(1)
- 充足理由律-存在即合理
热门文章
- Lte/5G中的RSRP、RSRQ、SINR、MCS介绍
- 【个性化联邦学习】Towards Personalized Federated Learning 论文笔记整理
- Android Studio editText去掉下划线的办法
- ele.getBoundingClientRect()使用
- java 初始化数组_Java中数组的初始化
- Tampermonkey中文文档(部分)
- OMV安装可道云kodexplorer网盘
- 模式识别——初识模式识别
- 扫描二维码启动微信打开特定页面
- spring boot 源码解析15-spring mvc零配置