如何在富文本中插入表情，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文档

插入数学公式

安装使用

普通用法这里就不讲了，主要介绍一下如何在vue-cli项目中集成tinymce。网上的方法多而杂，今天就给大家介绍一下官方的集成方法，也是我认为最简单、最靠谱的解决方案。React和Angular官网也有介绍，大家自己研究一哈。

1、官网注册账户

首先登陆 tiny官网注册自己的账户，注册完登陆，点击左侧的Dashboard，这时你会获得一个自己独有的 API Key，这个 API Key 后面会用到。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7JaL1fr-1666570508768)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e92f764587a4fe2bcf361ec7555e967~tplv-k3u1fbpfcp-watermark.image)]

2、安装@tinymce/tinymce-vue

点击右上角的 Read the Tiny Docs，会正式进入官方文档，然后在文档上方的搜索框中输入vue，这样vue相关的集成方法就出来了。

根据vue版本安装不同的@tinymce/tinymce-vue，目前我用的是vue2.x

$ npm install --save "@tinymce/tinymce-vue@^3"

3、在组件中使用tinymce

将下面的官方示例代码复制到自己的vue组件中, 将 api-key 修改为自己刚刚获取的 API Key

<template><div id="app"><editorapi-key="x1vyup3vl25v8l18tt7a9fxxxxxxxxxx8crp5j8m63v9r5":init="init":value="content"@input="onInput"/></div>
</template><script>
import 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)}}
}
</script>

搞定， npm run serve 活生生的tinymce就出来啦~~~ 是不是很easy！

插件使用

tinymce可扩展的地方有很多，比如语言、主题、皮肤、插件和图标等。下面主要介绍一下几款插件的使用方法。

表情插件 emoticons

emoticons属于内置插件，使用起来非常简单，只用在plugins和toolbar配置中添加emoticons就可以了。

plugins: ['emoticons'],
toolbar:'emoticons'

插入word文档 importword

importword属于扩展插件，使用方法如下：

下载 importword插件
在vue-cli项目的public目录新建tinymce文件夹，然后在tinymce文件下新建plugins文件夹，将下载好的importword插件放在plugins文件夹下
在vue组件中引入importword插件

plugins: ['importword'],
toolbar: 'importword',
external_plugins: {'importword': '/tinymce/plugins/importword/plugin.min.js'
}

ok，这样插入word的按钮就出现了~~~ DEMO体验地址

数学公式 kityformula-editor

kityformula-editor也属于扩展插件，和上面用法差不多：

下载 kityformula-editor插件
在vue-cli项目的public目录新建tinymce文件夹，然后在tinymce文件下新建plugins文件夹，将下载好的kityformula-editor插件放在plugins文件夹
在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就可以了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0My4Po0R-1666570508770)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2555bef6df14084ac1930619cd6c24d~tplv-k3u1fbpfcp-watermark.image)]

再次打开数学公式，页面就可以正常显示啦~~~ DEMO体验地址

其实插入数学公式还可以使用wiris的MathType，不仅可以插入数学公式，还是可以插入化学公式。相比于MathType，百度的kityformula-editor体验感更好，但MathType的功能更加强大。这两种方式我都在放在Github中了，欢迎随时下载使用。

Github Demo地址：https://github.com/frontend-afei/tinymce-wiris-demo

分享到此结束，欢迎在评论区留言讨论。听说点赞的同学非富即贵，非帅哥即美女呦~