vue 项目 tinymce 使用首行缩进插件

参考链接 tiny中文文档-首行缩进插件
参考链接 vue项目移植tinymce踩坑

tinymce-vue的部分 自己看上面文章研究就可以

1、下载indent2em 下载链接

2、解压之后，复制indent2em到node_module下的tinymce下的plugins文件夹下

3、新建一个index.js 目的是引入这个插件

4、下面需要对indent2em/plugin.js这个文件进行改造

(function () {
  var indent2em = (function () {
      'use strict';
  
      var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
      var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');
      

      var doAct = function (editor) {
        var dom = editor.dom;
        var blocks = editor.selection.getSelectedBlocks();
        var act = '';
        var indent2em_val = editor.getParam('indent2em_val', '2em')
        global$1.each(blocks, function (block) {
            if(act==''){
                act = dom.getStyle(block,'text-indent')== indent2em_val ? 'remove' : 'add';
            }
            if( act=='add' ){
                dom.setStyle(block, 'text-indent', indent2em_val);
            }else{
                var style=dom.getAttrib(block,'style');
                style = style.replace(/text-indent:[\s]*2em;/ig,'');
                dom.setAttrib(block,'style',style);
            }

        });
      };

      var register = function (editor) {
        console.log(editor.ui.registry.getAll().icons)
        editor.ui.registry.getAll().icons.indent2em || editor.ui.registry.addIcon('indent2em','');
        editor.ui.registry.addButton('indent2em', {
          tooltip: '首行缩进',
          icon: 'indent2em',
          onAction: function () {
            doAct(editor);
          }
        });
        editor.ui.registry.addMenuItem('indent2em', {
          text: '首行缩进',
          icon: 'indent2em',
          onAction: function () {
            doAct(editor);
          }
        });
      };

      global.add('indent2em', function (editor) {
        register(editor)
      });

      function Plugin () {
      }
  
      return Plugin;
  
  }());
  })();

5、使用在页面中引入

import 'tinymce/plugins/indent2em'

在plugins 中加入 indent2em
在toolbar 中加入 indent2em

6、最终效果