Delta

Deltas是一种简单但富有表现力的格式，可用于描述Quill的内容和变化。 格式是JSON的严格子集，是人类可读的，并且可由机器轻松解析。 Deltas可以描述任何Quill文档，包括所有文本和格式信息，而不会产生HTML的模糊性和复杂性。

不要被其名称混淆Delta-Deltas代表文档和文档更改。 如果您将Deltas视为从一个文档转到另一个文档的指令，则Deltas表示文档的方式是从空文档开始表达指令。

Deltas作为独立的独立库实现，允许在Quill之外使用。 它适用于OT(Operational Transform)，并可用于实时协作，就像Google Docs一样。 有关Deltas的更深入解释，请参阅设计Delta格式。

注意：不建议手动构造Deltas，而是使用可链接的insert()，delete() 和 retain()方法来创建新的Deltas。 您可以使用import（）从Quill访问Delta。

Document

Delta格式几乎是完全不言自明的，下面的例子描述了字符串Gandalf The Grey，其中Gandalf是粗体，灰色是彩色#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应用于空文档时将创建的内容。

由于Deltas是一种数据格式，因此属性密钥对的值没有固有的含义。例如，Delta格式中没有任何内容规定颜色值必须是十六进制 - 这是Quill所做的选择，并且如果需要可以使用Parchment进行修改。

Embeds

对于非文本内容（如图像或公式），插入键可以是对象。 该对象应该有一个键，用于确定其类型。如果您使用Parchment构建自定义内容，这是blotName。像文本一样，嵌入仍然可以有一个属性键来描述要应用于嵌入的格式。所有嵌入的长度都是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-change事件注册一个侦听器时，您将获得的一个参数是描述更改内容的Delta。 除了insert操作之外，此Delta还可能具有delete或retain操作。

Delete

delete操作确切地指示它意味着什么：删除下一个字符数。

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

由于delete操作不包括已删除的内容，因此Delta不可逆。

Retain

retain操作只是意味着保留下一个字符数而不进行修改。 如果指定了attributes，它仍然意味着保留这些字符，但应用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. // }
  9. {
  10.   ops: [
  11.     // Unbold and italicize "Gandalf"
  12.     { retain: 7, attributes: { bold: null, italic: true } },
  14.     // Keep " the " as is
  15.     { retain: 5 },
  17.     // Insert "White" formatted with color #fff
  18.     { insert: "White", attributes: { color: '#fff' } },
  20.     // Delete "Grey"
  21.     { delete: 4 }
  22.   ]
  23. }

请注意，Delta的指令始终从文档的开头开始。 并且由于绝对的retain操作，我们永远不需要为delete或insert操作指定索引。

Playground

原文这里是一个编辑器示例，可以实时操作，打开控制台可以看到每次操作的delta，传送门。