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

const editorInstance = tinymce.init({
  // 编辑器的配置项...
  auto_focus : true,
  statusbar: true, // 隐藏底部文字统计栏
  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) => {}) // 下面所有的初始化，自定义按钮等都在这个方法里
 });

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) {
    
  }
});

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);
  }
});

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');

      // 在这里根据批注的唯一标识符执行相应的操作
      console.log('点击了批注，批注ID为：', annotationId);
      console.log('点击了批注，批注内容为：', annotationComment);
      
    }
});

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

// 触发自定义事件，删除批注
const editor = this.$refs.myEditor.editor;
editor.fire('removeAnnotation')