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