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

<