VUE-QUILL-EDITOR
该文章仅记录学习过程,不展示最终文件源码
安装 quill-editor
在对应的目录打开 Terminal
执行以下命令:
- 安装 editor
npm install vue-quill-editor --save
- 安装 resize plugin
npm install quill-image-resize-module -S
- 安装 drop plugin
npm install quill-image-drop-module -S
引用 (There are two ways)
全局引用 (Way 1)
在 main.js
文件中填入以下代码:
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
其中引入的三个
css
必须要有,否则富文本编辑器会出现不规则的黑白几何图形这三个
css
可以在main.js
中引入, 也可以在具体使用的vue
中引入, 但必须有其中之一
局部引用 (Way 2)
在具体使用的 vue
文件中写入以下内容:
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import VueQuillEditor, { Quill, quillEditor } from "vue-quill-editor";
import imageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", imageResize);
import imageDrop from "quill-image-drop-module";
Quill.register("modules/imageDrop", imageDrop);
配置问题 (imports 报错)
Way1
在该项目的 build/webpack.base.conf.js
文件中的 plugin[]
中添加以下内容:
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
}),
Way2 (Recommend)
在根目录的 vue.config.js
文件中添加以下内容:
const webpack = require('webpack')
module.exports = {
chainWebpack: config => {
config.plugin('provide').use(webpack.ProvidePlugin, [{
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
}]);
}
}
使用 QUILL EDITOR
如果要使用图片与视频的上传功能,请在此之前完成上传组件,为其
class
赋值,并隐藏该组件
<template>
<quillEditor v-model="content"
:options="editorOption"
v-model="data">
</quillEditor>
</template>
export default {
components: {
quillEditor
},
data(){
return {
data: "",
editorOption: {
placeholder: "请输入...",
modules: {
toolbar:{
container: [
['bold', 'italic', 'underline', 'strike'], // FONT STYLE
['blockquote', 'code-block'], // CODE BLOCK
[{ 'header': 1 }, { 'header': 2 }], // TITLE STYLE
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // LIST
[{ 'script': 'sub'}, { 'script': 'super' }], // SUPERSCRIPT SUBSCRIPT
[{ 'indent': '-1'}, { 'indent': '+1' }], // INDENT
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }], // FONT SIZE
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // TITLE TYPE
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
["link", "image", "video"], // LINK IMAGE VIDEO
['clean'] // CLEAN FORMAT
],
handlers:{
'image': function(val){
if(val){
console.log(val)
document.querySelector('.el-upload').click() // Select Your Upload Component And Click It. (This is just an example~)
} else{
console.log(val)
}
}
}
},
imageResize: {
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]
},
imageDrop: true
}
}
}
}
}
请留意代码中的部分注释