vue tinymce editor

Vue-Tinymce-Editor

Этот компонент обеспечивает легкое использование tinymce для разработчиков 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 : ''
        } ;
    }
} 

Характеристики

Свойство	Тип	По умолчанию	Описание
идентификатор	Требуется, строка		идентификатор компонента Textarea
Пабур инструментов1	Нить	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Панель инструментов 1 Tinymce
Инструментальный патч2	Нить	''	Панель инструментов 2 Tinymce
плагины	Множество	['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 вам нужно загрузить
other_options	Множество	{}	Другие варианты tinymce. Вы также можете переопределить наши первоначальные варианты
Ридонли	Логический	ЛОЖЬ	Включает или отключает редактор

События

Событие	Параметр	Описание
EditorChange	Событие	Это событие будет вызвано, когда Tinymce вызывает Onchane
редактор	Редактор	Это событие будет вызвано после инициализирована редактора

Локализация

Если вы хотите использовать Tinymce на других языках, следуйте этим шагам:

1. Загрузите языковой пакет, который вы хотите использовать отсюда.
2. Распакуйте язык языка в ваш желаемый путь, который доступен снаружи, и есть URL -адрес, указывающий на него.
3. Наконец, установите ranguage_url в другой_options к 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

Вы можете получить доступ к самим Tinymce, установив ссылку на этот компонент:

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

Затем вы можете получить доступ к редактору, позвонив:

 this . $refs . tm . editor 

Пожертвовать

Если вам нравится этот проект, и он был полезен для вас, не позволяйте ему умереть. Помогите мне продолжить это. Спасибо. Или вы можете купить мне кофе