전산직으로 살아남기

WYSIWYG Editor 이해하기 본문

Development/HTML & CSS

WYSIWYG Editor 이해하기

케이마 2024. 9. 3. 08:40
728x90
반응형

1.  WYSIWYG이란?

위지윅(WYSIWYG : What You See Is What You Get, “보는 대로 얻는다”)는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력과 동일하게 나오는 방식을 말합니다.

 

2.  WYSIWYG Editor란?

위지윅 에디터는 편집화면에서 입력한 글자, 그립 등의 컨텐츠 모양 그대로 최종산물이 화면상에서, 또는 출력물에서 나타나도록 하는 에디터입니다. 위지윅 에디터는 크게 desktop-based와 Javascript-based로 나눌 수 있습니다.

Adove Dreamweaver, Amaya 등과 같이 운영체제 상에서 동작하는 에디터가 desktop-based이고, TinyMCE, FCKeditor 등과 같이 웹 상에서 동작하는 에디터가 Javascript-based 위지윅 에디터입니다.

위지윅 에디터 예시
위지윅 에디터 예시

 

3.  WYSIWYG Editor 사용하기

이번에는 앞에서 설명한 Javascript-based 위지윅 에디터를 실제로 사용해 보겠습니다. 제가 사용할 위지윅 에디터는 CKEditor이며 공식 사이트에서 다양한 데모 화면을 확인하실 수 있습니다.

CKEditor 공식 사이트
CKEditor 공식 사이트

 

저는 공식 사이트에서 제공한 CDN(Content Delivery Network) 기반으로 HTML 소스에 반영 후 실행해봤습니다. ZIP File, npm 등 다양한 적용 방법이 존재하니 공식 사이트를 참고하시기 바랍니다.

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CKEditor 5 - Quick start CDN</title>
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css" />
        <!-- If you are using premium features: -->
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/ckeditor5-premium-features.css" />
    </head>
    <body>
        <div id="editor">
            <p>Hello from CKEditor 5!</p>
        </div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.0.0/",
                    "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/ckeditor5-premium-features.js",
                    "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.0.0/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                Essentials,
                Bold,
                Italic,
                Font,
                Paragraph
            } from 'ckeditor5';
            import { FormatPainter } from 'ckeditor5-premium-features';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [ Essentials, Bold, Italic, Font, Paragraph, FormatPainter ],
                    toolbar: {
                        items: [
                            'undo', 'redo', '|', 'bold', 'italic', '|',
                            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'formatPainter'
                        ]
                    },
                    licenseKey: '<YOUR_LICENSE_KEY>'
                } )
                .then( /* ... */ )
                .catch( /* ... */ );
        </script>
    </body>
</html>

 

위지윅 에디터 적용
위지윅 에디터 적용

 

4.  WYSIWYG Editor 종류

1) 프리미엄 에디터

  • Adobe Dreamweaver CC
  • Froala
  • Setka Editor
  • CoffeeCup HTML Editor

2) 무료 에디터

  • CKEditor
  • Editor.js
  • TinyMCE
  • Quill
  • Summernote
  • contentTools

 

 

출처

 

WYSIWYG(위즈윅) 에디터란

'WIZ-zee-wig(위즈윅)'으로 발음하며 'what you see is what you get'을 줄여 부른 말이다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말한다. WISIWYG 어플리케이션

sorrow16.tistory.com

 

 

728x90
반응형
저작자표시 비영리 변경금지