vue-quill-editor 在vue中的使用及增加源代码编辑器

1. 安装vue-quill-editor

cnpm install vue-quill-editor -S

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.组件使用

<quill-editor
     v-model="content"
     ref="myQuillEditor"
     :options="editorOption"
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
 </quill-editor>

const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、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"] // 链接、图片、视频
  ];
export default {
    components: {
        quillEditor
    },
    props: {
          contents: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
    data() {
        return {         
            content: ``,// 富文本编辑器默认内容
            editorOption: {  //  富文本编辑器配置
               theme: "snow",
              modules:{                    
                    toolbar:{
                      container:toolbarOptions,
                      handlers: {
                        image: function(value) {
                        if (value) {
                         // 触发input框选择图片文件

                          document.querySelector(".avatar-uploader input").click();
                           console.log(value)
                         } else {
                           console.log('22')
                          this.quill.format("image", false);
                            }
                         },
                      }
                  },
               },
              
               file:'',


            },
           
        }
    },
   

        onEditorBlur() {
              //失去焦点事件
            },
            onEditorFocus() {
              //获得焦点事件
            },
            onEditorChange() {
              //内容改变事件
              console.log(this.content)
              this.$emit("input", this.content);
            },

            

    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}

4.显示编辑器如图

“>_” 是代码编辑功能，下面会讲述怎么添加此功能 预览是我额外添加的，默认编辑器功能可参考
https://github.surmon.me/vue-quill-editor/

5.添加quill.eeSourceBtn.js文件并在组件中导入

quill.eeSourceBtn.js文件

class eeSourceBtn {
  constructor(quill, options) {

    let theClass = this;

    theClass.addDom(quill);
    quill.on('text-change', (delta, oldDelta, source)=>{
      theClass.replaceSourceEditorContent(quill)
    })
    
    //create btn
    let button = document.createElement("button");
    //display button text
    button.innerHTML = ">_";
    button.onclick = function() {
      theClass.showSourceEditor(quill);
    };

    //create btn container
    let buttonContainer = document.createElement("span");
    buttonContainer.setAttribute("class", "ql-formats ee-flag-source");
    buttonContainer.appendChild(button);
    
    //add to toolbar
    quill.container.previousSibling.appendChild(buttonContainer);
    
  }

  //add dom for source editor
  addDom(quill){
    if (!quill.container.querySelector(".ql-ee-source")) {
      var txtArea = document.createElement('textarea');
      txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 13px;outline: none;padding: 12px 15px;line-height: 1.42;font-family: Consolas, Menlo, Monaco, "Courier New", monospace;position: absolute;top: 0;bottom: 0;border: none;"

      var htmlEditor = quill.addContainer('ql-ee-source')
      htmlEditor.style.cssText = "display:none";
      htmlEditor.appendChild(txtArea)
    }
  }

  //for quill editor switch
  replaceSourceEditorContent(quill){
    let quillEditor = quill.container.querySelector(".ql-editor");
    let sourceContainer = quill.container.querySelector(".ql-ee-source");
    let sourceEditor = sourceContainer.querySelector('textarea');

    sourceEditor.value = quillEditor.innerHTML;

  }

  //add html DOM, show/hide, save event
  showSourceEditor(quill) {
    //1. find quill editor
    let quillEditor = quill.container.querySelector(".ql-editor");

    let sourceContainer = quill.container.querySelector(".ql-ee-source");
    let sourceEditor = sourceContainer.querySelector('textarea');
    // console.log(sourceEditor);


    //show/hide editor, value transfer
    if (sourceContainer.style.display === 'none') {
      //show source editor
      sourceContainer.style.display = '';

      sourceEditor.value = quillEditor.innerHTML;
    }else{
      //hidden source ditor
      sourceContainer.style.display = 'none';

      //set source content to quill editor
      quillEditor.innerHTML = sourceEditor.value;
    }

  }

}

window.eeSourceBtn = eeSourceBtn;
export default eeSourceBtn;
export { eeSourceBtn };



组件导入
import { eeSourceBtn } from '@/common/quill.eeSourceBtn.js';
Quill.register('modules/eeSourceBtn', eeSourceBtn);

import { Quill,quillEditor } from "vue-quill-editor"; //Quill添加进来  调用编辑器
 modules:添加 eeSourceBtn: {}, 就可完成代码编辑