blanq 개발일기3 – 웹에디터

웹에디터마다 약간 다르긴 하지만 ios 앱에서 띄우는 과정을 간단히 정리한다.
– 웹에디터 공개 소스 다운로드
– 옵션 수정 및 빌드(패키징)
– 결과물(js파일)을 load하는 html 페이지 생성
– iOS wkwebview 에서 html load
==> 앱 내에서 웹 에디터 표시됨


ckeditor를 예로 들면…

git clone https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install
npm run build

#todoList plugin install, ckeditor5-build-class 폴더에서
npm install –save @ckeditor/ckeditor5-list

src/ckeditor.js에서 추가
import TodoList from ‘@ckeditor/ckeditor5-list/src/todolist’;
ClassicEditor.builtinPlugins = […,        TodoList];
ClassicEditor.defaultConfig = {toolbar: {items: […,’todoList’,…,  ]}};

다시
npm run build

위와 같이 필요한 플러그인 설치까지 해서 빌드하면 최종적으로 만들어진 ckeditor.js 파일과 웹에디터를 로드하는 html파일을 xcode 프로젝트에서 import 한다.

이렇게 해서 앱내에서 웹에디터를 띄웠지만 가장 큰 문제가 체크리스트 관련 문제였다. 최초 뜰때 포커스가 가 있는거 처럼 보인다던지 그냥 웹페이지에서 띄웠을 때와 아주 조금씩 차이가 나서 해당 문제를 해결할 능력이 없는 나는 포기하고 말았다. 다른 웹에디터들도 마찬가지이고 원하는 방향대로 수정하려면 자바스크립트, css 모두 아주 잘 알아야 할거 같다.

웹에디터 체크리스트 기능에 목 매는 이유가 단순 텍스트 에디터로는 체크(불렛)리스트를 지원하지 못해서 리스트 기능이 있는 에디터를 제공하려고 했기 때문에 당연하다.

결론)
힘들게 웹에디터를 그럴듯 하게 앱에 띄웠지만 거기까지임… 여기서 웹에디터 연동은 좌절됨
이후 swift로 에디터를 만들기로 해서 지금은 대부분의 기능이 완성되었음

답글 남기기

이메일 주소는 공개되지 않습니다.