2015년 5월 14일 목요일

CKEDITOR fakeelement 를 이용하여 widget 형식으로 사용하기

CKEDITOR fakeelement 를 이용하여 widget 형식으로 사용하기 

ckeditor 를 사용하다가 사용자가 만든 custom element (혹은 custom tag 이하 cutom element) 를 화면에 보여주고 수정하려면 widget 과 fakeelement 를 사용하는 방법이 있습니다. 이중 widget 은 fakeelement 보다 상대적으로 복잡한듯 하고 수정이 쉽지 않아서 fakeelement 를 widget 처럼 사용할 수 있는 플러그인을 만드는 법을 구상하였습니다.

1. CKEDITOR 가 있는 index.html 파일을 생성합니다. jquery 는 style 이나 class, attribute 를 수정하기 편하여 사용하였으나 사용하지 않아도 무관합니다.


index.html


2. \plugins\  폴더 아래에 fakeWidget 폴더를 생성하고 그 안에 plugin.js 파일을 생성합니다.

3. plugin.js 의 기본 틀을 작성합니다.

plugin.js


4. config.js 파일을 추가합니다. 이 파일은 ckeditor 의 옵션들을 설정해주는 기능을 합니다.
아래 코드에 지금 만드는 fakeWidget plugin 을 ckeditor 에서 사용하게 등록시켜주는 코드를 넣었습니다.


config.js



여기까지가 기본적인 에디터 등록 방법이었습니다. 이제부터 플러그인 개발 시작입니다.

5. 기본적으로 ckeditor 에서는 ckeditor 에서 허용하는 element 외의 element 들은 모두 제거해버리고 children 이 있다면 <p> tag 로 children 을 감싸게 됩니다. 그러므로 custom element 를 지우지 않고 ckeditor 에서 사용하려면 config.extraAllowedContent 를 이용하여 새 규칙을 등록하면 됩니다.


config.js



여기까지 작업한 뒤 아래 사진처럼 코드를 넣어보면, <fakewidget> element 가 지워지지 않는 것을 볼 수 있습니다.




6. 이제 <fakewidget> element 를 getData() 로 editor 의 값을 가져올 때와 다르게 화면상에선 img 나 div 등으로 변환해서 보여주기 위해 editor.dataProcessor.dataFilter 를 사용합니다.
우리는 fakewidget 이라는 element 를 걸러내서 다른 element 로 바꿔야 하기 때문에, fakewidget 이라는 element 를 새 규칙으로 등록합니다.


plugin.js


7. 다음으로 <fakewidget> 를 editor.createFakeParserElement 를 사용하여 원하는 element 로 에디터 화면에 보여지게 합니다. 예제는 div 안에 img 와 div 가 있는 element 들을 만들겠습니다.


plugin.js



여기까지 하셨다면 <fakewidget>가 아래 화면처럼 보여 지게 되고, getData() 시, <div> 가 아닌 <fakewidget>abcd</fakewidget> 값을 가져오게 됩니다.




다음 글에선 http://ckeditor.com/demo#widgets 공식사이트의 widget 처럼 동작하는데 필요한 기능들을 따로따로 추가하겠습니다.



1. fakeWidget 에 focus 가 가면 파란색 테두리생성(키보드로 작업중 focus가 갔을 때와 마우스로 클릭했을 때 )

2. fakeWidget 상단에 drag 아이콘추가한뒤 해당 아이콘을 드레그하면 그 위치로 이동

3. <fakewidget>내용</fakewidget> 내용 수정시 화면에 보여지는 fakeelement에 실시간 반영되는 기능.

4. 더블클릭 시 팝업띄우고 해당 fakewidget 내용 수정기능.




참고사이트
http://docs.ckeditor.com/#!/api

http://keditor.com/demo