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

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

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

--更新下载链接 2020-12-28
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','<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M170.666667 563.2v-102.4H887.466667v102.4zM170.666667 836.266667v-102.4H887.466667v102.4zM512 290.133333v-102.4H887.466667v102.4zM238.933333 341.333333V136.533333l204.8 102.4z" fill="#2c2c2c" p-id="5210"></path></svg>');
        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、最终效果

2020-12-28 附录一下 @tinymce/tinymce-vue 的组件用法

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="configData" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>
<script>
import Api from '@/api'
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

import 'tinymce/plugins/code'
import 'tinymce/plugins/indent2em'
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 字数统计插件

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxSize: {
      type: Number,
      default: 2097152
    },
    accept: {
      type: String,
      default: 'image/jpeg, image/png'
    },
    plugins: {
      type: [String, Array],
      default: 'code lists image wordcount indent2em'
    },
    toolbar: {
      type: [String, Array],
      default:
        'code | formatselect | fontsizeselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist indent2em | lists image table | removeformat | paste-upload'
    }
  },
  data () {
    return {
      Editor: null,
      configData: {
        language_url: '/static/tinymce/langs/zh_CN.js', // 如果语言包不存在，指定一个语言包路径
        language: 'zh_CN', // 语言
        skin_url: '/static/tinymce/skins/ui/oxide', // 如果主题不存在，指定一个主题路径
        content_css: '/static/tinymce/skins/content/default/content.css',
        height: 500,
        plugins: this.plugins, // 插件
        toolbar: this.toolbar, // 工具栏
        branding: false, // 技术支持(Powered by Tiny || 由Tiny驱动)
        menubar: false, // 菜单栏
        theme: 'silver', // 主题
        // images_upload_url: 'https://cxqlserver.sdjtaq.cn/api/webm/file/images', // 图片上传路径
        // images_upload_base_path: '', // 如果图片上传路径是相对路径，则指定一个基本路径
        zIndex: 1101,
        images_upload_handler: function (blobInfo, success, failure) {
          let formData = new FormData()
          formData.append('file', blobInfo.blob(), blobInfo.filename())
          Api.uploadImages('post', formData).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              const imgUrl = sessionStorage.getItem('imgUrl')
              success(`${imgUrl}` + res.data.data.url)
              // resolve({
              //   default: `${imgUrl}${res.data.data.url}`
              // })
            } else {
              failure(res.data.message)
            }
          }).catch(err => {
            console.log(err)
            failure(err)
            // reject(err)
          })
          // if (blobInfo.blob().size > this.maxSize) {
          //   failure('图片太大')
          // }
          // if (this.accept.indexOf(blobInfo.blob().type) >= 0) {
          //   uploadPic()
          // } else {
          //   failure('图片格式错误')
          // }
          // function uploadPic () {
          // }
        }
      },
      myValue: this.value
    }
  },
  mounted () {
    // tinymce.init({})
    tinymce.init({})
    // ...this.configData
  },
  methods: {
    // init () {
    //   // const self = this
    // },
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    clear () {
      this.myValue = ''
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>