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

                        }

                      });