Delta

Deltas是一种简单而富有表现力的格式,可以用来描述Quill的内容和改变。这种格式本质上是JSON,是人类可读的,也很容易被机器解析。Deltas可以描述任何Quill文档,包括所有的文本和格式信息,其中没有HTML的歧义和复杂性。

不要混淆它的名字Delta-Deltas代表文档和文档的变化。如果你Deltas是一个文档到另一个文档的说明,Deltas代表文档的方式是通过一个空文档开始说明的。

Deltas是作为一个独立库实现的,允许在Quill之外使用。它适用于操作转换,可以实时使用像Google Docs一样的应用程序。有关Deltas的更深入解释,请参阅Delta格式的设计

注意:不建议手动构建Deltas,可以使用链式方法insert()delete()retain()调用来创建新的Deltas。

文档

Delta的格式是显而易见的,例如下面的例子:”Gandalf the Grey”的字符串其中”Gandalf”加粗,”Grey”的颜色是#cccccc

  1. {
  2. ops: [
  3. { insert: 'Gandalf', attributes: { bold: true } },
  4. { insert: ' the ' },
  5. { insert: 'Grey', attributes: { color: '#cccccc' } }
  6. ]
  7. }

正如名字所表达的那样,描述内容对于Deltas来说实际上是一个特例。上面的例子很具体的说明了如何插入一个粗体字符‘Gandalf’,一个未格式化的字符串‘the’,和一个颜色为#cccccc的‘Gray’。当使用Deltas来描述文档时,如果将Delta应用于空白文档,则可以将其视为创建的内容。

由于Delta是一种数据格式,因此attribute对应的值,没有固定的意义。例如:Delta格式中没有规定颜色值必须在十六进制中,这个是Quill的选择,如果需要可以使用Parchment进行修改。

Embeds

对于非文本内容(如图像或者公式),插入值可以是对象。该对象应该有一个唯一键,用来确定他的类型。如果你使用Parchment构建自定义内容,则为blotName。与文本类似,embeds仍然可以使用属性键来描述要应用于内容格式。所有的Embeds的长度都为1。

  1. {
  2. ops: [{
  3. // An image link
  4. insert: {
  5. image: 'https://quilljs.com/assets/images/icon.png'
  6. },
  7. attributes: {
  8. link: 'https://quilljs.com'
  9. }
  10. }]
  11. }

行级格式(Line Formatting)

与换行符相关联的属性,描述了该行的格式。

  1. {
  2. ops: [
  3. { insert: 'The Two Towers' },
  4. { insert: '\n', attributes: { header: 1 } },
  5. { insert: 'Aragorn sped on up the hill.\n' }
  6. ]
  7. }

所有的Quill文档都必须以换行符结尾,即使没有格式应用于最后一行。这样,你将始终有一个字符位置来应用行格式。

许多行格式是独占的。例如Quill不允许一行同时作为标题和列表,尽管可以使用Delta格式表示。

改变(changes)

在注册Quill的text-chagne事件时,你会获得一个描述Delta改变了什么的参数。除了insert操作,这个Delta可能有delete或者retain操作。

Delete

删除操作明确的指出它意味着:删除下一个字符数。

  1. {
  2. ops: [
  3. { delete: 10 } // Delete the next 10 characters
  4. ]
  5. }

由于删除操作不包含被删除的内容,因此Delta不可逆。

Retain

保留操作仅仅意味着保留下一个字符数,而不需要修改。如果指定了attributes,它仍然意味着保留这些字符,但应用由属性对象指定的格式。如果属性值为null用户删除指定格式。

以一个‘Gandalf the Grey’的例子开始:

  1. // {
  2. // ops: [
  3. // { insert: 'Gandalf', attributes: { bold: true } },
  4. // { insert: ' the ' },
  5. // { insert: 'Grey', attributes: { color: '#cccccc' } }
  6. // ]
  7. // }
  8. {
  9. ops: [
  10. // Unbold and italicize "Gandalf"
  11. { retain: 7, attributes: { bold: null, italic: true } },
  12. // Keep " the " as is
  13. { retain: 5 },
  14. // Insert "White" formatted with color #fff
  15. { insert: "White", attributes: { color: '#fff' } },
  16. // Delete "Grey"
  17. { delete: 4 }
  18. ]
  19. }

请注意,Delta的说明始终始于文档的开头。由于保留操作的简单性,我们永远不需要为删除或者插入指定索引。