文章目录

• 一、安装使用
• 二、自定义工具栏
• 三、自定义按钮
• 四、获取富文本编辑器的光标位置，并插入内容或图片
• 五、官方文档

一、安装使用

1. 下载

yarn add vue-quill-editor 

2. 导入

import { quillEditor } from "vue-quill-editor"; 
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

3. 注册

export default {
	components: {
    	quillEditor
  },
}

4. 使用

<quill-editor v-model="content" :options="editorOption" ref="QuillEditor"></quill-editor>

二、自定义工具栏

1. 定义工具栏

const toolbarOptions = [
  ['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
];

2. 配置

export default {
  placeholder: '', // 默认展示文字
  theme: 'snow',  // 主题
  modules: {
    toolbar: {
      container: toolbarOptions ,  // 自定义工具栏选项
      handlers: { // 事件添加
      	// handlers object will be merged with default handlers object
    	'link': function(value) { // 事件名和工具名一致
      		if (value) {
       			var href = prompt('Enter the URL');
        		this.quill.format('link', href);
      		} else {
        		this.quill.format('link', false);
      		}
    	}
      }
    }
  }
}

三、自定义按钮

1. 在工具栏添加自定义的按钮，并添加对应的处理函数

const toolbarOptions = [
  ['newFunction']     // 新添加的按钮
];

const handlers = {
  newFunction: function () {     // 添加处理方法
    alert('我是一个新的功能！');
  }
};

2. 配置

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 {
  components: {
    quillEditor
  },
  mounted() { // 初始化按钮样式
    const newFunctionButton = document.querySelector('.ql-newFunction');
    newFunctionButton.style.cssText = "width:60px; border:1px solid #ccc; border-radius:5px;";
    newFunctionButton.innerText = "新功能";
  },
  data() {
    return {
      quillOption: {
        placeholder: '', // 默认显示文字
        theme: 'snow',  // 主题
        modules: {
          toolbar: {
            container: toolbarOptions,  // 自定义工具栏
            handlers: handlers  // 处理事件
          }
        },
      },
      content: ''
    }
  }
};

3. 使用

<template>
  <div class="box">
    <quill-editor ref="myEditor" v-model="content" :options="quillOption"></quill-editor>
  </div>
</template>

4. 效果图
   
   
5. 完整代码

<template>
  <div class="box">
    <quill-editor ref="myEditor" v-model="content" :options="quillOption"></quill-editor>
  </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';

const toolbarOptions = [
  ['newFunction']     // 新添加的按钮
];

const handlers = {
  newFunction: function () {     // 添加处理方法
    alert('我是一个新的功能！');
  }
};

export default {
  components: {
    quillEditor
  },
  mounted() {
    const newFunctionButton = document.querySelector('.ql-newFunction');
    newFunctionButton.style.cssText = "width:60px; border:1px solid #ccc; border-radius:5px;";
    newFunctionButton.innerText = "新功能";
  },
  data() {
    return {
      quillOption: {
        placeholder: '', // 默认显示文字
        theme: 'snow',  // 主题
        modules: {
          toolbar: {
            container: toolbarOptions,  // 自定义工具栏
            handlers: handlers  // 处理事件
          }
        },
      },
      content: ''
    }
  }
};
</script>

<style>
.box {
  width: 520px;
  margin: 50px;
}
</style>

四、获取富文本编辑器的光标位置，并插入内容或图片

1. 富文本编辑器的定义

<quill-editor v-model="content" :options="editorOption" ref="QuillEditor"></quill-editor>

2. 获取富文本编辑器

let quill = this.$refs.QuillEditor.quill // 获取富文本编辑器

3. 获取光标位置

let index = quill.selection.savedRange.index // 获取光标位置

4. 插入文本或图片

quill.insertEmbed(index, 'text', '这里是要插入的文字')
quill.insertEmbed(index, 'image', '这里是图片的url')

5. 光标移到插入内容后面

quill.setSelection(index + 1) // 光标移到插入内容后面

6. 获取编辑区的内容

let editorContent = quill.getContents(); // 编辑区内容

五、官方文档

Quill官方文档