quill深入浅出

背景分析/技術選択
quillAPI駆動設計、カスタムコンテンツとフォーマット、プラットフォーム間で、使いやすい.
CKEditorは機能が強く、配置が柔軟で、uiがきれいで、互換性が悪い.
TinyMCEドキュメントは良くて、機能は強くて、bugは少なくて、外部の依存がありません.
Ueditorは機能はそろっていますが、メンテナンスはされておらず、jqueryに依存してカスタマイズが複雑です.
きのうぶんせき
一般的な機能

基本テキスト編集機能(太字、斜体、フォントサイズ、色など)

ワードからコピーして貼り付けてフォーマットを保つ

やり直し取り消し

拡張能力(カスタムtoolbar、プラグイン(コンテンツの拡張性)

プレミアム機能(数式、表など)

こうぞうぶんせき
ディレクトリ構造

- quill.js
- core.js
- blots/
    - block.js
    - break.js
    - container.js
    - cursor.js
    - embed.js
    - inline.js
    - scroll.js
    - text.js
- core/
    - editor.js
    - emitter.js
    - instance.js
    - logger.js
    - module.js
    - quill.js
    - selection.js
    - theme.js
- formats/
    - align.js
    - background.js
    - blockquote.js
    - bold.js
    - code.js
    - color.js
    - direction.js
    - font.js
    - formula.js
    - header.js
    - image.js
    - indent.js
    - italic.js
    - link.js
    - list.js
    - script.js
    - size.js
    - strike.js
    - table.js
    - underline.js
    - video.js
- modules/
    - clipboard.js    （    ）
    - history.js     
    - keyboard.js      ，    
    - syntax.js        ，  highlight.js
    - table.js   
    - toolbar.js    （     ，   html    ，     handlers）
    - uploader.js
- themes/
    - base.js
    - bubble.js
    - snow.js
- ui/
    - color-picker.js
    - icon.picker.js
    - icons.js
    - picker.js
    - tooltip.js

重要なのはquill.js, core.js, core/editor.js, core/quill.js, formats/, blots/これらのディレクトリとファイルです.
Quillとparchmentの関係
Quillのblots【block, break, container, cursor, embed, inline, scroll, text】formatsの【blockquote, bold, code, formula, header, image, italic, link, list, script, strike, table, underline, video】主にparchmentが外部に提供する基礎Blotを利用して継承可能なBlot親とする
formatsの【align, background, color, direction, font, indent, size】parchmentで提供されている【Attributor, ClassAttributor, StyleAttributor】スタイルを制御する
parchmentが提供するRegistryはblotとformatの登録に使用されます.
QuillとDeltaの関係
deltaはドキュメントを表すとともに、ドキュメントの変更を表す.
deltaはコンテンツ修正を記述するデータ構造として,ユーザ操作とDOM修正との間の言語の役割を担う.
deltaはまた、エディタの現在のコンテンツの表現(データソース)として機能します.
難点
dom変更後、deltaに同期するにはどうすればいいですか?
簡易フロー:dom mutations -> deltaScrollBlotは、最上位レベルのContainerBlot、すなわちroot Blotであり、すべてのblotsをラップし、エディタ内のコンテンツの変化を管理します.ScrollBlotは、DOM更新を監視するためにMutationObserverを作成します.DOM更新時にScrolBlotのupdateメソッドが呼び出されます.Quillのscroll blotでupdateメソッドを書き換えたが、そのうち SCROLL_UPDATE mutations .

if (mutations.length > 0) {
  this.emitter.emit(Emitter.events.SCROLL_UPDATE, source, mutations);
}

その後editor SCROLL_UPDATE 、editorのupdateメソッドをトリガーし、mutationsパラメータを入力し、editorのupdateメソッドでは mutations delta 、既存のdeltaとマージし、現在のdeltaを最新のままにします.

// core/quill.js
//   dom      SCROLL_UPDATE  
this.emitter.on(Emitter.events.SCROLL_UPDATE, (source, mutations) => {
  const oldRange = this.selection.lastRange;
  const [newRange] = this.selection.getRange();
  const selectionInfo =
    oldRange && newRange ? { oldRange, newRange } : undefined;
  modify.call(
    this,
    //   mutations     editor   delta
    () => this.editor.update(null, mutations, selectionInfo),
    source,
  );
});

// core/editor.js
//   this.delta   
update(change, mutations = [], selectionInfo = undefined) {
    //...some code
    
    return change;
}

deltaが変更された後、domに同期するにはどうすればいいですか?
簡易フロー:delta -> blots -> dom例えばこのAPI;setContents(delta: Delta, source: String = 'api'): Delta
setContentsがdeltaに転送されると、 delta , Blot, Attributor， DOM 、format
簡易ソースプロセス:

quill.setContents -> this.editor.applyDelta -> this.scroll.formatAt

ビジネス実践
vue-quill-practiceのsrc/components/RichTextEditor/index.vueいくつかの例を示しますが、ビジネスコードから出されているため依存するものが多くなく、実行できません.参考までに、考え方を提供します.
主な機能

magicUrl(urlテキストは自動的にurlリンクに変換され、クリックしてジャンプ可能)

imageDrop(画像ドラッグ＆ドロップ、コピー＆ペーストアップロード)

imageResize(画像ズーム、水平位置調整)

mention(@人)

プレビューモードクリック画像自動弾層拡大表示(v-viewer依存)

linkボタン動作をカスタマイズし、ポップアップウィンドウをクリックしてリンク名とurlを記入し、確定したらエディタを挿入する

イメージボタン動作をカスタマイズし、クリックして画像を選択してアップロードする

カスタムQuote Blot(企業微信のような参照ブロック)

エコロジー
ドキュメント:公式ドキュメント、github、中国語ドキュメント(翻訳された人がいますが、翻訳が下手なので、公式のものを直接見ましょう)プラグイン:https://github.com/quilljs/aw...結合vue:vue-quill-editor結合react:react-quill
参考資料
quilljsを深く理解する github quill