vue-quill-editor自定义工具栏、确定光标位置、插入内容。

文章目录

一、安装使用

  1. 下载
yarn add vue-quill-editor 
  1. 导入
import { quillEditor } from "vue-quill-editor"; 
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
  1. 注册
export default {
	components: {
    	quillEditor
  },
}
  1. 使用
<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
];
  1. 配置

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('我是一个新的功能!');
  }
};
  1. 配置
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: ''
    }
  }
};
  1. 使用
<template>
  <div class="box">
    <quill-editor ref="myEditor" v-model="content" :options="quillOption"></quill-editor>
  </div>
</template>
  1. 效果图
    vue-quill-editor自定义工具栏、确定光标位置、插入内容。
    vue-quill-editor自定义工具栏、确定光标位置、插入内容。
  2. 完整代码
<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>
  1. 获取富文本编辑器
let quill = this.$refs.QuillEditor.quill // 获取富文本编辑器
  1. 获取光标位置
let index = quill.selection.savedRange.index // 获取光标位置
  1. 插入文本或图片
quill.insertEmbed(index, 'text', '这里是要插入的文字')
quill.insertEmbed(index, 'image', '这里是图片的url')
  1. 光标移到插入内容后面
quill.setSelection(index + 1) // 光标移到插入内容后面
  1. 获取编辑区的内容
let editorContent = quill.getContents(); // 编辑区内容

五、官方文档

Quill官方文档

上一篇:Spring Data


下一篇:mybatis框架