Vue中使用TinyMce方法

最新项目上需要添加一个富文本编辑器，通过各种推荐与比较选择了TinyMce。我的项目是vue2，通过npm下载了模块后，找到官方文档进行阅读，只有英文文档，所以在阅读的时候有些细节方面就很难理解。下面我就记录一下我在学习中遇到的几个问题，希望能给更多的朋友提供帮助。

 

正文

要学习怎么使用插件，首先肯定是要去官网看文档:https://www.tiny.cloud/docs。但是有一个小小的挑战是文档只有英文版。直接从General Configuration Guide开始，使用插件最主要就是要了解配置嘛。

在了解配置之前先需要了解下如何引入插件,如何初始化插件。

• 本人使用NPM下载tinymce，在组件中使用import局部引入tinymce模块。
• 使用tinymce.init()方法来初始化将tinymce挂载到selector的选择器上。

import tinymce from "tinymce";


tinymce.init({
  selector: 'textarea',  // 必填项:选择器。插件挂载到选择器对应的dom元素上
  plugin: 'a_tinymce_plugin', // 需要使用到的插件
  toolbar:'a_tinymce_toolbar', // 富文本的按钮
  images_upload_handler:(blobInfo, success, failure)=>{}, // 图片上传回调
  setup:(editor)=>{} // 建立实例事件监听,editor为tinytmce实例
});



tinymce.activeEditor.getContent(); // 获取富文本的内容

tinymce.remove(); // 销毁tinymce实例

1. 经验1：离开插件时需要先销毁tinymce，从而销毁tinymce实例对应的dom元素。这样重新进入富文本对应的路由的时候会重新建立一个tinymce。否则离开富文本对应的路由重新进入，tinymce将会保持离开前理由前的状态。

2. 经验2:  tinymce只对部分插件的功能默认引入可直接使用,所以在使用一些不在tinymce-core里面的功能，需要在局部使用import关键字引入插件。

我在使用的过程，更多的时间是在了解配置以及如何解决路由切换时更新tinymce状态。如果有什么需要沟通的，或者纠正的欢迎留言。