官方Tinymce Vue组件
翻译来自：https://github.com/tinymce/tinymce-vue
官方文档：https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/
关于
这个包是一个围绕Tinymce的薄包装，以便于在Vue应用程序中使用。要快速演示，请查看storybook。
用法
加载组件
首先，你必须加载组件，你如何做取决于你开发的应用程序是如何设置的。如果您使用某种捆绑加载程序（如Webpack、Rollup或Browserify），则可以按如下方式添加导入
// es modules import Editor from '@tinymce/tinymce-vue'; // commonjs require // NOTE: default needed after require var Editor = require('@tinymce/tinymce-vue').default;
如果您不使用模块加载程序，只需将javascript文件导入添加到HTML文件中，则必须将npm包的lib/browser文件夹中的tinymce-vue.min.js文件复制到应用程序中，并添加如下内容：
<script src="path/to/tinymce-vue.min.js"></script>
然后可以将编辑器添加到app的组件属性中：
// This might look different depending on how you have set up your app // but the important part is the components property var app = new Vue({ el: '#app', data: { /* Your data */ }, components: { 'editor': Editor // <- Important part }, methods: { /* Your methods */} })
在模板中使用组件
在模板中使用编辑器，如下所示：
<editor api-key="API_KEY" :init="{plugins: 'wordcount'}"></editor>
配置编辑器
这个编辑器接受下列的 props：
disabled: 使用这个获取布尔值的属性，您可以动态地将编辑器设置为“禁用”只读模式或正常可编辑模式。
id: 编辑器的ID，以便您以后可以使用tinymce上的tinymce.get（“id”）方法获取实例，默认为自动生成的UUID。
init: 对象发送到用于初始化编辑器的tinymce.init方法。
initial-value: 将用其初始化编辑器的初始值。
inline: 设置编辑器应内联的简写，<editor inline></editor>与设置相同{inline: true} 在init中。
tag-name: 仅当编辑器是内联的、决定要在哪个元素上初始化编辑器时使用，默认为DIV。
plugins: 设置要使用的插件的简写，<editor plugins="foo bar"></editor>与设置相同{plugins: 'foo bar'}在初始化中
toolbar: 设置要显示的工具栏项的简写，<editor toolbar="foo bar"></editor>与设置相同{toolbar: 'foo bar'} 在初始化中
model-events: 更改要触发v-model事件的事件，默认为'change keyup'
api-key: Api key 对于TinyMCE cloud, 更多信息如下。
cloud-channel: Cloud channel 对于TinyMCE Cloud, 更多信息如下。
组件工作不需要任何配置属性-除非您使用Tinymce Cloud，否则您必须指定API密钥才能摆脱This domain is not registered…警告消息。
v-model
您还可以使用编辑器上的v-model指令（VueJS文档中的更多信息）创建双向数据绑定：
<editor v-model="content"></editor>
事件绑定
可以通过编辑器上的 属性 绑定编辑器事件，例如：
<editor @onSelectionChange="handlerFunction"></editor>
以下是可用事件的完整列表：
All available events
onActivateonAddUndoonBeforeAddUndoonBeforeExecCommandonBeforeGetContentonBeforeRenderUIonBeforeSetContentonBeforePasteonBluronChangeonClearUndosonClickonContextMenuonCopyonCutonDblclickonDeactivateonDirtyonDragonDragDroponDragEndonDragGestureonDragOveronDroponExecCommandonFocusonFocusInonFocusOutonGetContentonHideonInitonKeyDownonKeyPressonKeyUponLoadContentonMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUponNodeChangeonObjectResizeStartonObjectResizedonObjectSelectedonPasteonPostProcessonPostRenderonPreProcessonProgressStateonRedoonRemoveonResetonSaveContentonSelectionChangeonSetAttribonSetContentonShowonSubmitonUndoonVisualAid
加载 TinyMCE
Auto-loading from TinyMCE Cloud
编辑器组件需要Tinymce全局可用，但为了尽可能简单，如果在组件安装后找不到Tinymce可用，它将自动加载 TinyMCE Cloud .为了摆脱This domain is not registered... 警告.注册云并按如下方式输入API密钥：
<editor api-key='YOUR_API_KEY' :init="{/* your settings */}>"</editor>
您还可以定义要使用的云通道，有关不同版本的详细信息，请参见 文档.
Loading TinyMCE by yourself
要选择不使用Tinymce云，您必须让Tinymce自己在全球范围内可用。这可以通过自己托管tinymce.min.js文件并向HTML添加脚本标记来完成，或者，如果使用模块加载程序，则可以使用NPM安装tinymce。或者有关如何让Tinymce使用模块加载程序的信息，请参阅文档中的此页。