시험적으로 라운드 에디터에 API를 추가해보고 있습니다.

Round Editor를 가지고 놀아보고 있는 개발자입니다.

최근에 AI 성능이 좋아지면서, 많은 서드파티 에디터가 나오고 있더군요.

에디터 하나에 기능을 전부 집어넣은 All-In-One 에디터에 대한 수요도 분명하겠지만,

저는 Minimal한 에디터의 수요도 있을 것이라 생각해 필수 기능만 넣어서 만들어 보았습니다.

처음에는 수많은 서드파티가 아까워서 CKEditor 4를 기반으로 만들어진 컴포넌트를 수정없이 지원하는 것을 목표로 잡았었는데요.

기본 엔진 구조 자체가 다르다보니, 한도없이 지원하다보면 사실상 CKEditor를 쓰는게 나은 수준까지 들어가더군요.

차라리 CKEditor 호환은 적절히 지원하는 대신, Round Editor 자체의 API를 설계하고, 그 쪽으로 새로운 연동방식을 제공하는게 장기적으로 좋아보였습니다.

따라서 기존 CKEditor 4에서 지원하던 단순 html 입력을 넘어서, 에디터 입력 자체를 제어하고, 상단에 원하는 버튼, 단축키, 액션을 자유롭게 추가하는 범용 API를 설계하게 되었습니다.

+) 요샌 AI가 좋으니, 대충 설계문서 던지고 연동해달라고 하면 잘 연동해주리라는 기대로 시작했습니다.

개발 문서

https://github.com/Waterticket/rx-editor-roundeditor/tree/main/docs

기본적으로 제가 설계한 API는 크게 통합 API, 확장 API로 구분됩니다.

통합 API는 기존에 CKEditor 4에서 지원했던 것처럼, 단순히 값을 읽고, 넣는정도의 작업을 진행하는 경우 사용할 수 있는 간단한 API입니다.

대부분의 현재 구현된 에디터 컴포넌트나, 간단히 치환이 필요한 모듈 같은 곳에서 사용할 수 있을겁니다.

확장 API는 에디터에 직접적으로 연동해서, 툴바, 단축키, 문자/파일 붙여넣기 등 트리거에 맞춰서 원하는 액션을 진행하게 할 수 있습니다.

대표적인 예시로 스티커 모듈이 있습니다.

https://github.com/Waterticket/rx-module-sticker/tree/master/assets/roundeditor

전용 라이믹스 트리거를 통해서 js를 로드하면, js에서 에디터에 액션을 등록하는 형태입니다.

https://github.com/Waterticket/rx-module-sticker/blob/e152d401e6459061b1a4606d7faed01c21e57a29/controllers/EventHandlers.php#L34

아마 기존에 있는 모듈/에디터 컴포넌트도 개발 문서와 함께 API를 추가해달라고 요청하면 잘 추가해주지 않을까 싶습니다.

흥미있으신분들은 사용해보시고, 개선 후기가 있다면 알려주세요!

아직 릴리즈는 만들지 않았으며, github 최신 버전으로 받아보실 수 있습니다.

+) 한가지 흠이라면, 에디터 최초 로드시에 약간의 딜레이가 보인다는 점인데..

한번 로드되면 불편함은 없으니 차차 개선해봐야할 것 같네요.