从0开始在vue项目中使用quill编辑器

最新推荐文章于 2025-04-08 10:45:51 发布

font-size

最新推荐文章于 2025-04-08 10:45:51 发布

阅读量4.6k

点赞数 2

分类专栏：编辑器文章标签：编辑器 vue.js

本文链接：https://blog.youkuaiyun.com/qq_36812165/article/details/108258016

版权

编辑器专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Vue CLI项目中从零开始使用Quill编辑器，包括创建项目、安装Quill、配置toolbar、实现数据双向绑定、自定义样式以及解决样式过滤问题。同时提供了在线示例、GitHub仓库链接以及关键步骤的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

快速、便捷的创建在vue cli中使用quill。
参考资料： quill中文文档
在线示例：点我预览
github仓库地址：https://github.com/font-size/vue-quill-simple-demo

1：找一个文件夹

输入vue create quill-editor（前提是电脑上已经安装了cli）
按回车，出现提示。问你项目配置，没有特殊需求直接继续按回车，默认配置走起。

在这里插入图片描述

静等几分钟，提示完成了

在这里插入图片描述

接下来自然是打开vscode

在这里插入图片描述

2：简单的quill实例

在这里插入图片描述

ctrl+shift+~ 打开终端，安装quill。输入npm i quill@1.3.6 --save

在这里插入图片描述

在tempalte里删掉原来的代码，写入

   <div class="quill-editor">
      <div id="toolbar" slot="toolbar">
      <div class="editor" ref="editor"></div>
    </div>

接着引入quill依赖

  // 引入原始组件
  import * as Quill from 'quill'
  // 引入核心样式和主题样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'

大致是这样
在这里插入图片描述

接着在data里定义个option，作为quill的配置项

	 quill: null,
      options: {
        theme: 'snow',
        modules: {
          // 工具栏的具体配置
          toolbar:  [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction
            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean']                                         // remove formatting button
          ],
        },
        placeholder: '请输入内容...'

在这里插入图片描述

创建quill

 let editorDom = this.$el.querySelector('.editor')
 // 初始化编辑器
 this.quill = new Quill(editorDom, this.options)

在这里插入图片描述

基本完成了

我们npm run serve一下
在这里插入图片描述
高度有点问题，我们在css里加上高度。

一个基本的quill编辑器就这样完成了

3：关于toolbar配置

options中的toolbar可以写一个node节点

在template中写一个toolbar

		<div id="toolbar">
		  <span class="ql-formats">
            <select class="ql-font"></select>
            <select class="ql-size"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
          </span>
          <span class="ql-formats">
            <select class="ql-color"></select>
            <select class="ql-background"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-script" value="sub"></button>
            <button class="ql-script" value="super"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-header" value="1"></button>
            <button class="ql-header" value="2"></button>
            <button class="ql-blockquote"></button>
            <button class="ql-code-block"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
            <button class="ql-indent" value="-1"></button>
            <button class="ql-indent" value="+1"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-direction" value="rtl"></button>
            <select class="ql-align"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-link"></button>
            <button class="ql-image"></button>
            <button class="ql-video"></button>
            <button class="ql-formula"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-clean"></button>
          </span>
        </div>

在这里插入图片描述
可以自定义图标，比如新加一个quill中没有的图标，如秀米。

我们新建一个

 <button id="custom-button-xiumi" title="秀米" @click="showmi"></button>

在这里插入图片描述
加样式

#custom-button-xiumi{
  background-size: contain;
  background-repeat: no-repeat;
  height: 16px;
  margin-top: 4px;
  width: 33px;
  padding-right: 8px;
  background-position: center;
  position: relative;
}
#custom-button-xiumi {
  background-image: url('http://xiumi.us/connect/ue/xiumi-connect-icon.png');
}
#custom-button-xiumi:hover {
  background-image: url('http://xiumi.us/connect/ue/xiumi-connect-icon.png');
}

完成

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200827141437922.png#pic_center

4：数据双向绑定

在创建quill实例的时候加监听方法

// 初始化编辑器
    _initEditor () {
      // 获取编辑器的DOM容器
      let editorDom = this.$el.querySelector('.editor')
      // 初始化编辑器
      this.quill = new Quill(editorDom, this.options)
      this.quill.on('text-change', () => {
        this.emitChange()
        this.selection = this.quill.getSelection()
      })
    },
    // 更新text-change
    emitChange() {
      let html = this.$refs.editor.children[0].innerHTML
      const quill = this.quill
      const text = this.quill.getText()
      if (html === '<p><br></p>') html = ''
      this.$emit('input', html)
      this.$emit('change', { html, text, quill })
      this.$emit("getConetntLength", this.quill.getLength())
    }

然后搬家

把app.vue的内容搬到src/components/quill.vue
在这里插入图片描述

修改app.vue页面代码

改成
在这里插入图片描述

完成

在编辑器中输入文字，已经双向绑定成功
在这里插入图片描述

5：自定义quill样式

quill自带的字体大小只有几种，如果我要更多的字体大小。怎么做呢

首先在toolbar中定义

 		<select class="ql-size toolbarButton">
          <option value="14px">14px</option>
          <option value="16px">16px</option>
          <option value="18px">18px</option>
          <option selected>默认</option>
          <option value="22px">22px</option>
          <option value="24px">24px</option>
          <option value="26px">26px</option>
          <option value="28px">28px</option>
        </select>

已经有了选项
在这里插入图片描述

给字体大小设置效果
通过插件方法，添加样式

1：定义字体样式列表
2：添加字体白名单
3：注册字体大小

我们发现给字体设置大小后，在样式上出现了这个ql-size-28px。聪明的小伙伴应该知道了接下来改怎么做了。
新建quillSize.css文件

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=14px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=14px]::before {
    font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=16px]::before,
.ql-snow .ql-picker.ql-size  .ql-picker-item[data-value=16px]::before {
	font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=18px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=18px]::before {
	font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=20px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=20px]::before {
	font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=22px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=22px]::before {
	font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=24px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=24px]::before {
	font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=26px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=26px]::before {
	font-size: 26px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=28px]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=28px]::before {
	font-size: 28px;
}
 
.ql-container {
    font-size:20px;
}
.ql-size-26px {
  	font-size: 26px;
}
.ql-size-28px {
	font-size: 28px;
}
.ql-size-24px {
  	font-size: 24px;
}
.ql-size-22px {
  	font-size: 22px;
}
.ql-size-20px {
  	font-size: 20px;
}
.ql-size-18px {
  	font-size: 18px;
}
.ql-size-16px {
  	font-size: 16px;
}
.ql-size-14px {
  	font-size: 14px;
}

在quill.vue里导入css

在这里插入图片描述

完成
同理也可以实现更多的字体font-family
新增toobar

let fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];  
let Font = Quill.import('formats/font');  
Font.whitelist = fonts; //将字体加入到白名单 
Quill.register(Font, true);