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

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 }

示例

var range = quill.getSelection();
if (range) {
  if (range.length == 0) {
    console.log('User cursor is at index', range.index);
  } else {
    var text = quill.getText(range.index, range.length);
    console.log('User has highlighted: ', text);
  }
} else {
  console.log('User cursor is not in editor');
}

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