일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 패킷 필터
- ES6
- 보안학과
- Kali Linux
- Dreamhack
- Revese Proxy
- coloring rules
- MSSQL
- 포렌식
- sw ai 융합대학원
- power automate
- 소프트웨어보안학과
- VS Code
- kitri
- 모듈화
- 인증서
- wireshark
- db
- 업무 자동화
- Eclipse
- Excel
- AutoHotkey
- mark/unmark
- 웹 크롤링
- JavaScript
- SSMS
- 메일 프로토콜
- server profiler
- Postman
- Log Parser
- Today
- Total
전산직으로 살아남기
WYSIWYG Editor 이해하기 본문
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이며 공식 사이트에서 다양한 데모 화면을 확인하실 수 있습니다.
저는 공식 사이트에서 제공한 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