vue2 editor
Release 2.6.6
Простой в использовании, но все же мощный и настраиваемый богатый текстовый редактор, работающий на Quill.js и Vue.js
Выпуск заметок
Вы можете использовать пряжу или NPM
npm install vue2-editorИЛИ
yarn add vue2-editor // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;
// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; Добавить vue2-editor/nuxt в раздел модулей nuxt.config.js
{
modules: [ "vue2-editor/nuxt" ] ;
} Чтобы не видеть предупреждений от Vue о несоответствии содержимого, вам нужно обернуть компонент VueEditor с помощью компонента client-only Nuxt предоставляет, как показано здесь:
< client-only >
< VueEditor />
</ client-only > | Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| Пользовательские модулы | Множество | - | Объявить модули перо для регистрации |
| неполноценный | Логический | ЛОЖЬ | Установить в True, чтобы отключить редактор |
| редактор | Объект | - | Предлагает объект для слияния в конфигурации по умолчанию (добавьте форматы, пользовательские модули Quill, т. Д.) |
| Editortoolbar | Множество | ** Слишком долго для таблицы. См. Пример панели инструментов ниже | Используйте пользовательскую панель инструментов |
| идентификатор | Нить | Quill-Container | Установите идентификатор (необходимо, если несколько редакторов в одном и том же представлении) |
| заполнитель | Нить | - | Текст заполнителя для редактора |
| UseCustomimageHandler | Логический | ЛОЖЬ | Обрабатывать загрузку изображения вместо использования преобразования по умолчанию в Base64 |
| V-модель | Нить | - | Установите V-модель в свой свойство содержимого или данных, с которым вы хотите связать |
| Имя | Параметры | Описание |
|---|---|---|
| размытие | перо | Излучается на мероприятии blur |
| фокус | перо | Излучается на мероприятии focus |
| с добавлением изображения | Файл, редактор, курсорация | Излучается, когда useCustomImageHandler правда, и фото добавляется в редактор |
| снимали изображение | Файл, редактор, курсорация | Испускается, когда useCustomImageHandler верен, и фото удалено |
| выбор отбора | Диапазон, OldRange, Source | Излучается на событии selection-change Quill |
| изменение текста | Delta, Olddelta, Source | Излучается на событии text-change Quill |
< template >
< div id = " app " >
< vue-editor v-model = " content " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h1>Some initial content</h1> "
};
}
};
</ script >Если вы решите использовать пользовательский обработчик изображений, событие испускается при выборе AA Photo. Ниже вы можете увидеть, что 3 параметра проходят.
Примечание В дополнение к этому примеру я создал пример репо, демонстрирующего эту новую функцию с реальным сервером.
< template >
< div id = " app " >
< vue-editor
id = " editor "
useCustomImageHandler
@image-added = " handleImageAdded "
v-model = " htmlForEditor "
>
</ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
components : {
VueEditor
},
data () {
return {
htmlForEditor : " "
};
},
methods : {
handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
// An example of using FormData
// NOTE: Your key could be different such as:
// formData.append('file', file)
var formData = new FormData ();
formData . append ( " image " , file);
axios ({
url : " https://fakeapi.yoursite.com/images " ,
method : " POST " ,
data : formData
})
. then ( result => {
const url = result . data . url ; // Get url from response
Editor . insertEmbed (cursorLocation, " image " , url);
resetUploader ();
})
. catch ( err => {
console . log (err);
});
}
}
};
</ script >< template >
< div id = " app " >
< button @click = " setEditorContent " >Set Editor Contents</ button >
< vue-editor v-model = " htmlForEditor " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
htmlForEditor : null
};
},
methods : {
setEditorContent : function () {
this . htmlForEditor = " <h1>Html For Editor</h1> " ;
}
}
};
</ script >< template >
< div id = " app " >
< vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
< vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
editor2Content : " <h1>Editor 2 Starting Content</h1> "
};
}
};
</ script >
< style >
#editor1 ,
#editor2 {
height : 350 px ;
}
</ style >< template >
< div id = " app " >
< vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h1>Html For Editor</h1> " ,
customToolbar : [
[ " bold " , " italic " , " underline " ],
[{ list : " ordered " }, { list : " bullet " }],
[ " image " , " code-block " ]
]
};
}
};
</ script >< template >
< div id = " app " >
< button @click = " saveContent " ></ button >
< vue-editor v-model = " content " ></ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h3>Initial Content</h3> "
};
},
methods : {
handleSavingContent : function () {
// You have the content to save
console . log ( this . content );
}
}
};
</ script >< template >
< div id = " app " >
< vue-editor v-model = " content " ></ vue-editor >
< div v-html = " content " ></ div >
</ div >
</ template >
< script >
import { VueEditor } from ' vue2-editor '
components : {
VueEditor
},
export default {
data () {
return {
content : ' <h1>Initial Content</h1> '
}
}
}
</ script >Есть два способа использования пользовательских модулей с Vue2editor. Отчасти это связано с тем, что были случаи, когда ошибки допускаются при импорте и попытке объявить пользовательские модули, и отчасти потому, что я считаю, что это действительно хорошо разделяет проблемы.
Vue2editor теперь экспортирует Quill, чтобы помочь в этом процессе.
editorOptions < template >
< div id = " app " >
< vue-editor
:editorOptions = " editorSettings "
v-model = " content " >
</ div >
</ template >
< script >
import { VueEditor , Quill } from ' vue2-editor '
import { ImageDrop } from ' quill-image-drop-module '
import ImageResize from ' quill-image-resize-module '
Quill . register ( ' modules/imageDrop ' , ImageDrop)
Quill . register ( ' modules/imageResize ' , ImageResize)
export default {
components : {
VueEditor
},
data () {
return {
content : ' <h1>Initial Content</h1> ' ,
editorSettings : {
modules : {
imageDrop : true ,
imageResize : {}
}
}
}
}
}
</ script >(Рекомендуется)
customModules , чтобы объявить массив модулей (ы).editorOptions в соответствии с модулями, как показано ниже < template >
< div id = " app " >
< vue-editor
:customModules = " customModulesForEditor "
:editorOptions = " editorSettings "
v-model = " content "
>
</ vue-editor >
</ div >
</ template >
< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;
export default {
components : {
VueEditor
},
data () {
return {
content : " <h1>Initial Content</h1> " ,
customModulesForEditor : [
{ alias : " imageDrop " , module : ImageDrop },
{ alias : " imageResize " , module : ImageResize }
],
editorSettings : {
modules : {
imageDrop : true ,
imageResize : {}
}
}
};
}
};
</ script >Vue2editor теперь использует POI для разработки
yarn dev : запустить пример в режиме разработкиyarn docs : Развитие документовyarn build : сборка компонента в обоих форматеyarn lint : забежать эслинт Грань
