在Vue中使用Tinymce5遇到的问题记录

基本使用

1. 安装并使用官方的vue集成组件

   $ npm install @tinymce/tinymce-vue

2. 加载组件

   import Editor from '@tinymce/tinymce-vue';

3. 使用组件

   <editor api-key="API_KEY" :init="{plugins: 'wordcount'}"></editor>

4. 其他配置参见官方文档

   加载用户自定义插件

5. 我使用了由tinymce.ax-z.cn提供的首行缩进和设置行高两个插件

6. 在Tinymce-vue组件中，使用init配置的setup参数来加载自定义插件文件，我的一个列子：

     ...
   this.init = {
     setup: function() {
       import('./plugins/lineheight.js')
       import('./plugins/indent2em.js')
     },
     height: this.height,
     menubar: false,
     ...
   }

   在多层弹出框中,TinyMCE的插件输入框无法获取焦点问题

7. 如果tinymce-vue组件在多层dialog框中调用，会出现部分带有输入框的插件无法获取焦点从而无法输入内容的情况，因为大部分模态(modal)窗口阻止来获取焦点的行为。可以根据相应的框架进行调整。比如我是用来VuetifyJS的Dialog组件，使用组件提供的retain-focus参数即可解决以上问题。

8. 参考文档：https://stackoverflow.com/questions/36279941/using-tinymce-in-a-modal-dialog