vite3接入vue-quill：处理图片，自定义字体和字体大小，切换源码模式

layzz_z

于 2024-08-30 12:24:05 发布

阅读量1k

点赞数 21

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/layzz_z/article/details/141710823

版权

环境

适用版本：

node:14.21.2

"vue": "^3.2.26"
"vite": "^3.1.0"

安装模块：
"@vueup/vue-quill": "^1.2.0",

"quill-html-edit-button": "^3.0.0",

"quill-image-resize-module": "^3.0.0",

"quill-image-uploader": "^1.3.0",

vue-quill文档：

VueQuill | Rich Text Editor Component for Vue 3

Quill配置

1. 在vite.config.js上配置插件

（1）安装插件

npm i @rollup/plugin-inject --save-dev

（2）在vite.config.js上配置插件

没有配置，会导致找不到window.Quill

import inject from '@rollup/plugin-inject'

 plugins: [...createVitePlugins(env, command === 'build'),
            // 找到plugins，加上这部分
            inject({
                'window.Quill':  ['@vueup/vue-quill', 'Quill'],
                'Quill': ['@vueup/vue-quill', 'Quill'],
              })
        ],

2. quill-editor基础配置

template配置如下：

<div class="quill-editor">
    <quill-editor ref="editorRef"
      contentType="html"
      v-model:content="valueHtml"
      theme="snow" 
      :options="options"
      :toolbar="toolbarConfig" :modules="modules">
    </quill-editor>
</div>

script配置如下：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const toolbarConfig = [
      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                    ['blockquote', 'code-block'], // 引用  代码块
                    [{ header: 1 }, { header: 2 }], // 1、2 级标题