标签：vue dist 自定义 handlers css 工具栏 import quill

文章目录

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

一、安装使用

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官方文档

标签：vue,dist,自定义,handlers,css,工具栏,import,quill
来源： https://blog.csdn.net/qq_45325810/article/details/123082263

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。