2020-09-28 记一次vue项目中使用tinymce富文本

首先是一个作家码字的界面. 结合需求后选择了tinymce. 中文文档地址

微信截图_20200928155452.png
以上为最终效果. . 输入章节名那里是一个input输入框. 输入正文的地方就是tinymce组件.
为了限制作家的一些不可控骚操作, 影藏了编辑等功能. 只保留了右下角的字数统计.

// 部分代码
<template>
  <div class="chapterTitle">
     <el-input class="titleInput" auto-complete="off" placeholder="请输入章节号与章节名。示例：“第一章 南蛮入侵”" v-model="chapterTitle"></el-input>
  </div>
  <div class="doc">
     <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" :disabled="tinymceDisabled"></Editor>
  </div>
</template>

<script>
import tinymce from 'tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/paste'

export default {
  components: {
    Editor
  },
  data () {
    return {
      chapterTitle: '', // 文章标题
      tinymceHtml: '', // 文章内容
      editorInit: { // 初始化设置
        selector: '#tinymce',
        skin_url: '/tinymce/skins/ui/oxide', // 皮肤/主题
        language_url: '/tinymce/zh_CN.js', // 语言
        language: 'zh_CN',
        toolbar: '', // 工具栏
        plugins: ['wordcount', 'paste'], // 插件, 用到字数统计和过滤标签
        menubar: false,
        browser_spellcheck: true, // 拼写检查?
        height: '100%',
        elementpath: false,
        paste_data_images: false,
        paste_enable_default_filters: true,
        paste_webkit_styles: 'true',
        branding: false,
        resize: false
        // statusbar: false
      },
      tinymceDisabled: false, // 是否禁用编辑器
    }
  },
  mounted () {
    tinymce.init({}) // 初始化之类云云 ~ 否则会出现什么什么问题 (别人说的)
  }
}
</script>

获取文章的字数的话就是 tinymce.activeEditor.plugins.wordcount.getCount()

---

隐藏掉那些工具栏之后, 如果复制粘贴进来的文字带格式就不能一键处理了, 如果复制进来还有图片的话也会显示出来。
它的字数统计规则是：除了货币符号(￥和$)之外，其它符号都不算字数。连续的字母算1个字，连续的数字算1个字，也不计算标点符号。