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 

捐

如果您喜欢这个项目，并且对您不让它死亡很有用。帮我继续它。谢谢。或者你可以给我买咖啡