tinymce-vue富文本编辑器（翻译）

Posted 2021-11-25 taohuaya

 官方Tinymce Vue组件 

翻译来自：https://github.com/tinymce/tinymce-vue

关于

这个包是一个围绕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

• onActivate
• onAddUndo
• onBeforeAddUndo
• onBeforeExecCommand
• onBeforeGetContent
• onBeforeRenderUI
• onBeforeSetContent
• onBeforePaste
• onBlur
• onChange
• onClearUndos
• onClick
• onContextMenu
• onCopy
• onCut
• onDblclick
• onDeactivate
• onDirty
• onDrag
• onDragDrop
• onDragEnd
• onDragGesture
• onDragOver
• onDrop
• onExecCommand
• onFocus
• onFocusIn
• onFocusOut
• onGetContent
• onHide
• onInit
• onKeyDown
• onKeyPress
• onKeyUp
• onLoadContent
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onNodeChange
• onObjectResizeStart
• onObjectResized
• onObjectSelected
• onPaste
• onPostProcess
• onPostRender
• onPreProcess
• onProgressState
• onRedo
• onRemove
• onReset
• onSaveContent
• onSelectionChange
• onSetAttrib
• onSetContent
• onShow
• onSubmit
• onUndo
• onVisualAid

加载 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使用模块加载程序的信息，请参阅文档中的此页。