quill富文本编辑器 API

//1. 从第三个开始删除，删除4个
                 // console.log(this.quill.deleteText(2, 4));  // 12345678    1278
// 2.（返回对象）返回从第三个开始，返回4个，编辑器里面不变 .insert = 3456;  不写参数参数，默认全部
                  // console.log(this.quill.getContents(2, 4));  // 12345678    3456
//3.检索编辑器内容的长度 返回值是要加一
                  // console.log(this.quill.getLength(3));  // 12345678    9
//4.同quill.getContents(2, 4)；返回值不一样，
                  // console.log(this.quill.getText(2, 4));  // 12345678    3456

//5.编辑器里值不会被覆盖   编辑器里插入值 （位置，类型，内容）
                  // console.log(this.quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png'));  
//6.编辑器里值不会被覆盖   编辑器里插入值(文本) （位置，内容,  格式）
                  // console.log(this.quill.insertText(0, 'Hello', 'bold', true));  
                  // console.log(this.quill.insertText(5, 'Quill', {
                  //                                             'color': 'red',
                  //                                             'italic': true
                  //                                           }));  
//7.编辑器里值被覆盖  编辑器里插入值(文本) （位置，内容,  格式） 以{ insert: '\n' }结尾
                  // console.log(this.quill.setContents([
                  //                                       { insert: 'Hello ' },
                  //                                       { insert: 'World!', attributes: { bold: true } },
                  //                                       { insert: '\n' }
                  //                                     ]));  
//8.编辑器里值被覆盖
                  // console.log(this.quill.setText('Hello\n'));  
//9.没研究，会报错  home.vue?250d:109 Uncaught ReferenceError: Delta is not defined
                  // console.log(this.quill.updateContents(new Delta()
                  //                                             .retain(6)                  // Keep 'Hello '
                  //                                             .delete(5)                  // 'World' is deleted
                  //                                             .insert('Quill')
                  //                                             .retain(1, { bold: true })  // Apply bold to exclamation mark
                  //                                           ));  

                  
//10.设置编辑器里内容格式format
                    // this.quill.format('color', 'red');
                    // this.quill.format('align', 'right');
                    // this.quill.setText('Hello\nWorld!\n');
//11.formatLine
                    //formatLine(index: Number, length: Number, source: String = 'api'): Delta
                        // formatLine(index: Number, length: Number, format: String, value: any,
                        //           source: String = 'api'): Delta
                        // formatLine(index: Number, length: Number, formats: { [String]: any },
                                  // source: String = 'api'): Delta
                    // this.quill.formatLine(0, 2, 'align', 'right');   // right aligns the first line
                    // this.quill.formatLine(4, 4, 'align', 'center');  // center aligns both lines
// 12.formatText
                    // this.quill.setText('Hello\nWorld!\n');

                    // this.quill.formatText(0, 5, 'bold', true);      // bolds 'hello'

                    // this.quill.formatText(0, 5, {                   // unbolds 'hello' and set its color to blue
                    //   'bold': false,
                    //   'color': 'rgb(0, 0, 255)'
                    // });

                    // this.quill.formatText(5, 1, 'align', 'right');  // right aligns the 'hello' line
// 13 getFormat 获取格式
                    // this.quill.setText('Hello World!');
                    // this.quill.formatText(0, 2, 'bold', true);
                    // this.quill.formatText(1, 2, 'italic', true);
                    // this.quill.getFormat(0, 2);   // { bold: true }
                    // this.quill.getFormat(1, 1);   // { bold: true, italic: true }
// 14. 移除格式 removeFormat
                    // this.quill.setContents([
                    //                   { insert: 'Hello', { bold: true } },
                    //                   { insert: '\n', { align: 'center' } },
                    //                   { insert: { formula: 'x^2' } },
                    //                   { insert: '\n', { align: 'center' } },
                    //                   { insert: 'World', { italic: true }},
                    //                   { insert: '\n', { align: 'center' } }
                    //                 ]);
                    // this.quill.removeFormat(3, 7);


// 15.getBounds 获取区域
                      // getBounds(index: Number, length: Number = 0):
                      // 返回值 { left: Number, top: Number, height: Number, width: Number }
                      // this.quill.setText('Hello\nWorld\n');
                      // console.log(this.quill.getBounds(0, 2));  // Returns { height: 15, width: 0, left: 27, top: 31 }
 // 16.获取鼠标的位置 getSelection
                    // var range = this.quill.getSelection();
                    //   if (range) {
                    //     console.log(range)
                    //     if (range.length == 0) {
                    //       console.log('User cursor is at index', range.index);
                    //     } else {
                    //       var text = this.quill.getText(range.index, range.length);
                    //       console.log(this.quill.getLength());
                    //       console.log('User has highlighted: ', text);
                    //     }
                    //   } else {
                    //     console.log('User cursor is not in editor');
                    //   }
// 17 
                      this.quill.on('text-change', function(delta, oldDelta, source) {
                        if (source == 'api') {
                          console.log("An API call triggered this change.");
                        } else if (source == 'user') {
                          console.log("A user action triggered this change.");
                        }
                      });