안녕하세요. 린치핀소프트 한광희입니다.

“TinyMce Advanced 플러그인 소개”

저는 블로그 포스트나 페이지를 작성할때 워드프레스의 기본 wysiwyg 에디터가 참 편리하다고 느낄때가 있습니다. 여기서 wysiwyg 에디터란 “What You See Is What You Get”의 문장의 각 단어 첫글자를 따서 wysiwyg 라고 명칭하며 일반 이용자에게 보여지는 글의 모습을 확인할 수 있고 해당 텍스트의 모양/글의 배치 등을 직접적으로 글쓴이가 편집할 수 있는 에디터라고 할 수 있습니다. 우리에게 익숙한 많은 워드프로세서나 문서편집기등도 wysiwyg 에디터 기능을 기본적으로 지원한다고 할 수 있지요.

그래서 우리는 포스트를 작성할때 직관적으로 자신이 작성하는 글의 모양과 배치를 확인할수 있게끔 에디터를 구성하여 작성하며 워드프레스 에디터에서는 “비주얼” 탭을 클릭하여 작성하면 편리합니다.

하지만 워드프레스 에디터의 몇몇 편리한 기능에도 불구하고 일반적인 한글,워드와 같은 강력한 기능의 워드프로세서 프로그램에 비해 아쉬운점이 있었습니다.

저 같은 경우 가장 아쉬운 점이 “들여쓰기”,”글의 배경색”,”다양한 폰트 사이즈 지정”,”프로그래밍 소스코드 디자인 분리” 등이 많이 아쉬웠습니다.

그래서 오늘은 TinyMce Advanced 플러그인을 통해 에디터에 많은 기능을 추가하도록 해보겠습니다.

screenshot-wordpress.org 2015-08-19 08-52-07

<TinyMCE Advanced 플러그인 홈페이지>

TinyMCE Advanced 플러그인은 워드프레스환경에서는 이미 굉장히 유명하며 하루에도 3,000건 이상의 다운로드가 이루어질 정도로 범용적인 플러그인이 되었습니다.

거기다 설정하는 방법도 아주 간단하고 강력한 기능을 지원합니다. 워드프레스 관리자 페이지 플러그인에서 “TinyMCE Advanced” 검색 설치하실수도 있고, https://wordpress.org/plugins/tinymce-advanced/ 에서 다운로드 받으실수 있습니다.

1. TinyMCE Advanced 설정 화면

screenshot-www.linchpinsoft.com 2015-08-19 08-53-14

<플러그인 설치후 설정 -> TinyMCE Advanced 메뉴를 통해 환경설정>

screenshot-www.linchpinsoft.com 2015-08-19 08-58-54

<플러그인 환경설정을 통해 필요기능을 툴바에 추가하는 화면>

플러그인을 설치후 “설정” -> “TinyMCE Advanced” 메뉴를 통해 플러그인의 기능을 추가할수 있습니다. 이때 설정은 위의 화면 중”Unused Buttons”의 버튼중에 자신이 사용할 버튼을 드래그&드롭하여 위의 “행(툴바)”에 추가하는것입니다.

TinyMCE Advanced 플러그인은 포스트와 페이지 모두 적용되므로 필용한 기능을 위의 행에 추가하시면 됩니다.

2. 포스트/페이지 작성시 TinyMCE Advanced 적용 화면

screenshot-yangryeong1.cafe24.com 2015-08-19 09-03-25

<TinyMCE Advanced 플러그인 설치전 기본 wysiwyg 에디터 화면>

screenshot-www.linchpinsoft.com 2015-08-19 09-01-00

<TinyMCE Advanced  적용된 에디터>

screenshot-www.linchpinsoft.com 2015-08-19 09-06-42

<다양한 TinyMCE Advanced 기능>

TinyMCE Advanced 플러그인을 설정화면을 통해 기능을 추가하고 저장을 하면 그외의 사항을 설정할 필요는 없습니다. 포스트/페이지를 작성하는 편집화면을 들어가면 위처럼 플러그인이 자동적용된 모습을 볼수 있습니다.

혹시 추가된 기능들이 보여지지 않는다면 보통은 “툴바 토글”버튼을 클릭하면 하단에 “행”들이 보여지게 됩니다. 하단 행에서 추가등록한 기능들이 보여지게 됩니다. 아이콘 버튼들의 위치나 정렬도 설정화면에서 드래그&드롭으로 변경할 수 있습니다.