vue-quill-editor自己定义模块

最新推荐文章于 2024-08-09 07:00:42 发布

任伟——济南西客站区域

最新推荐文章于 2024-08-09 07:00:42 发布

阅读量1.3k

点赞数 1

分类专栏： vue 前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44753443/article/details/121094617

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

这个定义模块是我参考了很多文章摸索的目前有选中bug 添加没问题在富文本还不能选中它如果有朋友看到这个文章请帮忙给指条路
效果就是点这里插入一个百分号不过下面的代码只是自定义模块声明部分的请想象一下百分号在空这个汉字的位置上的情况我就不改了代码再截图了…
在这里插入图片描述

1、创建模块不需要插入自定义模块的只是插入一个文本字符的可用跳过1 2 步
这是一个添加矢量字体的其实都大同小异就是 return node;这里返回一个Dom元素

 // 引入源码中的BlockEmbed
 const BlockEmbed  = Quill.import('blots/embed');
 // 定义新的blot类型
 export default class baifenhao extends BlockEmbed  {
    static create() {
      let node = super.create();
     let i = document.createElement("i");
     i.setAttribute('class', 'jjgj_iconfont icon_baifenhao');
     i.setAttribute('style', 'font-size: 12px;');
     node.appendChild(i)
      return node;
    }
     // 返回节点自身的value值 用于撤销操作
     static value(node) {
      return node.innerHTML
    }
 }
 baifenhao.blotName = 'baifenhao';
 baifenhao.tagName = 'baifenhao';

2.main.js里面注册一下

import Quill from 'quill'
//上面哪个模块引用和注册
import baifenhao from "文件路径/baifenhao "
Quill.register(baifenhao );

3、在页面上使用
3.1配置文件里面配置

 editorOption: {
        placeholder: "",
        // or 'bubble'
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              ["insertbaifenhao "],//在你喜欢的任何一个数组里把你注册的组件加上 这里名字随意起 主要是后期加标签使用的
            ],
            handlers: {
              shadeBox: null,
              insertbaifenhao : () => {//这里的方法名一定要和上面数组的方法名一一对应哈
                //方法体 点击富文本你自己定义的标签以后 会调用的你自己定义的vue的x 方法 我这里是别的程序粘过来的 如果括号数量不对请自行删减
                this.x();
              },
            },
          },
        },
      },

3.2 让富文本显示你自己的标签

// 自定义按钮内容初始化 这里的insertbaifenhao 就是在配置里你输入的名字 通过它给标签加图标 i标签怎么引入矢量字体 请自行百度 这里也可用用汉字哦
   let sourceEditorButton = document.querySelector(".ql-insertbaifenhao ");
   sourceEditorButton.innerHTML =
     '<i class="jjgj_iconfont icon_xieti" style="display: block;font-size: 18px;color: #444;margin-top: 2px;"></i>';

3.2点击标签在页面上插入注册好的组件

  //插入自定义组件
   x() {
     let index = this.editor.selection.savedRange.index;

     // // 插入文本至光标位置 这里插入的就是你自己定义的模块了
     this.editor.insertEmbed(index, "baifenhao", ``, true);
     index = index + 1;
     // // 移动光标至文本后面
     this.editor.setSelection(index);
   },
      //插入一个文本片段
   x() {
let index = this.editor.selection.savedRange.index;
     // 插入文本至光标位置，
     this.editor.insertText(index, `______`);
     // 重新计算index
     index += 6;
     // 移动光标至文本后面
     this.editor.setSelection(index);
   },