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를 보길 권합니다. 그들은 완전하지는 않지만 결정적으로 동일한 실수를 저 지르지 않았고, 일류 데이터 모델을 가지고 있습니다 ...

다음은 quill에 대한 수정 코드입니다. 가능하면 다른 것을 사용하십시오.

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 
    }; 
    } 
}