只是让该插件能运行2.0的quill,不会有过多维护,慎用
vue-quill-editor-next
Quill editor component for Vue. Use quill 2.0.
基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
Example
Install
NPM
npm install vue-quill-editor-next --save# oryarn add vue-quill-editor-next
CDN
Mount
Mount with global
Vue
Mount with local component
components: quillEditor
Mount with SSR
View Nuxt.js example code.
Register Quill module
Quill // Vue app...
Component
<template><!-- Two-way Data-Binding --><quill-editorref="myQuillEditor"v-model="content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"/><!-- Or manually control the data synchronization --><quill-editor:content="content":options="editorOption"@change="onEditorChange($event)"/></template><script>// You can also register Quill modules in the componentimport Quill from 'quill'import someModule from '../yourModulePath/someQuillModule.js'Quill.register('modules/someModule', someModule)export default {data () {return {content: '<h2>I am Example</h2>',editorOption: {// Some Quill options...}}},methods: {onEditorBlur(quill) {console.log('editor blur!', quill)},onEditorFocus(quill) {console.log('editor focus!', quill)},onEditorReady(quill) {console.log('editor ready!', quill)},onEditorChange({ quill, html, text }) {console.log('editor change!', quill, html, text)this.content = html}},computed: {editor() {return this.$refs.myQuillEditor.quill}},mounted() {console.log('this is current quill instance object', this.editor)}}</script>
Projects using vue-quill-editor-next
- Tamiat CMS
- ...
Issues
- Add attributes from toolbar options
- Option to insert an image from a URL
- How vue-quill-editor-next combine with the syntax highlighter module of highlight.js
- 配合 element-ui 实现上传图片/视频到七牛 demo
- How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR
Quill Modules
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quilljs-table
- more modules...