Quill.js拡張ブラケット/羊皮紙の変更はデルタでキャプチャされていません

Question

私はquill.jsでグリップを得ています - 私はプリセットされたコンテンツでカスタムブロットを作りたいと思っています。中規模クローンガイドからブロック埋め込みブロットを作成する方法を理解しましたが、作成したノードがデルタコンテンツに取り込まれていないことに気付きました。私はスタイル付きdiv内にテキストを設定しました。変更...ダイナミックキャプションなどの場合にもこのプロセスを使用したいと思います。デルタを保存することが重要です。 node.innerText = 'テストテストテスト'は初期の内容を細かく設定しますが、変更はデルタにバインドされていません。

ブロック内にブロットをネストする方法はありますか？どういうわけかデルタでブロットの内容を縛ることができますか？参考になるサンプルコードをお読みいただければ幸いです。ありがとうございました。

class EditModuleBlot extends BlockEmbed { 
    static create(value) { 
    let node = super.create(); 
    node.setAttribute('style', value.style); 
    node.innerText = 'test test test'; 
    return node; 
    } 

    static value(node) { 
    return { 
     style: node.getAttribute('style') 
    }; 
    } 
} 
EditModuleBlot.blotName = 'editmodule'; 
EditModuleBlot.tagName = 'div'; 

、これはそれを呼び出すために私Vue.js方法である：

{ 
    "insert": { 
    "editmodule": { 
     "style": "padding:10px;border: 2px dashed black;" 
    } 
    } 
}, 

*更新* ドン：

clickAddModule() { 
    let range = this.quillInstance.getSelection(true); 
    this.quillInstance.insertText(range.index, '\n', Quill.sources.USER); 
    this.quillInstance.insertEmbed(range.index + 1, 'editmodule', { 
    style: 'padding:10px;border: 2px dashed black;' 
    }, Quill.sources.USER); 
    this.quillInstance.setSelection(range.index + 2, Quill.sources.SILENT); 
} 

デルタJSONはのdivのinnerTextをキャプチャしていませんブロックエクステンションにquillを使用しないで、正しく処理しない--- Slate.jsまたはProse MirrorまたはCkEditorを使用する

Answer 1

ちょっとわかりましたが、innerText値でvalueメソッドを拡張する必要がありますが、一般的に私はquill.jsが偉大なエディタではないと判断しました。私はQuillの問題によって多少誤解を感じます。深刻なアーキテクチャ上の間違いにより、拡張が非常に難しく、私は彼らがそれらを解決することができるとは確信していません。これらの問題への参照を体系的に取り除き、1500件近い問題を解決しましたが、また、問題を投稿するユーザーをブロックする--- Quillはブロック内のブロックを処理しないため、テーブルなどの拡張機能を使用できなくなります。デルタフォーマットではブロック内のブレークも適切に処理されないため、私はSlate.jsやProse Mirrorを見てみることをお勧めします。彼らは完全ではありませんが、決定的に同じミスを犯さず、ファーストクラスのデータモデルを持っています。

ここでは、クイルの修正コードはありますが、可能であれば、それ以外のものを使用してください。

class EditModuleBlot extends BlockEmbed { 
    static create(value) { 
    let node = super.create(); 
    node.setAttribute('style', value.style); 
    node.innerText = 'test test test'; 

    return node; 
    } 

    static value(node) { 
    return { 
     style: node.getAttribute('style'), 
     text: node.innerText //now text will show up in the delta 
    }; 
    } 
}