tinymce-vue富文本編輯器（翻譯）

 官方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

• 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使用模塊加載程序的信息，請參閱文檔中的此頁。