웹 글쓰기 에디터

그누보드·영카트에서 쓰는 스마트에디터 2를 비롯해 CKEditor, TinyMCE, Summernote, Quill, Toast UI Editor 등 웹사이트에 넣는 글쓰기 에디터를 모았다.

TOP 6

웹사이트·게시판의 입력 영역에 넣어 쓰는 WYSIWYG, 마크다운, 블록형·헤드리스 에디터를 모았습니다. 코드 에디터와 설치형 문서 프로그램은 범위에 넣지 않았습니다.

웹 글쓰기 에디터는 웹페이지의 입력 영역에서 글꼴, 정렬, 이미지 삽입 같은 서식을 적용하며 글을 작성할 수 있게 해주는 편집 컴포넌트입니다. 게시판·쇼핑몰·관리자 화면에 넣어 쓰는 WYSIWYG, 마크다운, 블록형, 헤드리스 유형이 있습니다.

유형	설명	대표 에디터
WYSIWYG	서식을 화면에서 바로 확인하며 편집, HTML 출력	SmartEditor 2, CKEditor, TinyMCE, Summernote, Quill, Froala
마크다운	마크다운 문법으로 작성, 미리보기 제공	EasyMDE, TOAST UI Editor
블록형	문단·이미지·목록을 블록 단위로 편집, JSON 출력	Editor.js
헤드리스	편집 기능만 제공하고 화면은 직접 구성	Tiptap, Lexical

아래 순서로 코드를 넣으면 글쓰기 기본 글꼴이 맑은 고딕 10pt로 바뀝니다. 줄 번호는 배포·버전에 따라 달라질 수 있으니, 같은 파일에서 에디터 초기화 구문 근처를 확인한 뒤 삽입합니다.

if (oEditors.getById["wr_content"])
oEditors.getById["wr_content"].setDefaultFont( "맑은 고딕", 10 );

그누보드 스마트에디터 2 기본 글꼴 설정 화면

기본 글꼴을 바꾸는 위치는 에디터마다 다릅니다. SmartEditor 2는 글에서 확인한 setDefaultFont 호출이고, 나머지는 공식 문서의 초기화 옵션을 기준으로 합니다.

에디터	설정 방식	비고
SmartEditor 2	setDefaultFont 함수 호출	config.js에 삽입하는 방식
TinyMCE	초기화 옵션(content_style, font_family_formats)	공식 문서 확인
CKEditor	초기화 옵션(fontFamily)	공식 문서 확인
Summernote	초기화 옵션(fontNames)	공식 문서 확인
그 외 에디터	에디터 본문 CSS 또는 초기화 옵션	공식 문서 확인

게시판·쇼핑몰·프레임워크 앱에 넣을 때 아래 항목을 같이 보면 됩니다. CMS 본체 선택은 홈페이지 제작 CMS 모음을 참고합니다.

기준	확인 항목
적용 환경	CMS 플러그인 연동, 자바스크립트 프레임워크 지원, jQuery 의존 여부
출력 형식	HTML, 마크다운, JSON
이미지·파일	이미지 업로드 방식, 서버 연동
한글 입력	한글 입력(IME) 동작, 한글 폰트 지정
라이선스	오픈소스 / 상용, 상업 사용 조건
유지 상태	최신 릴리스 시점, 저장소 활동

26.10.04수정26.10.1227