Vue內引入tinymce富文本編輯器步驟詳解

這次帶給大家Vue內引入tinymce富文本編輯器步驟詳解，Vue內引入tinymce富文本編輯器的注意事項有哪些，以下就是實戰案例，一起來看一下。

專案中原本使用的富文本編輯器是wangEditor，這是一個很輕量、簡潔編輯器

但是公司的業務升級，想要一個功能更全面的編輯器，我找了好久，目前常見的編輯器有這些：

UEditor：百度前端的開源項目，功能強大，基於jQuery，但已經沒有再維護，而且限定了後端程式碼，修改起來比較費力

bootstrap-wysiwyg：微型，易用，小而美，只是Bootstrap jQuery...

kindEditor：功能強大，程式碼簡潔，需要配置後台，而且好久沒看到更新了

wangEditor：輕量、簡潔、易用，但升級到3.x 之後，不便於客製化開發。不過作者很勤奮，廣義和我是一家人，打個call

quill：本身功能不多，不過可以自行擴展，api 也很好懂，如果能看懂英文的話...

summernote：沒深入研究，UI挺漂亮，也是一款小而美的編輯器，可是我需要大的

在有這麼參考的情況下，我最終還是選擇了tinymce 這個不搭梯子連官網都打不開的編輯器（簡直是自討苦吃），主要因為兩點：

1. GitHub 上星星很多，功能也齊全；

2 . 唯一一個從word 貼上過來還能保持絕大部分格式的編輯器；

3. 不需要找後端人員掃碼改接口，前後端分離；

4. 說好的兩點呢！

一、資源下載

tinymce 官方為vue 專案提供了一個元件tinymce-vue

npm install @tinymce/tinymce-vue -S

在vscode、 webstorm 的終端運行這段程式碼可能會報錯，最好使用作業系統自帶的命令列工具

如果有購買tinymce 的服務，可以參考tinymce-vue 的說明，透過api-​​key 直接使用tinymce

像我這樣沒買的，還是要老老實實下載tinymce

npm install tinymce -S

安裝之後，在node_modules 中找到tinymce/skins 目錄，然後將skins目錄拷貝到static 目錄下

// 如果是使用vue-cli 3.x 建構的typescript 項目，就放到public 目錄下，文中所有static 目錄相關都這樣處理

tinymce預設是英文介面，所以還需要下載一個中文語言包（記得搭梯子！搭梯子！搭梯子！）

#然後將這個語言包放到static 目錄下，為了結構清晰，我包了一層tinymce 目錄

二、初始化

在頁面中引入以下檔案

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

tinymce-vue 是一個元件，需要在components 中註冊，然後直接使用

這裡的init 是tinymce 初始化配置項，後面會講到一些關鍵的api ，完整api 可以參考官方文件

編輯器需要一個skin 才能正常工作，所以要設定一個skin_url 指向先前複製出來的skin 檔案

init: {
 language_url: '/static/tinymce/zh_CN.js',
 language: 'zh_CN',
 skin_url: '/static/tinymce/skins/lightgray',
 height: 300
}

// vue-cli 3.x 創建的typescript 項目，將url 中的static 去掉，即skin_url: '/tinymce/skins/lightgray'

同時在mounted 中也需要初始化一次：

#如果在這裡傳入上面的init 對象，並不能生效，但什麼參數都不傳也會報錯，所以這裡傳入一個空對象

三、擴充插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件

同时还需要在页面引入这些插件：

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

贴一下完整的组件代码：

<template>
 <p>
  </p>
<h1 id="tinymce">tinymce</h1>
  <editor></editor>
  <p></p>
 
</template>
<script>
import tinymce from &#39;tinymce/tinymce&#39;
import &#39;tinymce/themes/modern/theme&#39;
import Editor from &#39;@tinymce/tinymce-vue&#39;
import &#39;tinymce/plugins/image&#39;
import &#39;tinymce/plugins/link&#39;
import &#39;tinymce/plugins/code&#39;
import &#39;tinymce/plugins/table&#39;
import &#39;tinymce/plugins/lists&#39;
import &#39;tinymce/plugins/contextmenu&#39;
import &#39;tinymce/plugins/wordcount&#39;
import &#39;tinymce/plugins/colorpicker&#39;
import &#39;tinymce/plugins/textcolor&#39;
export default {
 name: &#39;tinymce&#39;,
 data () {
  return {
   tinymceHtml: &#39;请输入内容&#39;,
   init: {
    language_url: &#39;/static/tinymce/zh_CN.js&#39;,
    language: &#39;zh_CN&#39;,
    skin_url: &#39;/static/tinymce/skins/lightgray&#39;,
    height: 300,
    plugins: &#39;link lists image code table colorpicker textcolor wordcount contextmenu&#39;,
    toolbar:
     &#39;bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat&#39;,
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

四、上传图片

tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但为了在不麻烦后端的前提下适配自家的项目，还是得用 images_upload_handler 来自定义一个上传方法

这个方法会提供三个参数：blobInfo, success, failure

其中 blobinfo 是一个对象，包含上传文件的信息：

success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue mint-ui tabbar组件使用步骤详解

vue地区选择组件使用步骤详解

以上是Vue內引入tinymce富文本編輯器步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！