vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...

editor-ui

vue 集成 tinymce 富文本编辑器

自定义 tinymce 富文本编辑器,

在原来的编辑器中增加上传 word 模板

最终展示效果:

主要代码:

整体思路:

1,在编辑器原来的基础上增加上传模板按钮

2, 前端上传 word 模板

3, 服务端接收将 word 转换为html 返回前端

4, 前端拿到服务端返回的值,将其放到富文本编辑器中

4.1, 在 data 的中定义个 customEditor 变量,值可以为空

4.2, 填充值的方式: 拿到服务端上传成功之后的返回参数,将其填充到标签中,

你所编辑的所有东西都会呈现在这个标签中,所有富文本编辑器千篇一律

this.customEditor=res.content;

console.log('haoxy'+this.customEditor)

tinymce.get('tinymceEditer').setContent(this.customEditor);

5, 前端点击submit,服务端将其转换成 pdf文件

放到项目中遇到的问题修复

问题描述1:

当上传模板之后点击浏览器刷新编辑框中的内容会变为之前上传的内容

解决方法:

if (localStorage.editorContent) {

tinymce.get('tinymceEditer').setContent(localStorage.editorContent);

}

将这段代码注释掉即可,因为编辑器会自动的将内容保存到本地,当你去点击浏览器刷新的时候他会去本地取出并赋值到编辑框中

问题描述2:

当你在编辑框中进行编辑的时候tinymce编辑器监听了键盘按下的事件,但是键盘按下的前一个字符没有保存,例如:

你在编辑框中输入4个字符 aaaa 你再点击submit生成pdf文件,但是 pdf文件中就只有3个字符aaa

解决方法:

因为编辑器只监听了keydown事件,并没有去监听keyup事件

所以加上如下代码即可

editor.on('keyup', function (e) {

localStorage.editorContent = tinymce.get('tinymceEditer').getContent();

vm.editorModel.content = tinymce.get('tinymceEditer').getContent();

});

问题描述3:

当点击submit 生成pdf文件时,生成的 pdf 文件样式改变了

解决方法:

这是因为将 word 文档转换成 html 的时候自动的加上了这段样式

解决方法可以在前端解决也可以在后端去解决,这里我选择了在后端解决

后端在返回给前端html 的时候,在返回的内容上加上

respInfo.setContent("

"+content+"

vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...相关推荐

富文本编辑器实现导入word
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
富文本编辑器粘贴复制Word
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
富文本编辑器复制粘贴word
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频，被替换成img标签的问题
以前用百度的UE,代码陈旧,有很多定制化的需求改起来很费劲,后来发现国外有个一直在维护的TinyMCE编辑器,功能强大,便转跳到这个坑里了. 目前遇到的坑:富文本编辑器里上传了本地视频之后,会默认给替 ...
vue集成vue-ueditor-wrap富文本编辑器
vue前言最近项目需要使用到富文本编辑器,因为项目关系需要使用到vue-ueditor-wrap富文本编辑器.经过了几小时的研究终于成功集成了. 1.install vue2 # vue-uedit ...
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...

vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...

vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...相关推荐

最新文章

热门文章