欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年11月23日 08:45:12   作者：以前叫王紹潔  
TinyMCE是一款易用、且功能強(qiáng)大的所見即所得的富文本編輯器,跟其他富文本編輯器相比,有著豐富的插件,支持多種語(yǔ)言,能夠滿足日常的業(yè)務(wù)需求并且免費(fèi),本文小編給大家詳細(xì)介紹了Vue中tinymce富文本功能配置,需要的朋友可以參考下

版本說(shuō)明：

  • "tinymce": "5.6.0"
  • "@tinymce/tinymce-vue": "3.2.8"

Tips: 跟前端框架無(wú)關(guān)，以下功能是基于tinymce5的最新高版本，當(dāng)前最新為6，擁有更多功能

初始化

const editorInstance = tinymce.init({
  // 編輯器的配置項(xiàng)...
  auto_focus : true,
  statusbar: true, // 隱藏底部文字統(tǒng)計(jì)欄
  language_url: '/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/tinymce/skins/lightgray',
  height: '100%',
  fontsize_formats: '初號(hào)=44pt 小初=36pt 一號(hào)=26pt 小一=24pt 二號(hào)=22pt 小三=18pt 三號(hào)=16pt 小四=14pt 四號(hào)=12pt 五號(hào)=10.5pt 小五=9pt 六號(hào)=7.5pt 小六=6.5pt 七號(hào)=5.5pt 八號(hào)=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'; // 字體設(shè)置
  lineheight_formats: '1 1.2 1.4 1.5 1.6 2 2.5 3.0', // 行高
  
   setup: (editor) => {}) // 下面所有的初始化，自定義按鈕等都在這個(gè)方法里
 });
  • Plugins是插件有官方的，也有社區(qū)貢獻(xiàn)的，按需引入使用并且在plugins配置項(xiàng)里注冊(cè)即可
  • toolbar是工具欄，有編輯器內(nèi)置的，也可以自定義
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', // 按鈕圖標(biāo)
  tooltip: '刪除批注', 
  onAction: function() {
    
  },
  onSetup: function (btnApi) {
    
  }
});
  • 按鈕文本跟按鈕圖標(biāo)只能顯示一個(gè)
  • 按鈕icon（所有Icons Available for TinyMCE | Docs | TinyMCE），文章內(nèi)說(shuō)了怎么自己添加icon，也可以直接引入png路徑
  • onAction用于處理編輯器中的操作事件，例如按鈕點(diǎn)擊、鍵盤快捷鍵等。
  • onSetup用于在編輯器初始化時(shí)進(jìn)行配置，例如設(shè)置初始狀態(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') } },
      // 添加更多的選項(xiàng)...
    ];
    callback(items);
  }
});

批注

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

批注初始化

批注需要用到屬性，如批注內(nèi)容，批注人等，最后都是會(huì)插入到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();
  }
});

點(diǎn)擊批注內(nèi)容：比如你需要點(diǎn)擊后在哪里顯示批注信息

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

      // 在這里根據(jù)批注的唯一標(biāo)識(shí)符執(zhí)行相應(yīng)的操作
      console.log('點(diǎn)擊了批注，批注ID為：', annotationId);
      console.log('點(diǎn)擊了批注，批注內(nèi)容為：', annotationComment);
      
    }
});

與編輯器通信

比如我的刪除批注的按鈕不在編輯器工具欄，不是自定義按鈕，而在我的頁(yè)面中，直接使用tinymce實(shí)例事無(wú)法操作的，這是因?yàn)?code>editor對(duì)象只在TinyMCE編輯器的上下文中可用，而在編輯器以外的頁(yè)面上無(wú)法直接訪問(wèn)。因此，無(wú)法直接調(diào)用editor.annotator.remove('alpha')和editor.focus()方法來(lái)刪除批注。

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

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

在編輯器以外的頁(yè)面中：

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

參考資料：

以上就是Vue中tinymce富文本功能配置詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue tinymce富文本功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論