TinyMCE在vue中的使用

TinyMCE官方文档： TinyMCE

1. 通过cdn引入 例：Vue-Element-Admin

2. 通过下载到本地引入
   没有public文件夹： 把下载的tinymce文件放在static文件夹中，在index.html中引入，出现报错去检查assetsPublicPath或者publicPath，之后正常使用；
   <script src="/static/tinymce/tinymce.min.js"></script>
   有public文件夹，直接把tinymce放在public文件夹中，其他操作同上

3. 模式
   标准模式：同vue-element-admin中的使用方法
   内联模式：将textarea标签改成div，内容不显示注意修改css样式，同时window.tinymce.init中修改添加配置项

{
	inline: true,
	plugins: ['quickbars'], // 没有该属性，下面的选择不生效
	quickbars_selection_toolbar: 'bold italic...', // 选择文本后出现的编辑弹框内容
	quickbars_insert_toolbar: '', // 将光标放在编辑器中空行的开头
}

window.tinymce.init{
	selector: '#id', // 编辑器id
	language_url: '/static/tinymce/langs/zh_CN', // 本地汉化包地址
	language: 'zh_CN', // 语言选择
	height: '500', // 编辑器高度
	object_resizing: false, // 允许调整媒体文件的大小
	menubar: false, // 文本菜单选项
	plugins: '', // 注册的插件, 内联模式下需要添加 quickbars
	toolbar: '', // 工具栏内容
	inline: '', // 是否开启内联模式，开始内联模式时标签需要改为 div 最好
	quickbars_selection_toolbar: '', // 内联模式下，选中文本内容时的弹框
	quickbars_insert_toolbar: '', // 内联模式下，光标放在空行的开头的弹框
	quickbars_image_toolbar: '', // 选中媒体文件时的弹框
	powerpaste_word_import: '', // 粘贴复制内容时的格式
	advlist_bullet_styles: 'square', // 此选项允许您在默认bullist工具栏控件中包含特定的无序列表项标记
	advlist_number_styles: 'default', // 有序列表
	default_link_target: '_blank', // 默认超链接打开方式
	link_title: false, // 插入超链接弹框的title字段是否显示
	contextmenu: '', // 鼠标右键菜单内容
	nonbreaking_force_tab: true, // 未知
	end_container_on_empty_block: true, // 未知
	noneditable_noneditable_class: 'noneditable', // 添加该class后不能编辑
	init_instance_callback: (editor) => {
	   if (value) {
         editor.setContent(value) // 设置内容
       }
       _this.hasInit = true;
       // 监听内容变化的方式
       editor.on("NodeChange Change KeyUp SetContent", () => 
       	 this.hasChange = true;
         this.$emit("submit", editor.getContent());
       });
	}, // 初始化回调函数
	setup(editor) {
       editor.on("FullscreenStateChanged", e => {
         _this.fullscreen = e.state;
       });
    }, // 全屏
}

具体的实例字段可以去官方文档搜索： TinyMCE官方文档