🍡Компонент редактора Quill для Vue2, поддерживает SPA и SSR.
Основанный на Quill, текстовый редактор с расширенными функциями для Vue2, поддерживающий рендеринг на стороне сервера и одностраничные приложения.
Этот компонент представляет собой простой и лёгкий редактор. Он не зависит от каких-либо других ресурсов, кроме ядра Quill и CSS. Quill — это прототип редактора с открытым исходным кодом, который имеет мощный API расширения и функцию регистрации модулей. Если вам нужны какие-либо другие прикреплённые функции, пожалуйста, напишите их самостоятельно или используйте другие модули расширения. Наконец, пожалуйста, не задавайте вопросов о том, могу ли я реализовать какую-то функцию в редакторе или почему нет. Спасибо.
npm install vue-quill-editor --save
// import
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// or require
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')
// mount with global
Vue.use(VueQuillEditor)
// If used in Nuxt.js/SSR, you should keep it only in browser build environment
if (process.BROWSER_BUILD) {
const VueQuillEditor = require('vue-quill-editor/ssr')
Vue.use(VueQuillEditor)
}
// if you need register quill modules, you need to introduce and register before the vue program is instantiated
import Quill from 'quill'
import { yourQuillModule } from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)
// mount with component(can't work in Nuxt.js/SSR)
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
SSR и единственное различие в использовании SPA:
component
, находит экземпляр Quill по атрибуту ref
.directive
, находит экземпляр Quill через аргумент directive
.<!-- Вы можете настроить имя "myQuillEditor", используемое для поиска экземпляра quill в текущем компоненте -->
<template>
<!-- Двунаправленная привязка данных -->
<div class="quill-editor"
v-model="content"
v-quill:myQuillEditor="editorOption">
</div>
<!-- Или вручную управляйте синхронизацией данных -->
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
v-quill:myQuillEditor="editorOption">
</div>
</template>
<script>
export default {
mounted() {
console.log('это текущий объект экземпляра quill', this.myQuillEditor)
}
// Опускаем те же части, что и в следующем примере кода компонента
// ...
}
</script>
<template>
<!-- Двунаправленная привязка данных -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )