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

1、tinymce 官方为 vue 项目提供了一个组件 tinymce-vue

2、npm安装vue组件，同时安装源插件

npm i @tinymce/tinymce-vue -S、npm i tinymce -S

3、安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下，如果是使用 vue-cli 3.x 构建的项目，就放到 public 目录下

4、tinymce 默认是英文界面，所以如果需要汉化还需要下载一个中文语言包，然后将它放到 static 目录下

5、在页面中引入以下文件：

import tinymce from ‘tinymce/tinymce’
import Editor from ‘@tinymce/tinymce-vue’
import ‘tinymce/themes/silver/theme’

6、tinymce-vue 是一个组件，需要在 components 中注册后直接使用

7、在data中声明init变量，语言包、skin的路径就引用之前的存放路径，注意skin必须引用，否则不显示。

init: {
  language_url: ‘/static/tinymce/langs/zh_CN.js’,
  language: ‘zh_CN’,
  skin_url: ‘/static/tinymce/skins/ui/oxide’, // skin路径
  height: 300, // 编辑器高度
  branding: false, // 是否禁用“Powered by TinyMCE”
  menubar: true, // 顶部菜单栏显示
  plugins: ‘link lists image code table colorpicker 
  textcolor wordcount contextmenu’,
  toolbar: ‘bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft 
  aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat’
}

8、在 mounted 中初始化：

tinymce.init({})

9、加载插件，需要什么插件就导入什么插件，同时在init对象里面的plugins添加即可

import ‘tinymce/plugins/image’
import ‘tinymce/plugins/link’
import ‘tinymce/plugins/code’
import ‘tinymce/plugins/table’
import ‘tinymce/plugins/lists’
import ‘tinymce/plugins/contextmenu’
import ‘tinymce/plugins/wordcount’
import ‘tinymce/plugins/colorpicker’
import ‘tinymce/plugins/textcolor’

本文章由javascript技术分享原创和收集