【vue】使用Tinymce富文本编辑功能改造记录

1. Tinymce增加Ctrl+Entry回车键进行保存

   // 1.组件中定义一个回调事件参数
   subFunc:{ // entry+回车键的确定事件
           type:Function,
           required:false 
   }
   // 2.tinyce组件初始化时
   tinymce.init({
       ..
       setup(editor) {
             editor.on('keydown', function(e) {
               // ctrl+entry回车键，并且回调函数不为空
               if (e.ctrlKey && e.keyCode === 13 && (_this.subFunc && typeof(_this.subFunc))) {
                   e.preventDefault();
                   _this.subFunc();
               }
             });
             editor.on('FullscreenStateChanged', (e) => {
               _this.fullscreen = e.state
             })
           },
       ...
   })

2.  切换Tinyce模式

   // 1.组件内定义参数
   model:{// 默认经典模式，webim用到了沉浸模式【DistractionFree】
       type: String,
       default: "default"
   }
   
   // 2. Tinyce初始化时
   tinymce.init({
       ..
       toolbar: this.model == 'DistractionFree' ? false : this.toolbar.length > 0 ? this.toolbar : toolbar,
           menubar: this.model == 'DistractionFree' ? false : this.menubar,
       ...
   })
   
   

3. 清空Tincye编辑器内容

   this.$refs.MessEditor.setContent("");

4. 更多内容  

   更多内容查看中文网站：http://tinymce.ax-z.cn