vue+tinymce5 富文本编辑器使用、踩坑

注：此教程适用于 tinymce 5.x 版本（如果是tinymce 4.x，则可能不会实现）安装与配置操作（1）安装npm install -s @tinymce/tinymce-vuenpm install -s tinymce（2）在node_modules找到tinymce将相关文件放到public中langs文件夹存放的是语言包，tinymce默认是英文具体实现实现如下，...

muxu85

17291人浏览 · 2020-08-06 14:22:30

muxu85 · 2020-08-06 14:22:30 发布

注：此教程适用于 tinymce 5.x 版本（如果是tinymce 4.x，则可能不会实现）

安装与配置操作

（1）安装

npm install -s @tinymce/tinymce-vue
npm install -s tinymce

（2）在node_modules找到tinymce

将相关文件放到public中

langs文件夹存放的是语言包，tinymce默认是英文

具体实现

实现如下，有问题，出现not Found

查看，发现出现了包的导入路径错误

注释掉语言包相关代码，依旧出现，说明不是语言包问题；

注释掉皮肤包依旧会报此错误；

仔细查看，是 icons.js 出现问题

依据教程，发现是 icons.js 包引入错误，尝试手动引入 icons.js ，成功实现。

（最基础的编辑器功能，若需要拓展，则需要进行配置，相关配置见下方）

具体代码：

html部分：

<div class="tinymce-class">
   <span style="display: block;">tinymce</span>
   <div class="tinymce">
       <editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
   </div>
</div>

js部分：

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'  // 引入主题包 themes.js
import 'tinymce/icons/default/icons.js'  // 引入图标包 icons.js
import Editor from '@tinymce/tinymce-vue'

export default {
    components: { Editor }, //注册组件
    data() {
      return {
        tinymceHtml: '测试tinymce',

//   初始化定义tinymce
        editorInit: {
          language_url: '/tinymce/langs/zh_CN.js', // 中英文包
          language: 'zh_CN',  // 语言设置为中文
          height: 300,
          skin_url: '/tinymce/skins/ui/oxide'  // 皮肤包
        }
      }
    },
    mounted() {
      tinymce.init({})
    }
 }

进行相关配置（添加官方功能插件）

插件需引入，按需配置；

在 import 中进行引入；

在 init 中进行定义；

如图，tinymce中相关定义如下

（一）工具栏配置

通过init中的toolbar来配置工具栏是否启用的项目和显示的顺序，使用 | 来分割各个项

editorInit: {
   language_url: '/tinymce/langs/zh_CN.js',
   language: 'zh_CN',
   height: 300,
   skin_url: '/tinymce/skins/ui/oxide',
   toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
   branding: false, //  是否禁用 “Power by Tinymce”
   menubar: false // 菜单栏显示(默认为true)
 }

效果：

菜单栏隐藏，添加了 Tx 清除格式

（二）其他配置项

配置工具项

所属插件为核心的项为基本包里自带的功能，直接写在toolbar里就可以；

属于插件的项需要引入插件( plugins: '插件名')然后在 toolbar中配置。

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons.js'
import Editor from '@tinymce/tinymce-vue'

//  添加配置
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/textcolor'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'

init中进行定义

editorInit: {
   language_url: '/tinymce/langs/zh_CN.js',
   language: 'zh_CN',
   height: 300,
   skin_url: '/tinymce/skins/ui/oxide',

   // 添加的配置的定义
   plugins: 'link code table lists contextmenu wordcount textcolor image media',
   toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
   branding: false, //  是否禁用 “Power by Tinymce”
   menubar: false // 菜单栏显示(默认为true)
  }

效果：

增加的相关配置

另一种配置写法：

通过props将组件中的配置项传入

export default {
    components: { Editor },

// 引入配置项，其他的如toolbar也可通过props引入
    props: {
      plugins: {
        type: [String, Array],
        default: 'lists image media table textcolor wordcount contextmenu'
      },
    },

    data() {
      return {
        tinymceHtml: '测试tinymce',
        editorInit: {
          language_url: '/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          height: 300,
          skin_url: '/tinymce/skins/ui/oxide',
          // plugins: 'link code table lists contextmenu wordcount textcolor image media',
          plugins: this.plugins,  // this.plugins直接获取props中传来的数据
          toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
          branding: false, //  是否禁用 “Power by Tinymce”
          menubar: false // 菜单栏显示(默认为true)
        }
      }
    },
    mounted() {
      tinymce.init({})
    }
  };

（三）图片上传使用base64格式

editorInit: {
          language_url: '/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          height: 300,
          skin_url: '/tinymce/skins/ui/oxide',
          // plugins: 'link code table lists contextmenu wordcount textcolor image media',
          plugins: this.plugins,
          toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
          branding: false, //  是否禁用 “Power by Tinymce”
          menubar: false, // 菜单栏显示(默认为true)
          images_upload_handler: (blobInfo, success, failure) => {
            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            success(img)
          }
        }

图片成功上传：

补充1：

（1）由于引入的插件太多，多余的隐藏掉了，样式如下

将其全部展示出来：

使用数组，分成两项

效果：

（3）报错

查看官网，

进行修改，如下：

成功，没有报错信息

（4）发现有一部分依旧是中文

查看官方（中文文档）内容

对比相关代码，没有问题；

查看汉化文件zh_CN.js

发现没有对应的中文；

下载最新的汉化包，还是不行（判断：汉化包内容不全，没有对应的中文），自行添加；

直接在汉化包中添加相应中英文以及Unicode编码

// 补充
"Alternative source URL": "\u66ff\u4ee3\u8d44\u6e90\u5730\u5740",
"Alternative description": "\u66ff\u4ee3\u8bf4\u660e\u6587\u5b57"

注：

汉化包中文是Unicode格式，转换过来即是所得汉字

（Unicode在线转换 https://www.bejson.com/convert/unicode_chinese/）

也可直接写成中文，具体可使用莫若卿大神的汉化包（详见tinymce中文文档 http://tinymce.ax-z.cn/general/localize-your-language.php ）

最后，在tiny的git上，发现已经有同行提出了官方汉化包的内容缺失问题。。。

补充2：

使用时出现bug如下：

选择缩进后，每行都会缩进，不是首行缩进

分析：

官方版本并没有首行缩进功能；

若想实现首行缩进，必须升级到版本5，并使用莫若卿大神的首行缩进插件（详见tinymce中文文档 http://tinymce.ax-z.cn/more-plugins/indent2em.php）

（1）添加“首行缩进”插件

按照教程，成功实现：

详细过程如下：

（1）下载插件

插件： indent2em.zip

（2）将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。

放到node_modules/tinymce/plugins中；

同时放到/static/tinymce/plugins中

注意：

下载下来的插件缺少内容，需手动添加

下载的插件只包含这两个文件：

运行时会报错，找不到此插件

与官方插件进行对比，发现缺少index.js文件，即动态引入该插件，将此文件复制粘贴到indent2em文件夹中

（官方插件中，每个插件都会有index.js文件，且每个文件中内容一样，都为require动态引入插件）

（3）导入使用

在plugis 和 toolbar中添加indent2em，如下：

运行，成功实现。

（2）出现警告信息

plugin.js:16 Text color plugin is now built in to the core editor, please remove it from your editor configuration
plugin.js:16 Context menu plugin is now built in to the core editor, please remove it from your editor configuration
plugin.js:16 Color picker plugin is now built in to the core editor, please remove it from your editor configuration

如下：

出现相关警告信息

分析发现，text color、context menu、color picker 插件现在内置到核心编辑器中，请将其从编辑器配置中删除

将3个插件从plugins中删除，如下

没有任何问题，且控制台无警告信息

本文参考内容

https://www.jianshu.com/p/b5eb986c16ed（安装基本配置）

https://blog.csdn.net/liub37/article/details/83310879?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase（基本初始化详细解释，部分配置化写法与网上的不同）

https://blog.csdn.net/zjiang1994/article/details/79880806?utm_source=blogxgwz5 （配置详细解释）

http://tinymce.ax-z.cn/general/localize-your-language.php（t inymce中文文档）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^