Vue 项目中引入 tinymce 富文本编辑器

官网文档链接： tinymce

中文文档链接：TinyMCE中文文档中文手册

这里采用vue2的版本

1.安装

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

2.准备工作

• 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public 目录下(可以新建一个文件夹名为tinymce)
• 上官网下载中文包，选择zh-CN(这里新版下下来的是zh-Hans.js)，同样放进上面创建好的tinymce文件夹中

3.使用

这里我单独封装成了一个组件，创建个名为TinyEditor.vue的组件

• 引入以下文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'

• 注册组件

export default {
  name: 'TinyEditor',
  components: {
    Editor
  },
...

• 页面使用

<template>
  <editor  id="tinymce" v-model="content" :init="init" />
</template>

• init配置项

data() {
    return {
      init: {
        language_url: '/tinymce/zh-Hans.js', // 语言包位置，因为放在public下所以可以省略public
        selector: '#tinymce', // tinymce的id
        language: 'zh-Hans', // 语言类型
        skin_url: '/tinymce/skins/ui/oxide',
        height: 700, // 编辑器高度
        browser_spellcheck: true, // 拼写检查
        // elementpath: false, //禁用编辑器底部的状态栏
        // statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        // menubar: false, //最顶部文字信息
        branding: false, // 是否禁用“Powered by TinyMCE”,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;'
      }
    }
  },

• 初始化

mounted() {
    tinymce.init({})
  }

4.打开页面

刷新一看，报错😒
tinymce Unexpected token ‘<’ (at icon.js:1:1)
tinymce Unexpected token ‘<’ (at model.js:1:1)

• 解决
  再引入以下文件

import 'tinymce/icons/default/icons'
import 'tinymce/models/dom/model'

5.插件扩展

按自己需求引入以下文件

import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'

然后在init的配置中加入和配置就可以了

init: {
        ...
        plugins: 'image link code table lists wordcount', 
        toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏
        ...

ps: 后面换了tinymce5.x的版本，因为6.0很多插件都变成付费了

以下是使用5.x完整的代码

<template>
  <editor v-if="postForm" id="tinymce" v-model="postForm.content" :init="init" />
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/content/default/content.css'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image' // 插入图片
import 'tinymce/plugins/imagetools' // 图片编辑
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/code' // 打开代码对话框，会显示元素标签
import 'tinymce/plugins/table' // 表格
import 'tinymce/plugins/lists' // 添加编号和项目符号列表
import 'tinymce/plugins/advlist' // 高级列表（例如字母编号列表、方形项目符号）
import 'tinymce/plugins/wordcount' // 字数统计
import 'tinymce/plugins/media' // 插入视频链接
import 'tinymce/plugins/emoticons/js/emojis' // emoji
// import 'tinymce/plugins/toc' // 目录插件，点击后会在光标位置生成目录
import 'tinymce/plugins/help' // 帮助
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/codesample' // 代码块
import 'tinymce/plugins/paste' // 粘贴(带样式)
import 'tinymce/plugins/fullscreen' // 全屏
// import 'tinymce/plugins/textpattern' // 类似于识别markdown语法
import 'tinymce/plugins/searchreplace' // 查找和替换
import 'tinymce/plugins/autolink' // 键入有效、完整的URL时，会自动创建超链接
import 'tinymce/plugins/directionality' // 方向性插件
import 'tinymce/plugins/visualblocks' // 展示视觉块
// import 'tinymce/plugins/visualchars' // 查看不可见字符
// import 'tinymce/plugins/template' // 自定义模板
import 'tinymce/plugins/template' // 自定义模板
// import 'tinymce/plugins/quickbars' // 快速工具条
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/insertdatetime' // 插入时间
import 'tinymce/plugins/print' // 打印
import 'tinymce/plugins/autosave' // 恢复到最新的自动保存的草稿
import 'tinymce/plugins/anchor' // 创建/编辑锚元素
export default {
  name: 'TinyEditor',
  components: {
    Editor
  },
  props: {
    postForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      init: {
        placeholder: '在这里输入文字',
        language_url: '/tinymce/zh-Hans.js', // 语言包位置，因为放在public下所以可以省略public
        selector: '#tinymce', // tinymce的id
        language: 'zh-Hans', // 语言类型
        skin_url: '/tinymce/skins/ui/oxide',
        height: 700, // 编辑器高度
        browser_spellcheck: true, // 拼写检查
        // elementpath: false, //禁用编辑器底部的状态栏
        // statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        // menubar: false, // 最顶部菜单栏
        plugins: 'nonbreaking visualblocks searchreplace insertdatetime print media advlist link autolink charmap autosave codesample directionality emoticons fullscreen help ' +
            'preview anchor image imagetools code table lists wordcount',
        branding: false, // 是否禁用“Powered by TinyMCE”
        toolbar: 'undo redo fontselect fontsizeselect formatselect lineheight forecolor backcolor codesample bold italic underline strikethrough indent outdent ' +
            'alignleft aligncenter alignright alignjustify subscript superscript blockquote image imagetools media table numlist bullist preview ' +
            'fullscreen removeformat restoredraft', // 工具栏
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        image_advtab: true,
        images_upload_handler: this.articleContentUploadImage,
        codesample_global_prismjs: true,
        codesample_languages: [
          { text: 'Bash', value: 'bash' },
          { text: 'C', value: 'c' },
          { text: 'C++', value: 'cpp' },
          { text: 'CSS', value: 'css' },
          { text: 'Dockerfile', value: 'dockerfile' },
          { text: 'Go', value: 'go' },
          { text: 'HTML', value: 'html' },
          { text: 'Java', value: 'java' },
          { text: 'JavaScript', value: 'javascript' },
          { text: 'JSON', value: 'json' },
          { text: 'Kotlin', value: 'kotlin' },
          { text: 'Markdown', value: 'markdown' },
          { text: 'Nginx', value: 'nginx' },
          { text: 'PHP', value: 'php' },
          { text: 'Python', value: 'python' },
          { text: 'Ruby', value: 'ruby' },
          { text: 'Rust', value: 'rust' },
          { text: 'SQL', value: 'sql' },
          { text: 'TypeScript', value: 'typescript' },
          { text: 'YAML', value: 'yaml' }
        ]
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    articleContentUploadImage(blobInfo, success, failure, progress) {
      console.log(blobInfo, success, failure, progress)
    }
  }
}
</script>

<style scoped>

</style>