1.Basic usage
1. NPM import VUE-QUILL-EDITOR
npm install vue-quill-editor --save2. Introduce VUE-QUILL-EDITOR
introduced globally
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, /* { 默认全局 } */)Introduced in the specified vue file
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}3. Use in VUE
<template>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
export default {
data() {
return {
content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
editorOption: {}, //编辑器配置项
}
},
methods: {
onEditorBlur() {}, // 失去焦点触发事件
onEditorFocus() {}, // 获得焦点触发事件
onEditorChange() {}, // 内容改变触发事件
}
}
</script>At this point a default rich text editor has been imported and used, as shown in the picture below!
2. Upgrade Usage
Generally, we do not need so many functions when using it, and we can configure the editor configuration items appropriately.
editorOption: {
modules:{
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
['blockquote', 'code-block'], //引用，代码块
[{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
[{'script': 'sub'}, {'script': 'super'}], // 上下标
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
[{'direction': 'rtl'}], // 文本方向
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
[{'font': []}], //字体
[{'align': []}], //对齐方式
['clean'], //清除字体样式
['image', 'video'] //上传图片、上传视频
]
},
placeholder: "输入内容..."
}, //编辑器配置项You can retain the corresponding toolbar according to your actual needs.
3. Picture upload
By default, vue-quill-editor saves images in base64, and will directly submit the base64 image and content text to the backend in the form of a string. This is fine for small pictures, but if you want to upload a large picture, it will prompt that the upload failed. A good front-end typist will obviously not do this.
Ideas
- You can upload the image to the server first, and then insert the image link into the rich text for display.
- To upload images, you can customize a component or use iview's component to upload images (I use a custom component in the project, here I demonstrate uploading using iview components)
- The component for uploading images needs to be hidden. When you click on the image to upload, iview's image upload is called. After the upload is successful, the image link is returned.
-
Configure configuration items in editor items
editorOption: { modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'image': function(value) { if (value) { alert('点击了上传图片') } else { this.quill.format('image', false); } } } } placeholder: "输入内容..." }, //编辑器配置项 }, -
Call iview's upload component.
HTML:
<Upload :show-upload-list="false" :on-success="handleSuccess" :format="['jpg','jpeg','png','gif']" :max-size="2048" multiple action="/file/upload" > </Upload> <quill-editor v-model="content" :options="editorOption" ref="quillEditor"> </quill-editor>CSS:
.ivu-upload { display: none; }JS:
data () { return { content: '', editorOption: { modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'image': function (value) { if (value) { // 调用iview图片上传 document.querySelector('.ivu-upload .ivu-btn').click() } else { this.quill.format('image', false); } } } } } } } }, methods: { handleSuccess (res) { // 获取富文本组件实例 let quill = this.$refs.myQuillEditor.quill // 如果上传成功返回图片URL if (res) { // 获取光标所在位置 let length = quill.getSelection().index; // 插入图片，res为服务器返回的图片链接地址 quill.insertEmbed(length, 'image', res) // 调整光标到最后 quill.setSelection(length + 1) } else { // 提示信息，需引入Message Message.error('图片插入失败') } }, }This completes the image upload function.
4. Adjust image size
1. When the original quill-editor can be used normally, install quill-image-drop-module and quill-image-resize-module
npm install quill-image-drop-module -S
npm install quill-image-resize-module -S2. I registered quill-editor globally and added the following code to main.js
//富文本编辑器
import VueQuillEditor, { Quill } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import imageResize from 'quill-image-resize-module' // 调整大小组件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
Quill.register('modules/imageResize', imageResize );
Quill.register('modules/imageDrop', ImageDrop);
Vue.use(VueQuillEditor);3. Add configuration in editorOption and level it with history/toolbar in modules
imageDrop: true, //图片拖拽
imageResize: { //放大缩小
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]
},
4. Add configuration to the project file vue.config.js. (This step is very important, if not configured, an error will be reported!)
const webpack = require('webpack'); //导入 webpack 模块
//在模块中加入
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
],
},The import is now complete, as shown in the figure below
