Vue⾃定义富⽂本编辑器tinymce⽀持导⼊word模板⾃定义富⽂本编辑器分为前端项⽬和后端项⽬两个部分,⾸先先说⼀下前端项⽬
前端
前端项⽬地址:
编辑器名称: tinymce
前端采⽤的 vue.js
⾄于Vue 中怎么集成 tinymce 编辑器参考:
其中关键代码在项⽬中的
<template>
<div>
<Row>
<Col span="18"offset="3">
<Card shadow>
<Upload action="localhost:2020/upload/word/template"
:on-success="handleSuccess">
<Button icon="ios-cloud-upload-outline">上传模板</Button>
</Upload>
<Form ref="editorModel":model="editorModel":rules="editorRules">
<FormItem prop="content">
<textarea  class='tinymce-textarea'id="tinymceEditer" >
</textarea>
</FormItem>
<FormItem>
<Button type="primary"@click="handleSubmit('editorModel')">Submit</Button>
<Button type="ghost"@click="handleReset('editorModel')">Reset</Button>
</FormItem>
</Form>
<Spin fix v-if="spinShow">
<Icon type="load-c"size=18class="demo-spin-icon-load"></Icon>
<div>加载组件中...</div>
</Spin>
</Card>
</Col>
</Row>
</div>
</template>
<script>
import tinymce from'tinymce';
import util from'@/libs/util';
export default{
name:'index',
data(){
return{
spinShow:true,
editorModel:{
content:'dfsd'
},
content2:'sdds',
editorRules:{
content:[
{
type:'string',
min:5,
message:'the username size shall be no less than 5 chars ',
trigger:'blur'
}
]
},
customEditor:null
};
},
methods:{
methods:{
handleSuccess(res){
console.log(res)
this.t;
console.log('haoxy'+this.customEditor)
<('tinymceEditer').setContent(this.customEditor);
/*this.$nextTick(() => {
this.customEditor = ("tinymceEditer");
})*/
},
init(){
this.$nextTick(()=>{
let vm =this;
let height = document.body.offsetHeight -300;
tinymce.init({
selector:'#tinymceEditer',
branding:false,
elementpath:false,
height: height,
language:'zh_CN.GB2312',
menubar:'edit insert view format table tools',
plugins:[
'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
'searchreplace visualblocks visualchars code fullpage',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons paste textcolor colorpicker textpattern imagetools codesample'
],
toolbar1:' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alig
nleft aligncenter alignright alignjustify | bullist nu mlist outdent indent | link image emoticons media codesample',
autosave_interval:'20s',
image_advtab:true,
table_default_styles:{
width:'100%',
height:'100%',
borderCollapse:'collapse'
},
setup:function(editor){
<('init',function(e){
vm.spinShow =false;
if(localStorage.editorContent){
<('tinymceEditer').setContent(localStorage.editorContent);
}
});
<('keydown',function(e){
localStorage.editorContent = ('tinymceEditer').getContent();
t = ('tinymceEditer').getContent();
});
}
});
/*this.customEditor = ("tinymceEditer");*/
});
},
handleSubmit(name){
this.$refs[name].validate((valid)=>{
if(valid){
util.post('/html/pdf',this.editorModel).then(res =>{
this.$Message.success('Success!');
});
}else{
this.$('Fail!');
}
});
},
handleReset(name){
this.$refs[name].resetFields();
},
},
mounted(){
this.init();
},
destroyed(){
<('tinymceEditer').destroy();
}
}
</script>
在原有的编辑器的基础上新增了上传模板功能, 在上传成功之后拿到 返回的 html 数据，将其设置到
<textarea class='tinymce-textarea' id="tinymceEditer" ></textarea>
这个标签中，所有的编辑器都是这个道理.
上传成功之后:
handleSuccess(res){
console.log(res)
this.t;
console.log('haoxy'+this.customEditor)
<('tinymceEditer').setContent(this.customEditor);
看下效果图:
点击 submit 我是在后端将其转换成了 pdf ⽂件(按需求定义)
如果在集成中出现: Uncaught SyntaxError: Unexpected token < 这个错误
解决⽅法:
在 tinymce.init 中把language : zh_CN.GB2312 去掉
在你需要的地⽅引⼊: import '../../../zh_CN'(我是把 zh_CN.js放到了根⽬录下了，效果是⼀样的),
如果编辑器的样式还是没有出来，只出来⼀个编辑框的话 ，就在你的根⽬录下的 index.html 中引⼊:
<script src="cdn.bootcss/tinymce/4.7.4/tinymce.min.js"></script>
后端
后端(服务端)项⽬地址:
后端采⽤: springBoot , POI
这⾥就不对POI做过多的说明了，贴个官⽹
整体思路:
1，在编辑器原来的基础上增加上传模板按钮
2, 前端上传 word 模板
3, 服务端接收将 word 转换为html 返回前端
4, 前端拿到服务端返回的值，将其放到富⽂本编辑器中
后端主要是第3步
⾸先搞清楚下要将doc/docx⽂档转成html/htm的话要怎么处理，根据POI的⽂档，我们可以知道，处理doc 格式⽂件对应的 POI API 为HWPF、docx 格式为 XWPF。此处参考下这篇好⽂： 在格式转换上说得很清楚。
网页模板编辑器
所以整体就是：根据⽂档类型，doc我们⽤HWPF对象处理转换、docx⽤XWPF对象处理转换。
顺便贴⼀下这个在线⽂档
所需依赖
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.12</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-scratchpad</artifactId>
<version>3.12</version>
</dependency>
<dependency>
<groupId>fr.opensagres.xdocreport</groupId>
<artifactId>fr.opensagres.xdocreport.document</artifactId>
<version>1.0.5</version>
</dependency>
<dependency>
<groupId>fr.opensagres.xdocreport</groupId>
<artifactId>org.apache.verter.xhtml</artifactId>
<version>1.0.5</version>
</dependency>
<!-- mvnrepository/artifact/org.apachemons.io/commonsIO -->
<dependency>
<groupId>org.apachemons.io</groupId>
<artifactId>commonsIO</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>com.aspose.words</groupId>
<artifactId>aspose-words</artifactId>
<version>15.8.0</version>
</dependency>
其中 commonsIO 这个依赖不知道为什么下载不下来，我将 jar 放到了我的私服上，在l 中有体现，这⾥不做详细说明
⼀、处理doc。
这个相对简单，⽹上⼀查⼀堆，我的代码也是根据⽹上的做下⾃⼰的优化和逻辑。
因为POI很早前就可以⽀持doc的处理，所以资料⽐较多。
思路就是：HWPFDocument对象实例化⽂件流 -> WordToHtmlConverter对象处理HWPFDocument对象及预处理页⾯的图⽚等（主要是图⽚）
⽂档说明是：
Converts Word files (95-2007) into HTML files.
This implementation doesn’t create images or links to them. This can be changed by overriding
AbstractWordConverter.processImage(Element, boolean, Picture) method.
-> org.w3c.dom.Document对象处理WordToHtmlConverter，⽣成DOM对象 -> 输出⽂件。
这⾥有个好处就是使⽤到了Document对象，从⽽解决了编码、⽂件格式等问题。
这⾥因为过程简单，直接贴简单demo，看注释即可：
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;
l.parsers.DocumentBuilderFactory;
l.transform.OutputKeys;
l.transform.Transformer;
l.transform.TransformerFactory;
l.transform.dom.DOMSource;
l.transform.stream.StreamResult;
import org.apachemons.io.FileUtils;
import org.apache.poi.hwpf.HWPFDocument;
import org.apache.verter.PicturesManager;
import org.apache.verter.WordToHtmlConverter;
import org.apache.poi.hwpf.usermodel.Picture;
import org.apache.poi.hwpf.usermodel.PictureType;
import org.apache.FileImageExtractor;
import org.apache.FileURIResolver;
import org.apache.verter.xhtml.XHTMLConverter;
import org.apache.verter.xhtml.XHTMLOptions;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.apache.poi.xwpf.usermodel.XWPFPictureData;
import org.w3c.dom.Document;
public class POIForeViewUtil {
public void parseDocx2Html()throws Throwable {
final String path ="/tmp/";
final String file ="xxxxxxx.doc";
InputStream input =new FileInputStream(path + file);
String suffix = file.substring(file.indexOf(".")+1);// //截取⽂件格式名
//实例化WordToHtmlConverter，为图⽚等资源⽂件做准备
WordToHtmlConverter wordToHtmlConverter =new WordToHtmlConverter(    wInstance().newDocumentBuilder() .newDocument());
wordToHtmlConverter.setPicturesManager(new PicturesManager(){ public String savePicture(byte[] content, PictureType pictureType,
String suggestedName,float widthInches,float heightInches){
return suggestedName;
}
});
if("doc".LowerCase())){
// doc
HWPFDocument wordDocument =new HWPFDocument(input);
wordToHtmlConverter.processDocument(wordDocument);
//处理图⽚，会在同⽬录下⽣成并保存图⽚
List pics = PicturesTable().getAllPictures();
if(pics != null){
for(int i =0; i < pics.size(); i++){
Picture pic =(Picture) (i);
try{
pic.writeImageContent(new FileOutputStream(path
+ pic.suggestFullFileName()));
}catch(FileNotFoundException e){
e.printStackTrace();
}
}
}
}
// 转换
Document htmlDocument = Document();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。