vue2 集成quill-editor，自定义插件开发

Vue2中集成富文本编辑器及选人功能实现

原创

已于 2023-11-06 11:29:43 修改 · 897 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-11-06 11:29:02 首次发布

本文介绍了如何在Vue2项目中集成Vue-Quill-Editor富文本编辑器，并添加了一个选人插件，点击后将选中用户信息插入编辑区域。

需求介绍

vue2集成富文本编辑器，并开发一个选人插件，选中后加到编辑区域内。

效果展示

安装Vue-Quill-Editor

npm install vue-quill-editor --save

项目中引入

// 导入插件，引用样式
import { quillEditor, Quill  } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

// Vue-Quill-Editor放到组件中
components: {
    quillEditor
},

页面代码

<template>
  <div class="app-quill-editor"> 
      <!--   编辑器   -->
      <quill-editor ref="editorComp" v-model="content" class="quilleditor" :options="editorOption"> </quill-editor>
      <!--   选人列表   -->
      <div id="myPanel" v-if="showMetric" style="position:absolute; top: 80px; left: 10px;background-color: #FFFFFF">
        <el-card class="box-card" style="height: 150px; overflow-y: auto; overflow-x: hidden">
          <div v-for="item in userList" class="box-div" style="width: 210px; height: 30px; background-color: #FFFFFF">
            <el-button type="text" @click="handleClick(item)">
              <span style="float: left; width: 50px;">{
  
  { item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px; width: 150px; text-align: right">{
  
  { item.mobile }}</span>
            </el-button>
          </div>
        </el-card>
      </div>
  </div>
</template>

定义变量

insertMetric 声明选人插件

在handlers中控制插件

insertMetric: function () {
  let self = this.handlers.that;
  self.showMetric = !self.showMetric;
  self.quill_this = this;
}

  data() {
    return {
      user: '',
      //父组件传过来
      userList: [],
      // 工具按钮
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['insertMetric'], //新添加的工具
              ['bold', 'italic', 'underline'],
              [
                {
                  size: ['small', false, 'large', 'huge']