my vue editor
1.0.0
Богатый текстовый редактор на основе VUE2.X
中文文档
Нажмите здесь, чтобы увидеть демонстрацию
Больше демонстрации, пожалуйста, обратитесь к примеру каталога
Наш редактор основан на вторичной разработке Vue-HTML5-Editor. Благодаря своему автору Peaktai за предоставление краткого плагина с богатым текстовым редактором, на основе которого мы переписали нативный метод и расширили функциональность.
npm install my - vue - editorПредставлен как плагин
import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )Глобальное введение
< script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >Установлен глобальной переменной myvueeditor
Vue . use ( myVueEditor , options )Использовать
< my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > | Предметы | Тип | Описание |
|---|---|---|
| имя | Нить | Пользовательское имя компонента, по умолчанию мой редактор |
| модули | Множество | Модули должны использовать |
| значки | Объект | Покрытие значка указанного модуля |
| команды | Объект | Пользовательская команда |
| ярлык | Объект | Пользовательский ярлык |
| extendmodules | Множество | Пользовательский модуль |
| Любое встроенное название модуля | Объект | Перезаписать свойства соответствующего встроенного модуля |
Vue . use ( myVueEditor , {
// Overlay built-in module's icon
icons : {
image : 'iui-icon iui-icon-pic' ,
indent : 'iui-icon iui-icon-insert'
} ,
// Modules in use
modules : [
'font' ,
'bold' ,
'italic' ,
'underline' ,
'linethrough' ,
'ul' ,
'indent' ,
'align' ,
'image' ,
'quote' ,
'todo' ,
// This is a custom module
'customSave'
] ,
// Overlay image module's configuration
image : {
maxSize : 5120 * 1024 ,
imgOccupyNewRow : true ,
compress : {
width : 1600 ,
height : 1600 ,
quality : 0.8
}
} ,
// Overlay font module's configuration
font : {
config : {
'xx-large' : {
fontSize : 6 ,
name : 'H1'
} ,
'medium' : {
fontSize : 3 ,
name : 'H2'
} ,
'small' : {
fontSize : 2 ,
name : 'H3'
} ,
default : 'medium'
} ,
// Modify the font module's module inspect mechanism to inspect via style and tag name
inspect ( add ) {
add ( 'style' , {
fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
} ) . add ( 'tag' , 'font' )
}
} ,
// Overlay ul module's configuration
ul : {
// When the ul module is inspected, disabled all but itself
exclude : 'ALL_BUT_MYSELF' ,
// When the ul module is clicked, execute the following method
handler ( rh ) {
console . log ( 'i am ul!' )
rh . editor . execCommand ( 'insertUnorderedList' )
}
} ,
// When the ul module is inspected, disabled image, todo and ul module
quote : {
exclude : [ 'image' , 'todo' , 'ul' ]
} ,
// Customize an command named getAllTexts that prints out all the text nodes under the current range object
commands : {
getAllTexts ( rh , arg ) {
console . log ( rh . getAllTextNodeInRange ( ) )
}
} ,
shortcut : {
// Custom a shortcut key, when you press the command + s, execute the save function
saveNote : {
metaKey : true ,
keyCode : 83 ,
handler ( editor ) {
save ( )
}
}
} ,
// Customize a module, a alert pops up when you click on the module icon
extendModules : [ {
name : 'smile' ,
icon : 'iui iui-icon-smile'
handler ( rh ) {
alert ( 'smile~~' )
}
} ]
} ) | Название события | Описание |
|---|---|
| изменять | Триггер при изменении контента редактора, параметр-это современные данные контента |
| ImageUpload | Триггер При загрузке изображений параметры включают соответствующие данные изображения ， Заменить replacesrcafteruploadfinish: используется для замены атрибута SRC IMG из формата Base64 к URL -адресу, возвращаемому сервером при успешной загрузке) DeleteImgWhenUploadFail: используется для удаления текущего изображения, когда загрузка сбоя |
Добавить параметр с именем встроенного модуля в качестве ключа, охватывает исходные свойства встроенного модуля (см. Все встроенные модули и их элементы конфигурации в каталоге SRC/Modules).
Vue . user ( myVueEditor , {
image : {
// Modify the image module's icon
icon : 'iui-pic' ,
// Cover the original compression parameters, so that the image is not compressed when uploaded
compress : null ,
// Can not upload the same image repeatedly
canUploadSameImage : false
}
} ) Распространение модуля с помощью элемента конфигурации ExtendModules Мы предоставляем некоторые общие элементы конфигурации модуля
| Элемент | Тип | Описание |
|---|---|---|
| имя | Нить | имя модуля |
| икона | Нить | Имя значка модуля ， значок Fontawesome используется по умолчанию |
| исключать | Струнный массив | отключенные модули при проверке текущего модуля Когда значение «все» означает, что отключить все модули включают текущий модуль Когда значение is'all_but_myself ', означает отключение всех модулей, но текущий модуль Когда значение - тип массива, имя модуля ввода должно быть отключено |
| осмотреть | Функция | Модуль осмотрите ， Когда курсор находится в списке, подчеркивается модуль списка, то есть модуль списка проверяется, который основан на его метке UL в качестве тестовой основы Первым аргументом функции является метод под названием ADD, который вызвал, чтобы добавить основу модуля. Когда есть несколько осмотра, пожалуйста, позвоните в цепочку Первый параметр метода добавления указывает, какой путь к тестированию. Необязательный стиль «тег» и «атрибут» Когда параметр 1 - «тег», параметр 2 проходит в строке имени тега Когда параметр 1 - «стиль», параметр 2 - это объект со стилей в качестве ключа и stylevalue в качестве значения. Примечание Stylename Используйте форму горба (ex ： Fontsize) ， При наличии нескольких стилей, пожалуйста, используйте форму массива Когда параметр 1-«атрибут», параметр 2-это объект, ключом которого является имя атрибута и значение атрибута является значением, и обратите внимание, что, если какое-либо значение требуется, передай в '' (ex ： add ('attribute', {'data-todo': ''})） |
| обработчик | Функция | Что делать, когда вы нажимаете на модуль Параметр 1-это экземпляр диапазона, через который вы можете получить экземпляр VUE текущего редактора и метод для работы диапазона Мы не рекомендуем эксплуатационный диапазон непосредственно в обработчике, но должны инкапсулировать действие диапазона в качестве команды, вызывая команду с помощью метода ExecCommand в экземпляре редактора в обработчике |
| вкладка | Экземпляр VUE | Обычные модули используют обработчики для обработки кликов, и если вы хотите реализовать пользовательский интерфейс (раскрывающийся список модулей шрифтов) или более сложную логику (переключение модулей Align с правом направлении), используйте вкладку |
| инициатор | Функция | Соответствует созданному циклу жизненного цикла компонента редактора, параметр 1 является экземпляром редактора. Обратите внимание, что метод execcommand не может быть использован в настоящее время |
| монтируется | Функция | Соответствует монтированию жизненного цикла компонента редактора, параметр 1 является экземпляром редактора. |
| Обновлено | Функция | Соответствует обновлению жизненного цикла компонента редактора, параметр 1 является экземпляром редактора. |
| уничтожен | Функция | Соответствует жизненному циклу составляющего редактора Beforedestroy, параметр 1 является экземпляром редактора. |
