首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue tinymce富文本功能

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

2023-11-23 08:45:12 作者：以前叫王绍洁

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费,本文小编给大家详细介绍了Vue中tinymce富文本功能配置,需要的朋友可以参考下

版本说明：

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

Tips: 跟前端框架无关，以下功能是基于tinymce5的最新高版本，当前最新为6，拥有更多功能

初始化

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) => {}) // 下面所有的初始化，自定义按钮等都在这个方法里
 });

Plugins是插件有官方的，也有社区贡献的，按需引入使用并且在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用于在编辑器初始化时进行配置，例如设置初始状态、添加自定义按钮等。

自定义选择按钮

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

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

与编辑器通信

比如我的删除批注的按钮不在编辑器工具栏，不是自定义按钮，而在我的页面中，直接使用tinymce实例事无法操作的，这是因为editor对象只在TinyMCE编辑器的上下文中可用，而在编辑器以外的页面上无法直接访问。因此，无法直接调用editor.annotator.remove('alpha')和editor.focus()方法来删除批注。

所以如果想在编辑器以外的页面上删除批注，需要通过与编辑器进行通信的方式来实现。使用自定义事件或消息传递机制。

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

在编辑器以外的页面中：

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

参考资料：

以上就是Vue中tinymce富文本功能配置详解的详细内容，更多关于Vue tinymce富文本功能的资料请关注脚本之家其它相关文章！