前言

校外培训迎来下岗潮，教育行业的小伙伴，大家过的还好吗？不过话说回来，技术过硬，你在哪里都是最靓的仔。明天就给大家补充一点弹药，如何在富文本中插入表情，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 前面会用到。

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">    <editor api-key="x1vyup3vl25v8l18tt7a9xxxxxi78ldg0x8crp5j8m63v9r5" :init="init" />  </div></template><script>import Editor from '@tinymce/tinymce-vue'export default {  name: 'app',  components: {    editor: Editor  },  data() {    return {      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'      }    }  }}</script>

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

插件应用

tinymce可扩大的中央有很多，比方语言、主题、皮肤、插件和图标等。上面次要介绍一下几款插件的应用办法。

表情插件 emoticons

emoticons属于内置插件，应用起来非常简单，只用在plugins和toolbar配置中增加emoticons就能够了。

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

插入word文档 importword

importword属于扩大插件，应用办法如下：

  1. 下载importword插件 https://github.com/Five-great...
  2. 在vue-cli我的项目的public目录新建tinymce文件夹，而后在tinymce文件下新建plugins文件夹，将下载好的importword插件放入tinymce文件夹
  3. 在vue组件中引入importword插件
plugins: ['importword'],toolbar: 'importword',external_plugins: {  'importword': '/tinymce/plugins/importword/plugin.min.js'}

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

数学公式 kityformula-editor

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

  1. 下载kityformula-editor插件 http://tinymce.ax-z.cn/more-p...
  2. 将下载好的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外面的baseURL批改老本地就能够了。

再次关上数学公式，页面就能够失常显示啦~~~ DEMO体验地址

其实插入数学公式还能够应用wiris的MathType，不仅能够插入数学公式，还是能够插入化学公式，当然国外的插件，体验感天然没有百度的kityformula-editor体验感好，有趣味的小伙伴能够钻研一下https://github.com/wiris/html...

分享到此结束，据说点赞的同学非富即贵，非帅哥即美女呦~

有问题欢送在评论区留言~

参考文档

  • tinyMCE中文文档
  • tinyMCE官网文档