NHN에서 옛날에 스마트 에디터라는 것을 공개한 적이 있는데....
너무 옛날 꺼라 그냥 쓰기 안 좋아 쓴 적이 없습니다.
그런데 어느 날 보니 완전 다른 에디터를 공개했군요.
심지어 마크다운과 위지웍을 동시에 지원!!
1. 간단하게 사용하기
도큐먼트가 애매하게 친절해서 빌드 없이 쓰는게 힘들게 돼있어서 따로 정리합니다.
1-1. 참조 추가하기 - CSS
"codemirror"에 CSS의존성이 있으므로 추가해야 합니다.
1 2 3 | <!-- Toast Editor 2.0.0과 의존성 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css" /> <link rel="stylesheet" href="https://uicdn.toast.com/editor/2.0.0/toastui-editor.min.css" /> | cs |
1-2. 참조 추가하기 - Javascript
기능에 따라 필요한 것만 로드하면 되지만......
귀찮으니 그냥 All버전 하나만 로드하면 됩니다.
1 2 | <!-- Toast Editor 2.0.0 --> <script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script> | cs |
1-3. 사용하기
(참고 : 설치와 기본기능 사용 )
1 2 3 4 5 6 | const editor = new toastui.Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', initialValue: content }); | cs |
2. 기능 사용하기
웹 텍스트 에디터를 사용하려면
에디터의 내용을 가지고 오는 기능과
에디터에 데이터를 넣어주는 기능은 사용해야 합니다.
(참고 : Toast UI Editor pepo - Class)
1 2 3 4 5 6 7 | //데이터 불러오기 //예> editor.getMarkdown() [object].getMarkdown(); //데이터 불러오기 //예> viewer.setMarkdown() [object].setMarkdown(); | cs |
마크다운 가져오기 : getMarkdown()
Html 가져오기 : getHtml()
마크다운 넣기 : setMarkdown()
Html 넣기 : setHtml()
3. 뷰어 기능 사용하기
에디터에도 뷰어 기능이 들어 있습니다.
개체를 생성할 때 'toastui.Editor.factory'로 생성하고
'viewer'옵션을 'true'로 줍니다.
1 2 3 4 5 6 | const viewer = toastui.Editor.factory({ el: document.querySelector('#viewer'), viewer: true, height: '500px', initialValue: content }); | cs |
실행해보면 뷰어도 잘 동작합니다.
마무리
테스트용 페이지 : dang-gun.github.io/ToastEditor2_Test/1_EditorOrViewer.html(새창)
도큐먼트가.....뭔가 나사가 빠져있습니다 ㅋㅋㅋㅋ
잘돼있는거 같으면서도 정작 필요한 거 찾으려면 구글에서 검색해서 들어가야 합니다.
한글 메뉴얼 없는 건 둘째치고 말이죠.
그래도 기능이 좋아서 다 커버됩니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
2020-07-17 : 추가
몇 달 써보고 느낀 것을 정리합니다.
쓰면 쓸수록 단점이 너무 명확해서 쓸 수가 없네요 ㅎㅎㅎㅎ
1) 위키같이 사용자에게 제한사항을 강력하게 줄 때는 쓸만하지만
일반적인 커뮤니티 사이트와 같이 다양한 조건에 따라 제한사항이 필요할 때는 비추합니다.
2) 에디터 내부에서 커스텀이 힘듭니다.
자체적으로 지원하는 방식이 있는데......
이방식을 사용하면 위지웍 화면에서 커스텀 기능이 바로 보이지 않아 직관성이 엄청 떨어집니다.
대표적으로 유튜브인데 예제로 지원되는 커스텀 기능인데도 위지웍 화면에 표시되지 않습니다.
3) 기능 만들기가 힘듭니다.
2번과 연결된 문제로 자체적인 방식으로만 플러그인을 만들어 붙이고 관리해야 하다 보니 원하는 기능을 구현하려면 각종 꼼수를 동원해야 합니다.
결국 리플레이스로 어떻게든 구현하는 것이죠.
4) 다른 툴과 호환성이 안 좋다.
3번과 이어지는 내용으로 결국 여러 툴과 공통된 방식의 기능을 넣기가 힘듭니다.
결국 토스트 에디터가 자랑하는 마크업 기능을 포기하고 html로 출력하여 별도로 리플레이스로 처리해야 합니다.
5) 재수정이 힘들다.
4번과 연결되는 문제로 이렇게 리플레이스하여 기능을 구현했다고 해도
수정한 결과를 토스트 에디터에 입력하면 다시 3번, 4번 문제가 발생합니다.
결론 -
위키나 내부 쪽지같이 개발자가 기능을 강력하게 통제해야 경우에만 쓰자.
버전 이 4.0쯤될 때 쯤 한번 다시 봐야겠다.
