基础使用

<template>
  <div>
    <quill-editor
      ref="edit"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'Article',
  components: {
    quillEditor
  },
  data () {
    return {
      content: '',
      editorOption: {
        theme: 'snow', // 主题
        placeholder: '',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ header: 1 }, { header: 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', 'link', 'image', 'video'],
              ['addBtn'],
            ], // 自定义工具栏选项
          },
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    onEditorBlur (editor) {
    },
    onEditorFocus (editor) {
    },
    onEditorChange ({ editor, html, text }) {
      console.log(this.content)
    }
  }
}
</script>

<style scoped>
.quill-editor {
  height: 200px;
}
</style>

效果图

在这里插入图片描述

全部工具栏介绍

['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'] //上传图片、上传视频

重新写图片/视频上传方法，禁用原来的

注意：这里以为图片为例，如果想修改视频，image替换为video即可。

editorOption: {
  theme: 'snow', // 主题
  placeholder: '',
  modules: {
    toolbar: {
      container: [], // 自定义工具栏选项
      handlers: {
        'image': function (value) {
          if (value) {
            console.log('在这里可以重新写上传图片的相关逻辑')
            // 自定义内容
          } else {
            this.quill.format('image', false)
          }
        }
      }
    },
  }
}

效果图

在这里插入图片描述

自定义工具栏

在这里插入图片描述

editorOption: {
  theme: 'snow', // 主题
  placeholder: '',
  modules: {
    toolbar: {
      container: [
        ...
        ['addBtn'],
      ], // 自定义工具栏选项

      handlers: {
        addBtn: () => {
          console.log('这里是自定义工具打印出来的')
        },
      },
    },
  }
}
mounted () {
    const addBtn = document.querySelector('.ql-addBtn')
    addBtn.className = 'ql-image'
    addBtn.innerHTML = 'test'
  },

自定义工具栏使用insertEmbed插入图片/视频

注意：这里以视频为例。

handlers: {
  addBtn: () => {
    this.$refs.edit.quill.insertEmbed(0, 'video', 'https://xxx.mp4')
  },
},

进阶：
获取当前光标位置，插入：

const quill = this.$refs.edit.quill
const addImageRange = quill.getSelection()
const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
this.quill.insertEmbed(newRange, 'image', 'https://xxx.png')
this.quill.setSelection(1 + newRange)

光标在设置在最后

当后台返回值，设置上默认值或者在使用编辑功能时候，光标会在最前面，这里显然是不合理的，所以需要重置光标位置:

const quill = this.$refs.edit.quill
// this.content为富文本现有的值
setTimeout(() => quill.setSelection(quill.getSelection().index + this.content.length, 0), 0)

添加字体/字号

字体
在这里插入图片描述

// js
<script>
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
export default {
  ...
  container: [
    [{ font: fonts }],
  ], // 自定义工具栏选项
  ...
}
</script>

// css
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

/deep/ .ql-font-SimSun {
  font-family: "SimSun";
}

/deep/ .ql-font-SimHei {
  font-family: "SimHei";
}

/deep/ .ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

/deep/ .ql-font-KaiTi {
  font-family: "KaiTi";
}

/deep/ .ql-font-FangSong {
  font-family: "FangSong";
}

/deep/ .ql-font-Arial {
  font-family: "Arial";
}

/deep/ .ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

/deep/ .ql-font-sans-serif {
  font-family: "sans-serif";
}

字号

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

// css
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft10"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft10"]::before {
    content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft12"]::before {
    content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft14"]::before {
    content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft16"]::before {
    content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft18"]::before {
    content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft32"]::before {
    content: "32px";
}
.ql-size-ft10 {
  font-size: 10px;
}
.ql-size-ft12 {
  font-size: 10px;
}

.ql-size-ft14 {
  font-size: 14px;
}

.ql-size-ft16 {
  font-size: 16px;
}

.ql-size-ft18 {
  font-size: 18px;
}

.ql-size-ft32 {
  font-size: 32px;
}
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

深化产教融合协同创新，华为云HCSD校园沙龙走进山西职业技术学院

avatar 华为开发者空间
cover

2024华为开发者盛典，海外开发者代表团走进华为

avatar 华为开发者空间
cover

华为“行业AI应用创新孵化营”走进中国医科大学，共探人才培养新模式

avatar 华为开发者空间