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, // 隐藏编辑器底部