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.");
                        }
                      });