본문 바로가기
개발 Tips

비 주류 WYSIWYG 에디터 선택이 참 어렵죠?

by 건방진참새 2019. 10. 21.

프로젝트 진행할때마다 항상 다시 리서치하는 중 하나가 wysiwyg 에디터 인거같아요.

물론 돈을 들여서 라이센스를 구입하여 사용하면 꾸준히 사용가능한데요,

그또한 비용이 만만치 않습니다.

(개인적으로는 비용보다는 보통 유료 에디터는 너무 덩치가 크고 기능이 많아서 사용하기가 부담스러워서 안쓰는 편)

 

그래서 비용도 들지않고 가장 기본적인 기능만 쓸수 있는 무료 에디터를

몇개 소개해 봅니다. 

 

아래 몇개중 기능이 그래도 제일 잘 되어있는애는 Jodit 입니다.

기능도 많고 대시 너무 무겁지도 않지만 어딘가 모르게 조금 마무리가 안된느낌이 조금 듭니다. 

(전에 프로젝트에 사용했기도 했습니다. 물론 파일업로드 부분은 조금 손을 보고 적용 함)

 

1. Jodit

https://xdsoft.net/jodit/play.html

 

Jodit WYSIWYG editor | Pure TypeScript | FileBrowser and Editor Jodit

Jodit WYSIWYG simple to use rich text editor with best filebrowser and minimal interface

xdsoft.net

2. Simditor

https://simditor.tower.im/

 

Simditor

An Easy and Fast WYSIWYG Editor Demo Docs Extension Download Simditor is a browser-based WYSIWYG text editor. It is used by Tower -- a popular project management web application. Supported Browsers: IE10+、Chrome、Firefox、Safari. Download Zip Install with np

simditor.tower.im

3. SunEditor

http://suneditor.com/sample/html/examples.html

 

SunEditor

Defining menu items SunEditor . create ( 'exampleOptions' , {     font : [         'Arial' ,         'tohoma' ,         'Courier New,Courier'     ],     fontSize : [         8, 10, 14, 18, 24, 36     ],     colorList : [         [ '#ccc', '#dedede', 'Orang

suneditor.com

4. Trumbowyg

https://alex-d.github.io/Trumbowyg/demos/#core-simple

 

Demos | Trumbowyg: A lightweight WYSIWYG editor | Alex-D / Alexandre Demode

 

alex-d.github.io

5. Summernote

(기능이 막강하나 덩치가 자꾸 커져가서 개인적으로는 사용안하고있습니다)

https://summernote.org/examples/

 

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

6. Sir Trevor

(완성된 에디터 라기보다는 기본적인 에디팅 이념? 고수님들 전용, 커스텀에서 사용하기에는 좋은 예제인거같아요)

http://madebymany.github.io/sir-trevor-js/example.html

 

Example | Sir Trevor JS | Made by Many

 

madebymany.github.io

7. Redactor

https://imperavi.com/redactor/

 

Redactor WYSIWYG html editor

Fantastic wysiwyg editor provides smooth and clean design, extensibility, limitless flexibility, super-efficient API and amazing user experience.

imperavi.com

8. Quill

https://quilljs.com/guides/why-quill/

 

Why Quill - Quill

Why Quill Content creation has been at the core to the web since its beginning. The provides a native and essential solution to almost any web application. But at some point you may need to add formatting to text input. This is where rich text editors come

quilljs.com

 

9. Editor.js

https://editorjs.io/

 

Editor.js

A block-styled editor with clean JSON output

editorjs.io

 

이들 외에서 엄청 많은 에디터들이 있습니다.

기능을 우선시 하는 프로젝트는 위 에디터들은 비추 이고 

 

Froala 혹은 CKCKEditor 혹은  Tyny MCE 으로 생각하셔도 좋을 것 같습니다.

 

19-10-21 일 수집