vue tinymce editor

vue-tinymce-editor

該組件可輕鬆地用於VUE開發人員

演示

您可以在此頁面中看到一個演示和示例：演示和示例

安裝

$ npm install vue-tinymce-editor

如何使用

 import Vue from 'vue'
import tinymce from 'vue-tinymce-editor'
Vue . component ( 'tinymce' , tinymce )

您可以在標記中使用組件

 < tinymce id =" d1 " v-model =" data " > </ tinymce > 

 export default {
    data ( ) {
        return {
            data : ''
        } ;
    }
} 

特性

財產	類型	預設	描述
ID	需要，字符串		組件的文本方面的ID
工具欄1	細繩	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Tinymce的工具欄1
工具欄2	細繩	''	Tinymce的工具欄2
插件	大批	['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality','template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample']	Tinymce的插件您需要加載
其他_options	大批	{}	其他Tinymce選項。您也可以覆蓋我們的初始選擇
可讀	布爾	錯誤的	啟用或禁用編輯器

事件

事件	範圍	描述
EditorChange	事件	當Tinymce調用Onchane時，此事件將被調用
Editorinit	編輯	此事件將在初始化編輯器後調用

本土化

如果您想在其他語言中使用Tinymce，請按照以下步驟操作：

1. 下載您希望從這裡使用的語言包。
2. 將語言文件打開您所需的路徑，該路徑可以從外部訪問，並且有一個指向它的URL。
3. 最後，將其他_options中的Lagathing_url設置為指向語言文件的URL。

例如：

 export default {
    data ( ) {
        return {
            data : '' ,
            options : {
                language_url : 'http://example.com/js/langs/fa_IR.js' //This url points to location of persian language file.
            }
        } ;
    }
} 

 < tinymce id =" d1 " v-model =" data " :other_options =" options " > </ tinymce > 

直接訪問Tinymce編輯器

您可以通過為此組件設置Ref來訪問Tinymce本身：

 < tinymce id =" d1 " v-model =" data " ref =" tm " > </ tinymce >

然後，您可以通過致電以下方式訪問編輯器：

 this . $refs . tm . editor 

捐

如果您喜歡這個項目，並且對您不讓它死亡很有用。幫我繼續它。謝謝。或者你可以給我買咖啡