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 는 하나 이상 의 dela 에 대한 복잡 한 조작 으로 공식 문 서 를 직접 보면 된다.
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/