-
[CKEditor5+React] html element에 attribute 추가하기ckeditor 2020. 10. 4. 16:59반응형
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에서 생성하는 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
반응형'ckeditor' 카테고리의 다른 글
[CKEditor5+React] Image & File upload 기능 (2) 2020.09.29 [CKEditor5+React] Troubleshooting (0) 2020.09.29 [CKEditor5+React] create-react-app으로 생성된 project에 ckeditor5를 추가하는 방법 (3) 2020.09.29