quill-editor的使用和自定义

最新推荐文章于 2024-07-04 18:33:16 发布

粥粥_

最新推荐文章于 2024-07-04 18:33:16 发布

阅读量2.1k

点赞数

分类专栏： vue quill-editor

本文链接：https://blog.csdn.net/weixin_44735916/article/details/106502168

版权

本文介绍了如何在Vue项目中使用和封装quill-editor，包括安装vue-quill-editor和quill，组件引入及注册，特别强调了quill-editor的自定义功能，如设置字体大小，并提供了在quill.core.js和quill.js中修改font.css的步骤，以及在main.js中引入自定义样式的注意事项。

摘要由CSDN通过智能技术生成

我的项目中有很多地方要用到，所以我封装了一个组件
1.安装vue-quill-editor

npm install vue-quill-editor -S

2.安装vue-quill-editor

npm install quill -S

安装后在main.js中引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

3.安装vue-quill-editor-upload 因为我用到图片上传服务器，如果使用他的可以不用安装

vue-quill-editor-upload

安装后要引入组件、注册组件

   import {
   quillRedefine} from 'vue-quill-editor-upload'
   
   components:{
    quillRedefine },

一下是封装好的quill-editor组件

<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>
    </div> 
</template>
<script>
/*富文本编辑图片上传配置*/
const uploadConfig = {
   
	action: 'common.uploadfile.single', // 必填参数 图片上传地址
	methods: 'POST', // 必填参数 图片上传方式
	token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
	name: 'img', // 必填参数 文件的参数名
	size: 1024, // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
	accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
};
import {
   quillRedefine} from 'vue-quill-editor-upload'
export default {
   
    components:{
    quillRedefine },
    name: 'App',
    props: {
   
        value: {
   
            type: String, 
            default: '',
        }
    },
    data(){
   
        return {
   
        content: this.value || '',
        editorOption: {
   }
        }
    },
    watch:{
   
        value(val) {
   
            this.content = val
        },
        deep: