Si desea ver el documento oficial, haga clic en mí ----> Documento oficial
Use el paso
1.npm para instalar
npm install vue-quill-editor
Instalar dependencias:
npm install quill
2. Introducir en 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)
Copie el código 3. Use en el módulo,
solo use la etiqueta quill-editor directamente
<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>
Copie el código para deshabilitar el editor
Si desea deshabilitar el editor, puede hacer esto:
onEditorFocus(val,editor){
// 富文本获得焦点时的事件
console.log(val); // 富文本获得焦点时的内容
editor.enable(false); // 在获取焦点的时候禁用
}
Copie el código 4. Configure el editor para
establecer el tema (específicamente importe el archivo Quill, escriba qué tema debe usarse. El predeterminado es el tema de nieve):
data(){
return {
content: `<p>hello world</p>`,
editorOption: {
theme:'snow'
}
}
}
Copiar la configuración de la barra de herramientas de código:
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'
}
}
}
Copia el código y arrastra la imagen para subir.
Instala el módulo:
npm i quill-image-drop-module
Copie el código para importar y usar:
modifique la configuración de imageDrop a verdadero, puede simplemente arrastrar las imágenes en su computadora a la parte superior.
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,
}
}
}
}
}
Copiar el código Cuando el archivo se arrastra hacia arriba, ya está en formato base64,
así que cuando lea los datos en primer plano, simplemente descodifique directamente.
Ajuste el tamaño de la imagen:
editorOption:{
modules:{
imageResize:{
}
}
}
Autor:
Enlace YXi : https: //juejin.cn/post/6844903936965476366