项目中的富文本编辑器该如何选择?

项目中经常需要用到富文本编辑器的时候，而常见的富文本编辑器都有哪些？该如何选择？

先看看市面上都有哪些可用的富文本编辑器：

• TinyMCE（插件式的，支持 Vue，React，Angular 框架）
• wangEditor（Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费，支持 JS 直接引入使用，或者 Vue2/3，React）
• UEditor（开源，插件多，功能齐全，支持 JS 直接引入使用）
• CKEditor（模块化的简洁强大，丰富的框架支持，支持 Vue，React，Angular ，Jquery，Electron 框架）
• Quill-editor（轻量、简洁，支持 JS 直接引入使用，Vue，Angular，React）

由于项目中有一条必不可少的需求是可直接复制 Excel 中内容和格式到编辑器中，分别研究了以上等编辑器，只有TinyMCE支持的比较好，因为它是插件式的，powerpaste 很少地做到了这一点。

然而问题又来了，我们开发喜欢使用开源免费的，这个插件是收费的功能。也就是说 TinyMCE 是半开源的，基础功能是免费的，而涉及到复杂功能则需要收费。

正常的收费肯定就有破解的，或者网友共享出来的。通过搜索我们找到了一个低版本的 powerpaste 的插件 4.8.2，以下就来介绍下使用过程。

安装依赖包

在 Vue 项目中使用，需要安装以下包文件

1"dependencies": {
2    "@tinymce/tinymce-vue": "3.2.8",
3    "tinymce": "4.8.2",
4  }

封装组件

然后我们封装一个组件，在组件中引入该富文本组件，向外暴露参数可灵活使用。

模板代码，只提供初始化 init 参数

1<template>
2  <div class="tinymce-box">
3    <editor
4      v-model="myValue"
5      ref="edit"
6      :init="init"
7    >
8    </editor>
9  </div>
10</template>

然后引入 tinymce 和 tinymce-vue 两个包文件，和主题文件

1<script>
2  import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
3  import Editor from '@tinymce/tinymce-vue'
4  import 'tinymce/themes/modern'
5</script>

配置参数

在 data 里针对 init 配置参数进行设置

1export default {
2    components: { Editor },
3    data() {
4      return {
5        myValue: '',
6        init: {
7          menubar: false,
8          height: 400,
9          skin_url: '/tinymce/skins/lightgray',
10          plugins: 'code colorpicker image link lists preview table',
11          external_plugins: {
12            'powerpaste': '/tinymce/plugins/powerpaste/plugin.js'
13          }
14        }
15      }
16    },
17    mounted() {
18      tinymce.init({})
19    }
20}

menubar 是控制菜单栏显示的，主要的功能是通过 plugins 属性配置的，里面是字符串通过空格隔开。这里的 external_plugins 属性是拓展插件需要的，不仅支持官方的插件，还支持自己独立开发的功能。

引入拓展插件

由于通过 npm 安装是没有 powerpaste 插件的，我们可以下载了放在 public 目录下，通过 external_plugins 来配置使用。

最后

验证效果，我们从左侧这样的一个 Excel 文件中把表格复制出来，黏贴到富文本编辑器中

会弹出提示，需不需要附带格式一起，于是我们选择保持格式。

整个代码如下：

1<template>
2  <div class="tinymce-box">
3    <editor v-model="myValue"
4      ref="edit"
5      :init="init"
6    >
7    </editor>
8  </div>
9</template>
10
11<script>
12  import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
13  import Editor from '@tinymce/tinymce-vue'
14  import 'tinymce/themes/modern'
15
16  // 更多插件参考：https://www.tiny.cloud/docs/plugins/
17  import 'tinymce/plugins/image'// 插入上传图片插件
18  import 'tinymce/plugins/media'// 插入视频插件
19  import 'tinymce/plugins/table'// 插入表格插件
20  import "tinymce/plugins/link";
21  import "tinymce/plugins/code";
22  import 'tinymce/plugins/lists'// 列表插件
23  import 'tinymce/plugins/wordcount'// 字数统计插件
24  import "tinymce/plugins/colorpicker";
25  import "tinymce/plugins/textcolor";
26  import "tinymce/plugins/contextmenu";
27  import "tinymce/plugins/preview"
28  import "tinymce/plugins/hr"
29
30  export default {
31    components: { Editor },
32    data() {
33      return {
34        myValue: '',
35        init: {
36          menubar: false,
37          height: 400,
38          skin_url: '/tinymce/skins/lightgray',
39          toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
40          plugins: 'code colorpicker image link lists preview table',
41          external_plugins: {
42            'powerpaste': '/tinymce/plugins/powerpaste/plugin.js'
43          }
44        }
45      }
46    },
47    mounted() { // 这个是必要的，初始化的时候需要给init 一个空对象，不然报错
48      tinymce.init({})
49    }
50  }
51</script>