TinyMCE如何完美兼容Word公式粘贴并保留原始样式？

如何在富文本中插入表情word文档及数学公式前言校外培训迎来下岗潮教育行业的小伙伴大家过的还好吗不过话说回来技术过硬你在哪里都是最靓的仔。今天就给大家补充一点弹药如何在富文本中插入表情word文档及数学公式。为什么是 TinyMCE用过百度的vue-ueditor-wrap据说不更新了也用过vue-quill-editor轻量级但扩展性不强。一直以为不存在颜值高功能又强大的富文本直到我遇见了它。tinymce号称宇宙第一富文本编辑器用官方的话就是 TinyMCE is the world’s most customizable, scalable, and flexible rich text editor支持Vue、React、Angular当前最流行的三大框架基础组件丰富简单配置即可使用有付费的插件和功能保证了持续维护和创新其实免费的也够用界面简约美观符合现代审美支持移动端 TinyMCE Mobile唯一个从word粘贴过来可以保持绝大部分格式的编辑器效果展示粘贴Word导入word文档导入PPT文档一键导入PPT文件并将PPT转换成图片上传到服务器中。安装使用普通用法这里就不讲了主要介绍一下如何在vue-cli项目中集成tinymce。网上的方法多而杂今天就给大家介绍一下官方的集成方法也是我认为最简单、最靠谱的解决方案。React和Angular官网也有介绍大家自己研究一哈。1、官网注册账户首先登陆 tiny官网 注册自己的账户注册完登陆点击左侧的Dashboard这时你会获得一个自己独有的 API Key这个 API Key 后面会用到。2、安装tinymce/tinymce-vue点击右上角的 Read the Tiny Docs会正式进入官方文档然后在文档上方的搜索框中输入vue这样vue相关的集成方法就出来了。根据vue版本安装不同的tinymce/tinymce-vue目前我用的是vue2.x$ npm install--savetinymce/tinymce-vue^33、在组件中使用tinymce将下面的官方示例代码复制到自己的vue组件中, 将 api-key 修改为自己刚刚获取的 API Keyimport Editor from tinymce/tinymce-vue export default { name: app, components: { editor: Editor }, data() { return { content: , init: { height: 500, menubar: false, plugins: [ advlist autolink lists link image charmap print preview anchor, searchreplace visualblocks code fullscreen, insertdatetime media table paste code help wordcount ], toolbar: undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help } } }, methods: { onInput(content) { console.log(content) } } }搞定 npm run serve 活生生的tinymce就出来啦~~~ 是不是很easy插件使用tinymce可扩展的地方有很多比如语言、主题、皮肤、插件和图标等。下面主要介绍一下几款插件的使用方法。表情插件 emoticonsemoticons属于内置插件使用起来非常简单只用在plugins和toolbar配置中添加emoticons就可以了。vbnetplugins: [‘emoticons’],toolbar:‘emoticons’插入word文档 importwordimportword属于扩展插件使用方法如下1.下载 importword插件2.在vue-cli项目的public目录新建tinymce文件夹然后在tinymce文件下新建plugins文件夹将下载好的importword插件放在plugins文件夹下3.在vue组件中引入importword插件plugins:[importword],toolbar:importword,external_plugins:{importword:/tinymce/plugins/importword/plugin.min.js}ok这样插入word的按钮就出现了~~~ DEMO体验地址数学公式 kityformula-editorkityformula-editor也属于扩展插件和上面用法差不多1.下载 kityformula-editor插件2.在vue-cli项目的public目录新建tinymce文件夹然后在tinymce文件下新建plugins文件夹将下载好的kityformula-editor插件放在plugins文件夹3.在vue组件中引入kityformula-editor插件plugins:[kityformula-editor],toolbar:kityformula-editor,external_plugins:{kityformula-editor:/tinymce/plugins/kityformula-editor/plugin.min.js}注意由于tinymce默认是通过cdn的方式加载远程资源加载数学公式的kityFormula.html时会报错这时我们只需要把plugin.min.js里面的tinymce.baseURL修改成本地的tinymce就可以了。再次打开数学公式页面就可以正常显示啦~~~ DEMO体验地址其实插入数学公式还可以使用wiris的MathType不仅可以插入数学公式还是可以插入化学公式。相比于MathType百度的kityformula-editor体验感更好但MathType的功能更加强大。这两种方式我都在放在Github中了欢迎随时下载使用。分享到此结束听说点赞的同学非富即贵非帅哥即美女呦~有问题欢迎在评论区留言~Github Demo地址github.com/frontend-af…##参考文档tinyMCE中文文档tinyMCE官方文档