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