【Vue】整合tinymce富文本編輯器

?? 前言

富文本是一個(gè)比較常用的功能，但是又有很多的坑，在選擇的時(shí)候也看了很多的文章，最終決定選擇tinymce。為什么選擇這個(gè)呢，第一個(gè)就是UI我覺得很好看，第二個(gè)就是文檔比較完善，還有對應(yīng)的中文版本，各個(gè)API也較為友好，還有一個(gè)就是插件化，按需引入。常見的富文本以及分析也有大佬做過文章了，詳細(xì)的可以看花褲衩大佬的這篇文章常見富文本。

?? 相關(guān)文檔
?? 安裝tinymce

注：vue2中不能使用@tinymce/tinymce-vue為4以上的版本

npm install @tinymce/tinymce-vue@3.2.8 -S

npm install tinymce@5.10.3 -S

編譯器默認(rèn)是英文的，如果需要漢化，可以前往中文漢化包下載

image-20220313104605945

在項(xiàng)目的public文件夾下新建一個(gè)tinymce文件夾，用來存放主題和語言包，以及后面可能需要自定義的插件。將node_modules/tinymce/skins（主題）復(fù)制到public/tinymce中。另外在tinymce中新建一個(gè)langs目錄，用來存放下載好的漢化包。

image-20220313104912853
? 正式開始

這里為了方便其他地方引用，封裝了一個(gè)組件。

<template>
 <div>
   <tinymce-editor
     :id="tinymceId"
     :value="content"
     :init="init"
     :witdh="width"
     :height="height"
     :resize="resize"
     :disabled="disabled"
     @input="onInput"
   />
 </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import TinymceEditor from '@tinymce/tinymce-vue'
// 引入配置信息
import defaultConfig from './config'
import { isEmpty } from '@/utils/validate'

export default {
  name: 'Editor',
  components: { TinymceEditor },
  props: {
    id: {
    type: String,
    default: function() {
      // 這個(gè)id一定要寫，否則會(huì)出現(xiàn)莫名其妙的問題。
      return 'tinymce-' + Date.now() + Math.floor(Math.random() * 1000)
    }
  },
  // 內(nèi)容
  content: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 寬度
  width: {
    type: [String, Number],
    default: '100%'
  },
  // 高度
  height: {
    type: [String, Number],
    default: 450
  },
  // 是否允許拖動(dòng)
  resize: {
    type: [String, Boolean],
    default: true
  },
  // 菜單欄
  menubar: {
    type: String,
    default: ''
  },
  // 工具欄
  toolbar: {
    type: String,
    default: ''
  }
 },
 data() {
   return {
     tinymceId: this.id,
     init: Object.assign(defaultConfig, {
       // 組件值覆蓋默認(rèn)配置
       width: this.width,
       height: this.height,
       resize: this.resize,
       menubar: isEmpty(this.menubar) ? defaultConfig.menubar : this.menubar,
       toolbar: isEmpty(this.toolbar) ? defaultConfig.toolbar : this.toolbar
     })
   }
 },
 methods: {
   onInput(content) {
   this.$emit('update:content', content)
  }
 }
}
</script>

為了讓代碼更加的優(yōu)雅，以及方便管理配置和插件，這里將配置信息單獨(dú)做一個(gè)config.js來管理。

// 引入主題和圖標(biāo)信息
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/icons/default/icons'

// 引入插件
// https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/code' // 源代碼插件
import 'tinymce/plugins/pagebreak' // 分頁符插件
import 'tinymce/plugins/charmap' // 特殊符號插件
import 'tinymce/plugins/emoticons' // 表情插件
import 'tinymce/plugins/save' // 保存插件
import 'tinymce/plugins/preview' // 預(yù)覽插件
import 'tinymce/plugins/print' // 打印
import 'tinymce/plugins/image'// 上傳圖片插件
import 'tinymce/plugins/media'// 視頻插件
import 'tinymce/plugins/link' // 鏈接插件
import 'tinymce/plugins/anchor' // 錨點(diǎn)插件
import 'tinymce/plugins/codesample' // 代碼插件
import 'tinymce/plugins/table'// 表格插件
import 'tinymce/plugins/searchreplace' // 查找、替換插件
import 'tinymce/plugins/hr' // 水平分割線插件
import 'tinymce/plugins/insertdatetime' // 時(shí)間日期插件
import 'tinymce/plugins/paste' // 粘體插件
import 'tinymce/plugins/wordcount'// 字?jǐn)?shù)統(tǒng)計(jì)插件
import 'tinymce/plugins/fullscreen' // 全屏插件
import 'tinymce/plugins/help' // 幫助插件

import { upload } from '@/api/system/common'

// 配置信息
// https://www.tiny.cloud/docs/configure/integration-and-setup/
export default {

 /**
 * 語言路徑
 */
 language_url: '/tinymce/langs/zh_CN.js',

 /**
 * 語言
 */
 language: 'zh_CN',

 /**
 * 主題樣式路徑
 */
 skin_url: '/tinymce/skins/ui/oxide',

 /**
 * 文本樣式路徑
 */
 content_css: '/tinymce/skins/content/default/content.min.css',

 /**
 * 表情路徑
 */
 emoticons_database_url: '/tinymce/emojis/emojis.min.js',

 /**
 * 寬度
 */
 width: '100%',

 /**
 * 高度
 */
 height: 450,

 /**
 * 插件
 */
 plugins: 'lists code pagebreak charmap emoticons save preview print image media link paste ' +
 'anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime',

 /**
 * 菜單欄
 * file 文件
 * edit 編輯
 * view 視圖
 * insert 插入
 * format 格式
 * tools 工具
 * table 表格
 * help 幫助
 */
 menubar: 'file edit view insert format tools table help',

 /**
 * 工具欄
 * https://www.tiny.cloud/docs/demo/full-featured/
 * | formatselect fontselect fontsizeselect | 段落、字體、字號
 * | undo redo | 撤銷、重做
 * | code bold italic underline strikethrough | 源代碼、粗體、斜體、下劃線、刪除線
 * | alignleft aligncenter alignright alignjustify | 左對齊、中間對齊、右對齊、兩端對齊
 * | outdent indent numlist bullist insertdatetime | 減少縮進(jìn)、增加縮進(jìn)、編號列表、項(xiàng)目列表、時(shí)間日期
 * | table forecolor backcolor removeformat | 表格、文字顏色、背景色、清除格式
 * | hr searchreplace pagebreak charmap emoticons | 水平分割線、查找替換、分頁符、特殊符號、表情
 * | fullscreen preview save print | 全屏、預(yù)覽、保存、打印
 * | image media link anchor codesample | 上傳文件、上傳素材、插入鏈接、錨點(diǎn)、插入代碼
 */
 toolbar: '| formatselect fontselect fontsizeselect ' +
 '| undo redo ' +
 '| code bold italic underline strikethrough ' +
 '| alignleft aligncenter alignright alignjustify ' +
 '| outdent indent numlist bullist insertdatetime ' +
 '| table forecolor backcolor removeformat ' +
 '| hr searchreplace pagebreak charmap emoticons ' +
 '| fullscreen preview save print ' +
 '| image media link anchor codesample ',

 /**
 * 工具欄展開方式
 */
 toolbar_mode: 'sliding',

 /**
 * 是否允許拖動(dòng)
 * true（僅允許改變高度）, false（完全不讓你動(dòng)）, 'both'（寬高都能改變，注意引號）
 */
 resize: false,

 /**
 * 底部狀態(tài)欄
 */
 statusbar: true,

 /**
 * 是否顯示版權(quán)信息
 */
 branding: false,

 /**
 * 是否允許黏貼圖片
 */
 paste_data_images: true,

 /**
 * 時(shí)間日期格式化
 */
 insertdatetime_formats: ['%H點(diǎn)%M分', '%Y年%m月%d日', '%Y年%m月%d日 %H點(diǎn)%M分', '%Y-%m-%d %H:%M'],

 // 默認(rèn)使用base64格式
 images_upload_handler: function(blobInfo, success, failure) {
   const maxSize = 2
   const blob = blobInfo.blob()

   if (blob.size / 1024 / 1024 > maxSize) {
     failure('圖片大小不能超過' + maxSize + 'MB')
     return
   }

   const formData = new FormData()
   formData.append('file', blob, blobInfo.fileName)

   upload(formData).then(res => {
     success(res.data.fileUrl)
   }).catch(() => {
     failure('文件上傳失敗，請重試')
   })
 }
}

注意： 如果需要引入表情插件，則要把node_modules/tinymce/plugins/emoticons/js下的emojiimages.min.js放置在public下，否則無法使用。

image-20220313110137831
? 如何使用自定義的圖片上傳？

官方有提供一個(gè)上傳的url配置，但是需要后臺配合返回指定的數(shù)據(jù)格式。

image-20220313110649569

這里我們還是希望可以自定義參數(shù)，這樣才不對后臺產(chǎn)生影響，實(shí)現(xiàn)images_upload_handler函數(shù)即可，如果沒有實(shí)現(xiàn)的話，默認(rèn)是使用base64格式的圖片。

images_upload_handler: function(blobInfo, success, failure) {
 const maxSize = 2
 const blob = blobInfo.blob()

 // 判斷圖片大小
 if (blob.size / 1024 / 1024 > maxSize) {
   failure('圖片大小不能超過' + maxSize + 'MB')
   return
 }

 // 組裝圖片信息
 const formData = new FormData()
 formData.append('file', blob, blobInfo.fileName)

 // 調(diào)用上傳圖片接口
 upload(formData).then(res => {
   // 將返回的全路徑賦值給success回調(diào)函數(shù)即可
   success(res.data.fileUrl)
 }).catch(() => {
   failure('文件上傳失敗，請重試')
 })
}
?? 使用效果
image-20220313115952340
image-20220313120012102

以上就是整合tinymce的所有內(nèi)容了，如果有疑問或者建議，歡迎在評論區(qū)討論。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容