Skip to content

WYSIWYG #
Find similar titles

Structured data

Category
Programming

WYSIWYG (위즈윅) #

'WIZ-zee-wig(위즈윅)'으로 발음하며 'what you see is what you get'을 줄여 부른 말이다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말한다. WISIWYG 어플리케이션에서는 사용자가 화면에서 본 것과 출력했을 때의 프린트물이 동일하게 생성된다. 주로 데스크탑 퍼블리싱 시스템에서 많이 이용된다.

WYSIWYG 에디터 #

WYSIWYG 에디터는 편집화면에서 입력한 글자, 그림 등의 컨텐츠 모양 그대로 최종산물이 화면상에서, 또는 출력물에서 나타나도록 하는 에디터 이다. 최초의 위지윅 에디터는 1970년대에 Xerox Palo Alto Research Center의 Charles Simonyi에 의해 발명된 Bravo 이다. 후에 Simonyi는 Microsoft에서 WYSIWYG 어플리케이션인 MS Word와 Excel을 개발하였다.

WYSIWYG 에디터는 크게 desktop-based와 JavaScript-based로 나눌 수 있다. Adobe Dreamweaver, Amaya 등과 같이 운영체제 상에서 동작하는 에디터가 desktop-based 이고, TinyMCE, FCKeditor 등과 같이 웹 상에서 동작하는 에디터가 JavaScript-based WYSIWYG 에디터이다.

다음은 주요 JavaScript-based WYSIWYG 에디터이다.

# 이름 특징 URL
1 Froala WYSIWYG HTML Editor 심플한 디자인, 웹 호완성 좋음 https://froala.com/wysiwyg-editor
2 FCKeditor 가장 유명한 에디터 중 하나, 데스크탑 에디터의 특성을 가져옴, 다양한 프로그래밍 언어와 완벽한 통합 팩 제공 http://ckeditor.com/
3 TinyMCE LGPL 라이센스의 온라인 위지윅 에디터 http://www.tinymce.com/
4 jwysiwyg 매우 가볍고 심플한 JQuery 위지윅 플러그인 https://github.com/akzhan/jwysiwyg
5 Xinha 모든 브라우저에서 작동함, 오픈소스 http://trac.xinha.org/
6 alohaedior http://www.alohaeditor.org/

WYSIWYG 에디터 사용 #

CKEditor 사용 #

  1. 사이트(https://ckeditor.com/)에 접속해서 원하는 버전을 선택한다.
  2. 원하는 패키지를 선택한 후, 패키지를 다운로드 받을지 CDN으로 사용할지 선택한다.
  3. 패키지로 다운로드 받았을 시 아래와 같이 ckeditor.js 파일을 포함한다

    <script type="text/javascript" src="프로젝트 경로/ckeditor/ckeditor.js"></script>
    
  4. CDN으로 사용할 시 아래와 같이 추가한다.

    <script src="//cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
    
  5. text.jsp에 textarea가 선언된 곳에 아래와 같이 입력한다. (height 지정이 따로 가능하다.)

    <textarea class="form-control" id="p_content"></textarea>
    <script type="text/javascript"> 
        CKEDITOR.replace('p_content', {height: 500});
    </script>
    
  6. 설치가 성공적이라면 textarea가 변한 것을 확인할 수 있다.

0.0.1_20140628_0