[CKEditor5+React] html element에 attribute 추가하기

Project를 진행하면서 upload한 file에 tooltip으로 uploader를 보여주는 요구사항이 있었습니다.

쉽게 구현하기 위하여 하기와 같이 html <a> tag에 title를 추가하는 방식으로 tooltip을 보여주기로 하였습니다.

<a href="/uploadFile/test.txt" title="bloodSeeker">test.txt</a>

하기 CKEditor official document에서 attribute 추가하는 방법을 설명하였습니다.

ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-preserving-custom-content.html

Preserving custom content - CKEditor 5 Documentation

CKEditor에서 생성하는 html tag에 attribute를 추가하려면 새로운 plugin을 만들어야 합니다.

이때 해당 plugin은 하기와 같이 3가지 일을 해야 합니다.

• attribute regist: "title" attribute가 CKEditor의 "$text" model에서 인식할 수 있도록 regist해야 함.
• downcast: CKEditor에서 생성한 element를 html tag로 변경할 때 "title" attribute도 포함해서 변경해야 함.
• upcast: \html <a> tag를 CKEditor의 element로 변경 시 "title" attribute를 포함해서 변경해야 함.

plugin 코드는 다음과 같습니다.

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";


class LinkTitle extends Plugin {
    init() {
      const editor = this.editor;
  	
      //titleTarget이라는 attribute를 $text model schema에 추가함
      editor.model.schema.extend("$text", { allowAttributes: "titleTarget" });
  
	  //$text model를 html tag로 변경 시 titleTarget 값을 <a> tag의 title attribute로 설정.
      //여기서 view는 html tag로 변경했을 때 보여지는 형태를 말하고 model은 CKEditor에서
      //인식하는 형태를 가리킴.
      editor.conversion.for("downcast").attributeToElement({
        model: "titleTarget",
        view: (attributeValue, { writer }) => {
          const titleElement = writer.createAttributeElement(
            "a",
            { title: attributeValue },
            { priority: 5 }
          );
          writer.setCustomProperty("link", true, titleElement);
  
          return titleElement;
        },
        converterPriority: "low",
      });
  
      //html <a> tag의 title attribute를 CKEditor의 titleTarget element로 변경.
      editor.conversion.for("upcast").attributeToAttribute({
        view: {
          name: "a",
          key: "title",
        },
        model: "titleTarget",
        converterPriority: "low",
      });
    }
  }

  export default LinkTitle;

 

source code: github.com/quanjichun/ckeditor-react-integrate