If you want to see the official document, please click me----> Official document
Use step
1.npm to install
npm install vue-quill-editor
Install dependencies:
npm install quill
2. Introduce in main.js
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
Copy the code 3. Use in the module,
just use the quill-editor tag directly
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<button v-on:click="saveHtml">保存</button>
</div>
</template>
<script>
import {
quillEditor } from 'vue-quill-editor'
export default {
name: 'App',
data(){
return {
content: `<p>hello world</p>`,
editorOption: {
}
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
methods: {
onEditorReady(editor) {
// 准备编辑器
},
onEditorBlur(){
// 失去焦点事件
},
onEditorFocus(){
// 获得焦点事件
},
onEditorChange(){
// 内容改变事件
},
}
}
</script>
Copy the code to disable the editor
If you want to disable the editor, you can do this:
onEditorFocus(val,editor){
// 富文本获得焦点时的事件
console.log(val); // 富文本获得焦点时的内容
editor.enable(false); // 在获取焦点的时候禁用
}
Copy the code 4. Configure the editor to
set the theme (specifically import the Quill file, write which theme needs to be used. The default is the snow theme):
data(){
return {
content: `<p>hello world</p>`,
editorOption: {
theme:'snow'
}
}
}
Copy code toolbar settings:
data(){
return {
content: `<p>hello world</p>`,
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'] //上传图片、上传视频
]
},
theme:'snow'
}
}
}
Copy the code and drag the picture to upload.
Install the module:
npm i quill-image-drop-module
Copy the code to import and use:
modify the imageDrop setting to true, you can just drag the pictures on your computer to the top.
import {
quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //引入编辑器
import {
ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);
export default {
name: 'App',
data(){
return{
editorOption:{
modules:{
imageDrop:true,
}
}
}
}
}
Copy the code When the file is dragged up, it is already in base64 format,
so when you read the data in the foreground, just decode it directly.
Adjust the image size:
editorOption:{
modules:{
imageResize:{
}
}
}
Author: YXi
link: https: //juejin.cn/post/6844903936965476366