CKEditor5 사용자 정의 데이터 프로세서의 모델 사용

Question

CKEDitor5와 함께 놀고 있었고 사용자 정의 데이터 프로세서를 만들려고했습니다. toData 변환에서 모델을 사용하고 싶습니다. 그러나이 메서드는 view/DocumentFragment 개체와 함께 호출됩니다. 그래서 내 질문에 내가 그걸 model/DocumentFragment 개체 (또는 데이터 프로세서에서 모델에 액세스하는 방법)로 변환 할 수 있습니다.

업데이트 (이 코멘트에 맞지 않을 수) : 나를 더 정확히 내가 뭘하려고하는지 설명 해보자 (또는 이미 지금까지 한) 좀 더 상세하게한다. 내가 모델 자체에 액세스하는 방법을 알아 냈지만, 당신이 지적한 것처럼 나쁜 해결책처럼 보였다.

기본적으로 편집기 데이터를 BBCode로 변환하기 위해 DataProcessor을 만들고 싶습니다. 충분히 합리적이라고 생각합니다.

한편, toView 방법은 간단합니다. BBCode에서 HTML 로의 변환이 이미 구현 된 것으로 간주 될 수 있습니다 (필자의 경우). 그리고 HTML에서는 (Markdown 프로세서에서 사용하는 것과 동일한 프로세스로) 편집기 데이터를로드하는 것이 쉽지 않은 것처럼 보입니다.

한편, 뷰가 아닌 모델 데이터에서 BBCode로 변환하는 것이 더 쉬워 보입니다. 주로 view/DocumentFragment 개체와 나머지보기 트리가 DOM 또는 HTML의 또 다른 표현이기 때문입니다. 굵은 글씨가 <b>인지 <strong>인지는 신경 쓰지 않고 단지 text 노드에 bold 속성이 있는지 여부 만 알고 싶습니다.

모델을 사용하여 HTML에서 사용 된 표현보다는 의미론을 사용하기를 바랍니다. 기본적으로 모든 HTML 태그를 BBCode와 동등한 것으로 매핑하는 것은 약간 무의미한 것처럼 보입니다 (CKE5가 일관된 HTML 태그를 제공하더라도 잘 수행 할지라도). 그래서 내 관점에서 볼 때 모델을 사용하는 것이 더 합리적입니다. 의미 론적 표현에서 "데이터 형식"으로 변환하는 것은 "데이터 형식"(보기 트리, DOM, HTML, 모스 부호)으로 변환 한 후 "표현 맵"을 만드는 것보다 쉽습니다.

RTE 또는 WYSIWYG 편집기를 사용하지 못하게 한 이유는 HTML에서 BBCode로 변환하는 데 어려움이있었습니다. 이제 CKE5는 HTML 형식뿐 아니라 편집기에 표시된 HTML과도 독립적이므로 모델로 변환하기 쉽습니다 (이 뷰 트리에 대해서는 정확히 HTML 형식이므로 말할 수 없습니다. 편집자 - 최소한 콘텐츠 제작물이 만들어내는 것은 아니지만 여전히 충분하지는 않습니다.)

또한 : 그가 (어딘가에 문서 단위) 마크 다운 기능을 가지뿐만 아니라 무엇을했다대로 난 그냥의 DataProcessor을 설정하는 Plugin했다. 그게 나쁜 생각이야?

답장을 보내 주셔서 다시 한번 감사드립니다.

Answer 1

최근에 similar question was raised on CKE5 GitHub. 문제는 JSON 데이터를 편집기 출력으로 가져 오는 것입니다.하지만 사용자가 제기 한 주제는 부분적으로 다룹니다. 특정 문제와 모델에 연속 동작으로 연결 위험이 있습니다

데이터 프로세서에서 모델에 액세스하는 방법을

(...). 이것은 권장되는 것이 아닙니다. 링크 된 게시물에 설명되어 있습니다.

(...) 내 질문은 내가 어떻게 그 수로 변환 할 수있다 model/DocumentFragment

이것은 모델에서 똑바로 작동하는 것보다 더 나은 (덜 위험) 접근법입니다. 그러나 물어볼 필요가 있습니다. 왜 모델에서 변환하고 싶습니까? 문제에 대한 더 나은 해결책이있을 수 있습니까?

보기와 모델간에 변환하려면 DataController#toView과 DataController#toModel을 사용해야합니다. DataController 인스턴스는 Editor#data에 있습니다. 이를 데이터 프로세서에서 사용하려면 데이터 프로세서가 에디터 인스턴스에 액세스해야합니다.

CKE5 편집기 클래스 중 하나를 확장하여 고유 한 편집기 클래스를 만드는 것이 좋습니다. 그런 다음 새 편집기 클래스 생성자에서 데이터 프로세서를 덮어 쓰고 편집기 인스턴스도 전달합니다. 다음과 같음 :

class MyEditor extends ClassicEditor { 
    constructor() { 
    this.data.processor = new MyDataProcessor(this); 
    } 
} 

class MyDataProcessor() { 
    constructor(editor) { 
    this._editor = editor; 
    } 

    toData(viewDocumentFragment) { 
    const modelDocumentFragment = this._editor.data.toModel(viewDocumentFragment); 
    // ... 
    } 

    toView(modelData) { 
    // ... 
    this._editor.data.toView(...); 
    // ... 
    } 
} 

다음은 작동/테스트 된 샘플이 아니라 방향을 보여줍니다.

여전히 편집기 출력을 생성하기 위해 뷰가 아닌 모델을 사용해야한다고 주장하는 이유를 알고 싶습니다.

BTW. 계속해서 이와 같이 구현하면 전체 프로세스가 약간 어리 석다. :) 먼저, 모델 데이터를 얻은 다음 (데이터 프로세서에서)보기로 변환 한 다음, 편집기는 뷰 데이터를 가져 와서 모델로 다시 변환합니다 :). 따라서 Editor#setData 메서드를 덮어 쓰는 데 관심이 있으므로 불필요한 변환이 수행되지 않습니다.