Vue中tinymce富文本功能配置詳解

更新時間：2023年11月23日 08:45:12 作者：以前叫王紹潔

TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器,跟其他富文本編輯器相比,有著豐富的插件,支持多種語言,能夠滿足日常的業(yè)務需求并且免費,本文小編給大家詳細介紹了Vue中tinymce富文本功能配置,需要的朋友可以參考下

初始化

const editorInstance = tinymce.init({
  // 編輯器的配置項...
  auto_focus : true,
  statusbar: true, // 隱藏底部文字統(tǒng)計欄
  language_url: '/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/tinymce/skins/lightgray',
  height: '100%',
  fontsize_formats: '初號=44pt 小初=36pt 一號=26pt 小一=24pt 二號=22pt 小三=18pt 三號=16pt 小四=14pt 四號=12pt 五號=10.5pt 小五=9pt 六號=7.5pt 小六=6.5pt 七號=5.5pt 八號=5pt 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 36px 48px',
  readonly: this.readonly,
  plugins: 'print export preview searchreplace autolink directionality visualblocks visualchars fullscreen template code table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap indent2em autoresize axupimgs ',
  toolbar: 'undo redo restoredraft | fontselect fontsizeselect |\
         forecolor backcolor bold italic underline strikethrough anchor |lineheight  alignleft aligncenter alignright alignjustify outdent indent | \
          formatselect | bullist numlist | blockquote subscript superscript removeformat | code | \
          table charmap hr insertdatetime print preview | fullscreen | bdmap indent2em | axupimgs |\
          paperSizeButton | paperEnlargeButton paperZoomOutButton | annotate-alpha annotate-alpha-remove | annexButton',
  font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif'; // 字體設置
  lineheight_formats: '1 1.2 1.4 1.5 1.6 2 2.5 3.0', // 行高
  
   setup: (editor) => {}) // 下面所有的初始化，自定義按鈕等都在這個方法里
 });

Plugins是插件有官方的，也有社區(qū)貢獻的，按需引入使用并且在plugins配置項里注冊即可
toolbar是工具欄，有編輯器內置的，也可以自定義

import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/print'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/bbcode'
import 'tinymce/plugins/fullpage'

初始化完成

this.myEditor = editor
editor.on('init', () => {
  this.$emit('onReady', editor)
});

編輯器初始化完成后需要做的事

自定義按鈕

editor.ui.registry.addButton('annotate-alpha-remove', {
  text: '', // 按鈕的文字
  icon: 'comment', // 按鈕圖標
  tooltip: '刪除批注', 
  onAction: function() {
    
  },
  onSetup: function (btnApi) {
    
  }
});

按鈕文本跟按鈕圖標只能顯示一個
按鈕icon（所有Icons Available for TinyMCE | Docs | TinyMCE），文章內說了怎么自己添加icon，也可以直接引入png路徑
onAction用于處理編輯器中的操作事件，例如按鈕點擊、鍵盤快捷鍵等。
onSetup用于在編輯器初始化時進行配置，例如設置初始狀態(tài)、添加自定義按鈕等。

自定義選擇按鈕

editor.ui.registry.addMenuButton('paperSizeButton', {
  text: '紙張大小',
  fetch: (callback) => {
    const items = [
      { type: 'menuitem', text: 'A4 (210*297)mm', onAction: () => {
        this.setPageSize('A4')
       }
      },
      { type: 'menuitem', text: 'A3 (297*420)mm', onAction: () => { 
        this.setPageSize('A3')
        editor.execCommand('mceFullScreen'); // 全屏
      } },
      { type: 'menuitem', text: 'A5 (148*210)mm', onAction: () => { this.setPageSize('A5') } },
      // 添加更多的選項...
    ];
    callback(items);
  }
});

批注

注冊自定義按鈕后需要把按鈕名稱添加到toolbar里

批注初始化

批注需要用到屬性，如批注內容，批注人等，最后都是會插入到dom中

editor.on('init', function () {
  editor.annotator.register('alpha', {
    persistent: true,
    decorate: function (uid, data) {
      return {
        attributes: {
          'data-mce-comment': data.comment ? data.comment : '',
          'data-mce-author': data.author ? data.author : 'anonymous'
        }
      };
    }
  });
});

添加批注

editor.ui.registry.addButton('annotate-alpha', {
  text: 'Annotate',
  onAction: function() {
    var comment = prompt('Comment with?');
    editor.annotator.annotate('alpha', {
      uid: Date.now(),
      comment: comment
    });

    editor.focus();
  },
  onSetup: function (btnApi) {
    editor.annotator.annotationChanged('alpha', function (state, name, obj) {
      console.log('Current selection has an annotation: ', state);
      btnApi.setDisabled(state);
    });
  }
});

刪除批注

editor.ui.registry.addButton('annotate-alpha-remove', {
  text: 'Annotate-remove',
  onAction: function() {
    editor.annotator.remove('alpha')

    editor.focus();
  }
});

點擊批注內容：比如你需要點擊后在哪里顯示批注信息

editor.on('click', function(e) {
    // 檢查點擊的元素是否是批注
    if (e.target.classList.contains('mce-annotation')) {
      // 獲取批注的唯一標識符
      const annotationId = e.target.getAttribute('data-mce-annotation-uid');
      const annotationComment = e.target.getAttribute('data-mce-comment');

      // 在這里根據(jù)批注的唯一標識符執(zhí)行相應的操作
      console.log('點擊了批注，批注ID為：', annotationId);
      console.log('點擊了批注，批注內容為：', annotationComment);
      
    }
});

與編輯器通信

比如我的刪除批注的按鈕不在編輯器工具欄，不是自定義按鈕，而在我的頁面中，直接使用tinymce實例事無法操作的，這是因為editor對象只在TinyMCE編輯器的上下文中可用，而在編輯器以外的頁面上無法直接訪問。因此，無法直接調用editor.annotator.remove('alpha')和editor.focus()方法來刪除批注。

所以如果想在編輯器以外的頁面上刪除批注，需要通過與編輯器進行通信的方式來實現(xiàn)。使用自定義事件或消息傳遞機制。

// 注冊自定義事件，用于刪除批注
editor.on('removeAnnotation', function() {
  editor.annotator.remove('alpha');
  editor.focus();
});

在編輯器以外的頁面中：

// 觸發(fā)自定義事件，刪除批注
const editor = this.$refs.myEditor.editor;
editor.fire('removeAnnotation')

參考資料：

TinyMCE中文文檔中文手冊 (ax-z.cn)
Documentation | Docs | TinyMCE

以上就是Vue中tinymce富文本功能配置詳解的詳細內容，更多關于Vue tinymce富文本功能的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue3.0中使用Element-Plus中Select下的filter-method屬性代碼示例
這篇文章主要給大家介紹了關于vue3.0中使用Element-Plus中Select下的filter-method屬性的相關資料,Filter-method用法是指從一組數(shù)據(jù)中選擇滿足條件的項,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下
2023-12-12
Vue使用鼠標在Canvas上繪制矩形
這篇文章主要介紹了Vue使用鼠標在Canvas上繪制矩形，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Vue中請求本地JSON文件并返回數(shù)據(jù)的方法實例
在前端開發(fā)過程當中,當后臺服務器開發(fā)數(shù)據(jù)還沒完善,沒法與咱們交接時,咱們習慣在本地寫上一個json文件做模擬數(shù)據(jù)測試代碼效果是否有問題,下面這篇文章主要給大家介紹了關于Vue中請求本地JSON文件并返回數(shù)據(jù)的相關資料,需要的朋友可以參考下
2022-08-08
vue跨窗口通信之新窗口調用父窗口方法實例
由于開發(fā)需要,我需要在登錄成功請求成功后,調用父窗口的一個點擊事件方法,這篇文章主要給大家介紹了關于vue跨窗口通信之新窗口調用父窗口的相關資料,需要的朋友可以參考下
2023-01-01
解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
詳解key在Vue3和Vue2的不同之處
key屬性是一個特殊的屬性，用于標識每個節(jié)點的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會討論Vue2中的key和Vue3中的key的區(qū)別
2023-04-04
詳解Vue 換膚方案驗證
這篇文章主要介紹了Vue 換膚方案驗證，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
vue-admin-template解決登錄和跨域問題解決
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
在Vue3項目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學習如何在 Vue 3 項目中集成 CodeMirror,以創(chuàng)建一個支持 SQL 語法高亮和自動補全的代碼編輯器,需要的朋友可以參考下
2025-04-04