quill.js官方文档(三)【API之Formatting，Selection】

水深无声 2021-07-04 11:54 947阅读 0赞

## `Formatting` ##

### `format` ###

设置用户当前选择文本的格式，返回一个代表变化的`Delta`数据。如果用户当前选择的长度为`0`,只是一个游标，这个格式将被激活，所以用户输入的下一个字符将被应用这个格式。 `Source`可能是 “`user`”、 “`api`” 或者 “`silent`”。当编辑器不可用\[disabled\]\#disable且`source`参数为“`user`”时，调用将被忽略。

**方法**

format(name: String, value: any, source: String = 'api'): Delta

**示例**

quill.format('color', 'red');
    quill.format('align', 'right');

### `formatLine` ###

设置传入范围内所有行的格式，返回代表变化的`Delta`数据。参见`formats`查看可用的格式列表。  
传入行内格式调用将没有效果。传入的参数`value`为`false`则会移除格式。用户的选择状态将不会被保存。`Source`可能是 “`user`”、 “`api`” 或者 “`silent`”。当编辑器不可用\[disabled\]\#disable且`source`参数为“`user`”时，调用将被忽略。

**方法**

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

**示例**

quill.setText('Hello\nWorld!\n');
    
    quill.formatLine(1, 2, 'align', 'right');   // right aligns the first line
    quill.formatLine(4, 4, 'align', 'center');  // center aligns both lines

### `formatText` ###

设置编辑器内文本的格式，返回代表变化的`Delta`数据。对行级别的格式如文本对齐，对准换行符或使用`formatLine`方法。参见`formats`查看可用的格式列表。传入的参数`value`为`false`则会移除格式。用户的选择状态将不会被保存。`Source`可能是 “`user`”、 “`api`” 或者 “`silent`”。当编辑器不可用\[disabled\]\#disable且`source`参数为“`user`”时，调用将被忽略。

**方法**

formatText(index: Number, length: Number, source: String = 'api'): Delta
    formatText(index: Number, length: Number, format: String, value: any,
               source: String = 'api'): Delta
    formatText(index: Number, length: Number, formats: {  [String]: any },
               source: String = 'api'): Delta

**示例**

quill.setText('Hello\nWorld!\n');
    
    quill.formatText(0, 5, 'bold', true);      // bolds 'hello'
    
    quill.formatText(0, 5, {                    // unbolds 'hello' and set its color to blue
      'bold': false,
      'color': 'rgb(0, 0, 255)'
    });
    
    quill.formatText(5, 1, 'align', 'right');  // right aligns the 'hello' line

### `getFormat` ###

返回传入范围内文本的一般格式。要输出格式，在选区范围内的所有文本必须有一个真值。如果有不同的真值，所有真值将作为一个数组输出。如果没有传入范围，将使用用户的当前选区。也可以用于输出当前光标位置的格式。如果没有带参数调用，将使用用户的当前选择区域。

**方法**

getFormat(range: Range = current): {  [String]: any }
    getFormat(index: Number, length: Number = 0): {  [String]: any }

**示例**

quill.setText('Hello World!');
    quill.formatText(0, 2, 'bold', true);
    quill.formatText(1, 2, 'italic', true);
    quill.getFormat(0, 2);   // { bold: true }
    quill.getFormat(1, 1);   // { bold: true, italic: true }
    
    quill.formatText(0, 2, 'color', 'red');
    quill.formatText(2, 1, 'color', 'blue');
    quill.getFormat(0, 3);   // { color: ['red', 'blue'] }
    
    quill.setSelection(3);
    quill.getFormat();       // { italic: true, color: 'blue' }
    
    quill.format('strike', true);
    quill.getFormat();       // { italic: true, color: 'blue', strike: true }
    
    quill.formatLine(0, 1, 'align', 'right');
    quill.getFormat();       // { italic: true, color: 'blue', strike: true,
                             // align: 'right' }

### `removeFormat` ###

移除传入区域所有格式和嵌入对象，返回代表变化的`Delta`数据。如果一行数据的一部分在传入区域内，行格式将会被移除。  
用户的选择区域将不会被保存。`Source`可能是 “`user`”、 “`api`” 或者 “`silent`”。当编辑器不可用\[disabled\]\#disable且`source`参数为“`user`”时，调用将被忽略。

**方法**

removeFormat(index: Number, length: Number, source: String = 'api'): Delta

**示例**

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' } }
    ]);
    
    quill.removeFormat(3, 7);
    // Editor contents are now
    // [
    // { insert: 'Hel', { bold: true } },
    // { insert: 'lo\n\nWo' },
    // { insert: 'rld', { italic: true }},
    // { insert: '\n', { align: 'center' } }
    // ]

--------------------

## `Selection` ##

### `getBounds` ###

返回给定选区相对于编辑器容器的的像素位置和尺寸。用户的当前选区不需要在索引下。用于计算提示框的位置。

**方法**

getBounds(index: Number, length: Number = 0):
      {  left: Number, top: Number, height: Number, width: Number }

**示例**

quill.setText('Hello\nWorld\n');
    quill.getBounds(7);  // Returns { height: 15, width: 0, left: 27, top: 31 }

### `getSelection` ###

计算用户选择的范围，可选是否要求焦点在编辑器上(如果`focus`为`true`，且焦点会一直在编辑器内，且不改变选区)。如果焦点不在编辑器上，将会返回`null`。  
**方法**

getSelection(focus = false): {  index: Number, length: Number }

**示例**

### `setSelection` ###

给定范围设置用户的选区，同时焦点在编辑器上。作为选区传入 `null`，将会使编辑器失去焦点。`Source` 可能是 “`user`”, “`api`”,或者 “`silent`”.

**方法**

setSelection(index: Number, length: Number = 0, source: String = 'api')
    setSelection(range: {  index: Number, length: Number },
                 source: String = 'api')

**示例**

quill.setSelection(0, 5);