欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

quill富文本编辑器 API

程序员文章站 2022-06-04 13:30:30
...
//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.");
                        }
                      });``
相关标签: api