vue-quill-img-editor
🍡Quill editor component for Vue, support SPA.
基于 Quill、适用于 Vue 的富文本编辑器,支持单页应用。
NPM
npm install vue-quill-img-editor quill --save
Mount
mount with global
// require stylesVue
mount with component
// require styles components: vueQuillImgEditor
vue测试环境注意要配置babel
moduleexports = presets: '@vue/app' modules: 'umd' useBuiltIns: 'entry'
Difference(使用方法)
SPA
<template><!-- bidirectional data binding(双向数据绑定) --><quill-editor v-model="content"ref="myQuillEditor":options="editorOption":upload="upload":headers="headers"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"></quill-editor><!-- Or manually control the data synchronization(或手动控制数据流) --><quill-editor :content="content":options="editorOption"@change="onEditorChange($event)"></quill-editor></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 {upload: '', // 图片文件上传地址headers:{},//请求头content: '<h2>I am Example</h2>',editorOption: {// some quill options}}},// manually control the data synchronization// 如果需要手动控制数据同步,父组件需要显式地处理changed事件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>
配置服务器
{ code: 200 msg: "quilljs" }
{ code: 200 url: "http://127.0.0.1:7001/public/uploads/fb3d66947fa94904e13a4a118a590ed5.png" }
Modules
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quilljs-table
- more modules...
Issues
- Add attributes from toolbar options
- Option to insert an image from a URL
- How vue-quill-img-editor 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