項目中經常需要用到富文本編輯器的時候，而常見的富文本編輯器都有哪些？該如何選擇？

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

• 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 項目中使用，需要安裝以下包文件

"dependencies": {"@tinymce/tinymce-vue": "3.2.8","tinymce": "4.8.2",}

封裝組件

然后我們封裝一個組件，在組件中引入該富文本組件，向外暴露參數可靈活使用。

模板代碼，只提供初始化 init 參數

<template><div class="tinymce-box"><editorv-model="myValue"ref="edit":init="init"></editor></div> </template>

然后引入 tinymce 和 tinymce-vue 兩個包文件，和主題文件

<script>import tinymce from 'tinymce/tinymce' //tinymce默認hidden，不引入不顯示import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/modern' </script>

配置參數

在 data 里針對 init 配置參數進行設置

export default {components: { Editor },data() {return {myValue: '',init: {menubar: false,height: 400,skin_url: '/tinymce/skins/lightgray',plugins: 'code colorpicker image link lists preview table',external_plugins: {'powerpaste': '/tinymce/plugins/powerpaste/plugin.js'}}}},mounted() {tinymce.init({})} }

menubar 是控制菜單欄顯示的，主要的功能是通過 plugins 屬性配置的，里面是字符串通過空格隔開。這里的 external_plugins 屬性是拓展插件需要的，不僅支持官方的插件，還支持自己獨立開發的功能。

引入拓展插件

由于通過 npm 安裝是沒有 powerpaste 插件的，我們可以下載了放在 public 目錄下，通過 external_plugins 來配置使用。

最后

驗證效果，我們從左側這樣的一個 Excel 文件中把表格復制出來，黏貼到富文本編輯器中

會彈出提示，需不需要附帶格式一起，于是我們選擇保持格式。

整個代碼如下：

<template><div class="tinymce-box"><editor v-model="myValue"ref="edit":init="init"></editor></div> </template><script>import tinymce from 'tinymce/tinymce' //tinymce默認hidden，不引入不顯示import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/modern'// 更多插件參考：https://www.tiny.cloud/docs/plugins/import 'tinymce/plugins/image'// 插入上傳圖片插件import 'tinymce/plugins/media'// 插入視頻插件import 'tinymce/plugins/table'// 插入表格插件import "tinymce/plugins/link";import "tinymce/plugins/code";import 'tinymce/plugins/lists'// 列表插件import 'tinymce/plugins/wordcount'// 字數統計插件import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";import "tinymce/plugins/contextmenu";import "tinymce/plugins/preview"import "tinymce/plugins/hr"export default {components: { Editor },data() {return {myValue: '',init: {menubar: false,height: 400,skin_url: '/tinymce/skins/lightgray',toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',plugins: 'code colorpicker image link lists preview table',external_plugins: {'powerpaste': '/tinymce/plugins/powerpaste/plugin.js'}}}},mounted() { // 這個是必要的，初始化的時候需要給init 一個空對象，不然報錯tinymce.init({})}} </script>

總結

以上是生活随笔為你收集整理的项目中的富文本编辑器该如何选择?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。