quill-delta

概念介绍

Delta是一种用来描述内容和修改的基于JSON的格式。可以描述任意的富文本文档，包括文本和格式化信息。Delta既表示文档，也表示文档修改。

一个Delta由一组描述文档修改的操作构成，通常是`insert, delete, retain。操作都是描述在当前索引的修改。

Delta是用户操作的数据化表示，一个delta对象和一种DOM结构有唯一的双向对应关系。

官方示例

例子简单易懂，其实就是使用JSON来描述我们的行为。

// Document with text "Gandalf the Grey"
// with "Gandalf" bolded, and "Grey" in grey
var delta = new Delta([
  { insert: 'Gandalf', attributes: { bold: true } },
  { insert: ' the ' },
  { insert: 'Grey', attributes: { color: '#ccc' } }
]);

// Change intended to be applied to above:
// Keep the first 12 characters, delete the next 4,
// and insert a white 'White'
var death = new Delta().retain(12)
                       .delete(4)
                       .insert('White', { color: '#fff' });
// {
//   ops: [
//     { retain: 12 },
//     { delete: 4 },
//     { insert: 'White', attributes: { color: '#fff' } }
//   ]
// }

// Applying the above:
var restored = delta.compose(death);
// {
//   ops: [
//     { insert: 'Gandalf ', attributes: { bold: true } },
//     { insert: 'the ' },
//     { insert: 'White', attributes: { color: '#fff' } }
//   ]
// }

常用API

主要是insert, delete, retain这三种简单操作。
其他的API都是对一个或多个delta进行的复杂操作，直接看官方文档即可。

insert

可以插入文本，或者 embed元素(内嵌元素)

// Insert a bolded "Text"
{ insert: "Text", attributes: { bold: true } }

// Insert a link
{ insert: "Google", attributes: { link: 'https://www.google.com' } }

// Insert an embed
{
  insert: { image: 'https://octodex.github.com/images/labtocat.png' },
  attributes: { alt: "Lab Octocat" }
}

// Insert another embed
{
  insert: { video: 'https://www.youtube.com/watch?v=dMH0bHeiRNg' },
  attributes: {
    width: 420,
    height: 315
  }
}

delete

// Delete the next 10 characters
{ delete: 10 }

retain

// Keep the next 5 characters
{ retain: 5 }

// Keep and bold the next 5 characters
{ retain: 5, attributes: { bold: true } }

// Keep and unbold the next 5 characters
// More specifically, remove the bold key in the attributes Object
// in the next 5 characters
{ retain: 5, attributes: { bold: null } }

参考资料

https://github.com/quilljs/delta

https://quilljs.com/guides/de...

https://quilljs.com/docs/delta/