乐趣区

关于前端:如何在富文本中插入表情word文档及数学公式

jiezi

前言

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