关于quill.js的使用

最近项目中接触到了富文本框，最终选择了quill.js。这里是对一些小问题和小技巧的总结。
官方文档地址

toolbar 工具栏定制

var 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
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

上面代码是官方文档中对定制工具栏的示例（最全的版本）可以根据自己的需求来增加和减少，对于工具名（上面例子中没有的）去哪里找呢？

tips：在官网中，有一个完整版的工具栏，右键打开检查，如图所示，就能找到你工具栏所需要定制的工具名；

工具名寻找示例

自定义图片上传

在网上找了很多现成的解决方案都觉得没啥用，直到看到下面这个链接的内容，觉得很有益处
参考链接--来自知乎

1.通过addHander来监听image事件

                let toolbar = quill.getModule('toolbar');
                toolbar.addHandler('image', () => {
                    document.getElementById('checkImg').click();
                });

2.图片上传成功之后的回调

            handleSuc(url) {
                const range = this.obj.getSelection();
                if (range) {
                    quill.insertEmbed(range.index, 'image', url);
                }
            },

url是图片的链接地址, 通过inserEmbed将图片插入到富文本框中；图片的插入位置为上传图片前光标所在位置：rang.index

获取html格式的富文本框内容

let content = quill.container.firstChild.innerHTML;

注意点： 当文本框中没有任何内容的时候，quill.container.firstChild.innerHTML默认为




如果有帮助到你的话，点个喜欢呗(╹▽╹)