Article From:https://www.cnblogs.com/pavilion-y/p/9970105.html
//1. Delete from the third, delete four
                 // console.log(this.quill.deleteText(2, 4));  // 12345678    1278
// 2.(Return object) Return from the third, return four, the editor does not change. insert = 3456; do not write parameter parameters, default all
                  // console.log(this.quill.getContents(2, 4));  // 12345678    3456
//3.The length return value for retrieving editor content is to be added by one.
                  // console.log(this.quill.getLength(3));  // 12345678    9
//4.With quill. getContents (2, 4); the return value is different,
                  // console.log(this.quill.getText(2, 4));  // 12345678    3456

//5.Editor inner values will not be overwritten by inserting values (location, type, content) into the editor.
                  // console.log(this.quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png'));  
//6.Editor Insert Value (Text) (Location, Content, Format) will not be overwritten by Editor Insert Value (Text)
                  // console.log(this.quill.insertText(0, 'Hello', 'bold', true));  
                  // console.log(this.quill.insertText(5, 'Quill', {
                  //                                             'color': 'red',
                  //                                             'italic': true
                  //                                           }));  
//7.Editor Inside Value Overrides Insert Value (Text) (Location, Content, Format) in Editor Ending with {insert:'\n'}
                  // console.log(this.quill.setContents([
                  //                                       { insert: 'Hello ' },
                  //                                       { insert: 'World!', attributes: { bold: true } },
                  //                                       { insert: '\n' }
                  //                                     ]));  
//8.Editor Inside Value Overwritten
                  // console.log(this.quill.setText('Hello\n'));  
//9.No research, home. vue? 250d: 109 Uncaught Reference Error: 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.Setting the content format in the editor
                    // 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 Get format
                    // 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. Remove format 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 Acquisition area
                      // getBounds(index: Number, length: Number = 0):
                      // Return value {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.Get the location of the mouse 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.");
                        }
                      });

 

Link of this Article: Qull Rich Text Editor API

Leave a Reply

Your email address will not be published. Required fields are marked *