【Vue】在quill-editor组件工具栏中添加自定义的方法（添加源码编辑功能）

最新推荐文章于 2024-07-12 15:45:55 发布

汪小穆

最新推荐文章于 2024-07-12 15:45:55 发布

阅读量2.1w

点赞数 17

分类专栏： Vue 文章标签： vue-quill-editor vue富文本编辑 quill-editor添加源码编辑功能

本文链接：https://blog.csdn.net/w390058785/article/details/84337859

版权

前言：vue-quill-editor中缺少重要的源码编辑功能，我们现在就来给vue-quill-editor工具栏中添加一个源码编辑功能。

一、实现代码

①、新建一个quill-config.js

// toolbar工具栏的工具选项（默认展示全部）
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{'header': 1}, {'header': 2}],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],
  [{'indent': '-1'}, {'indent': '+1'}],
  [{'direction': 'rtl'}],
  [{'size': ['small', false, 'large', 'huge']}],
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'color': []}, {'background': []}],
  [{'font': []}],
  [{'align': []}],
  ['clean', 'link', 'image', 'video'],
  ['sourceEditor']     //新添加的工具
];
const handlers = {
  sourceEditor: function(){     //添加工具方法
       alert('我新添加的工具方法');
  }
};

export default {
  placeholder: '',
  theme: 'snow',  // 主题
  modules: {
    toolbar: {
      container: toolOptions,  // 自定义工具栏选项
      handlers: handlers  // 事件添加
    }
  },
  initButton:function(){      //在使用的页面中初始化按钮样式
    const sourceEditorButton = document.querySelector('.ql