CKEditor๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ํ ๋ ๊ฒ์ํ CRUD ๊ฐ๋ฐ์ ๋ด์ฉ์ ์ ๋ ฅ ํ ๋ ์๋ํฐ๋ก ํ์ฉํ ์ ์๋ค. ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ์์ ์ฌ์ฉํ๊ณ ์๋ ์๋ํฐ, ๋ค์ด๋ฒ ์ค๋งํธ ์๋ํฐ ๋ฑ๋ฑ ๋ค์ํ ํ๋ซํผ์์ ์ ๊ณตํ๋ ์๋ํฐ์ฒ๋ผ CKEditor๋ ๋ด๊ฐ ์ํ๋ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๊ณ ํฌ๊ธฐ๋ฅผ ํค์ฐ๊ณ ์์๋ ์ค์ ํ ์ ์๊ณ ๊ฐ์กฐ, ์ ๋ ฌ, ํ, ์ด๋ชจํฐ์ฝ, ๋งํฌ, ์ด๋ฏธ์ง ์ถ๊ฐ ๋ฑ๋ฑ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค. ๋ค์ํ ์๋ํฐ์ฒ๋ผ ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์๊ณ ๋ฌด๋ฃ OPEN SOURCE๋ก ๋ฐฐํฌํ๊ณ ์๋ CKEditor์ ๋ํด์ ์์๋ณด์.
CKEditor๋?
CKEditor๋ ์น ๊ธฐ๋ฐ์ WYSIWYG(What You See Is What You Get) ํ ์คํธ ํธ์ง๊ธฐ๋ก, ์ฌ์ฉ์๊ฐ HTML ๋ฌธ์๋ฅผ ์ฝ๊ฒ ์์ฑํ๊ณ ํธ์งํ ์ ์๋๋ก ๋์์ฃผ๋ ์คํ ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ์์ ์๋ ํ๋ก์ธ์์ ์ ์ฌํ ํ๊ฒฝ์ ์ ๊ณตํ๋ฉฐ, HTML์ ์ง์ ์์ฑํ์ง ์์๋ ๋ค์ํ ํ ์คํธ ์คํ์ผ๋ง, ์ด๋ฏธ์ง ์ฝ์ , ํ ์ด๋ธ ์์ฑ ๋ฑ์ ํ ์ ์์ต๋๋ค.
CKEditor์ ์ญ์ฌ ๋ฐ ๋ฐ์
2003๋ 'FCKeditor'๋ผ๋ ์ด๋ฆ์ผ๋ก ์ฒ์ ๊ฐ๋ฐ๋์์ต๋๋ค.
2009๋ CKEditor3๊ฐ ์ถ์๋๋ฉด์ ์ฑ๋ฅ ๋ฐ ๊ธฐ๋ฅ์ด ํฌ๊ฒ ํฅ์๋์์ต๋๋ค.
2012๋ CKEditor4๊ฐ ๊ณต๊ฐ๋์์ผ๋ฉฐ, ํ๋ฌ๊ทธ์ธ ๋ฐฉ์์ผ๋ก ํ์ฅ์ฑ์ด ๋์์ก์ต๋๋ค.
2018๋ CKEditor5๊ฐ ์ถ์๋๋ฉฐ, ๋ชจ๋ํ ๊ตฌ์กฐ์ ํ๋์ ์ธ UI/UX๊ฐ ๋์ ๋ฉ๋๋ค.
ํ์ฌ ์ต์ ๋ฒ์ ์ CKEditor5 ์ด๋ฉฐ, ๋ค์ํ ๋ชจ๋๋ฅผ ์ง์ํ๊ณ ํด๋ผ์ฐ๋ ์๋น์ค์ ์ฐ๋ํ ์๋ ์์ต๋๋ค.
CKEditor์ ์ฃผ์ ํน์ง
1. WYSIWYG (What You See Is What You Get) ์ง์
์ฌ์ฉ์๊ฐ ๋ณด๋ ํ๋ฉด์ด ์ค์ ๊ฒฐ๊ณผ๋ฌผ๊ณผ ๋์ผํ๊ฒ ํ์๋๋ฏ๋ก, HTML์ ์ง์ ์์ฑํ ํ์ ์์ด ์ง๊ด์ ์ผ๋ก ํธ์งํ ์ ์์ต๋๋ค. ๋ง์น MS Word ๋๋ Google Docs์ฒ๋ผ ๋ฌธ์๋ฅผ ์์ฑํ ์ ์๋ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค.
2. ๋ค์ํ ์๋ํฐ ๋ชจ๋ ์ง์
CKEditor๋ ๋ค์ํ ์ฌ์ฉ ํ๊ฒฝ์ ๋ง๊ฒ ์ฌ๋ฌ ๊ฐ์ง ์๋ํฐ ๋ชจ๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
- Classic Editor : ๊ธฐ๋ณธ์ ์ธ ํด๋ฐ๊ฐ ์๋ ์ ํต์ ์ธ ๋ฌธ์ ํธ์ง๊ธฐ ํํ
- Inline Editor : ํ์ด์ง ๋ด์์ ํน์ ๋ถ๋ถ๋ง ์ง์ ์์ ํ ์ ์๋๋ก ํ๋ ํํ
- Balloon Editor : ์ ํํ ํ ์คํธ ์์ ํด๋ฐ๊ฐ ๋ํ๋๋ ํํ
- Decoupled Editor : ํด๋ฐ๋ฅผ ์์ ๋กญ๊ฒ ๋ฐฐ์นํ ์ ์๋ ํํ
3. ํ๋ฌ๊ทธ์ธ ๊ธฐ๋ฐ์ ํ์ฅ์ฑ
CKEditor๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณต๋๋ ๊ธฐ๋ฅ ์ธ์๋ ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐํ์ฌ ํ์ฅํ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ์ ๋ก๋ : ์๋ฒ๋ ํด๋ผ์ฐ๋์ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ ๊ฐ๋ฅ
- ํ ์ด๋ธ ์ฝ์ : HTML ํ ์ด๋ธ์ ์์ฝ๊ฒ ์ถ๊ฐ ๋ฐ ์์
- ์์ ์ ๋ ฅ : LaTeX ๊ธฐ๋ฐ์ ์์ ์ ๋ ฅ ์ง์
- ์ฝ๋ ๋ธ๋ก : ํ๋ก๊ทธ๋๋ฐ ์ฝ๋ ์ฝ์ ์ ์ํ ์ฝ๋ ํ์ด๋ผ์ดํ ๊ธฐ๋ฅ
- Markdown ์ง์ : Makrdown์ WYSIWYG ํ๊ฒฝ์์ ์ฌ์ฉํ ์ ์์
4. ๋ฉํฐ๋ฏธ๋์ด ์ง์ (์ด๋ฏธ์ง, ๋น๋์ค, ํ์ผ ์ ๋ก๋)
์๋ํฐ ๋ด์์ ์ด๋ฏธ์ง, ๋์์, ํ์ผ ๋ฑ์ ์ฝ๊ฒ ์ฝ์ ํ ์ ์์ผ๋ฉฐ, ์๋ฒ์ ์ ๋ก๋ ํ์ฌ ๊ด๋ฆฌํ ์๋ ์์ต๋๋ค.
- ์ง์ ๋๋๊ทธ ์ค ๋๋กญ ์ง์
- ์๋ฒ์ ์ ๋ก๋ ํ ์ฝ์
- Base64 ์ธ์ฝ๋ฉ ๋ฐฉ์ ์ง์ (CKEditor 5)
5. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ๋ฐ ๋ชจ๋ฐ์ผ ์ง์
์ต์ ์น ๋ธ๋ผ์ฐ์ (Chrome, Firefox, Edge, Safari ๋ฑ)์ ์๋ฒฝํ๊ฒ ํธํ๋ฉ๋๋ค. ๋ชจ๋ฐ์ผ ์นํ์ ์ธ UI๋ฅผ ์ ๊ณตํ์ฌ, ๋ฐ์ํ ๋์์ธ์ด ๊ฐ๋ฅํฉ๋๋ค.
6. ๊ฐ๋ ฅํ ๋ณด์ ๊ธฐ๋ฅ
- XSS(Cross-Site Scripting) ๊ณต๊ฒฉ ๋ฐฉ์ง
- ์ฌ์ฉ์๊ฐ ์๋ํฐ๋ฅผ ํตํด ์ ์ฑ ์คํฌ๋ฆฝํธ๋ฅผ ์ฝ์ ํ๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
- HTML ํํฐ๋ง
- ์์ ํ์ง ์์ ํ๊ทธ๋ฅผ ์๋์ผ๋ก ์ ๊ฑฐํ์ฌ ๋ณด์์ฑ์ ์ ์งํฉ๋๋ค.
7. ๋ง์ถคํ ์ค์ ๊ฐ๋ฅ
CKEditor๋ ๊ธฐ๋ณธ ์ ๊ณต๋๋ ๊ธฐ๋ฅ ์ธ์๋ ํด๋ฐ, ์คํ์ผ, ์ธ์ด, ํ ๋ง ๋ฑ์ ๋ง์ถค ์ค์ ํ ์ ์์ต๋๋ค.
ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: ['bold', 'italic', 'link', 'undo', 'redo']
})
.catch(error => console.error(error));
์ ์ค์ ์ ์ ์ฉํ๋ฉด, ๊ตต์(Bold), ๊ธฐ์ธ์(Italic), ๋งํฌ ์ถ๊ฐ(Link), ์คํ ์ทจ์(Undo), ๋ค์ ์คํ(Redo) ๊ธฐ๋ฅ๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๋๋ก ์ ํํ ์ ์์ต๋๋ค.
CKEditor 4 ์๋ช
CKEditor4๋ OS๋ฒ์ ๊ณผ LTS๋ฒ์ ์ด ์์ต๋๋ค. OS(Open Source)๋ฒ์ ์ ์ ์ง๋ณด์ ๊ธฐ๊ฐ์ด ์ด์ ์ ๋ฒ์จ ๋์ด ๋ฌ๊ณ LTS ๋ฒ์ ์ผ๋ก ํ์ฌ CKEditor4 ์ ์ง๋ณด์๊ฐ ์งํ์ค์ ์๋๊ฑธ๋ก ์๊ณ ์์ต๋๋ค. CKEditor ๊ณต์ ๊นํ ์ฌ์ดํธ์์๋ CKEditor4๋ 2012๋ ์ ์ถ์๋์ด 2023๋ 6์ 30์ผ์ ์ง์ ์ข ๋ฃ(EOL)๊ฐ ๋์์์ ์๋ฆฌ๊ณ ์๊ณ CKEditor4 LTS ๋ฒ์ ์ ์ฅ๊ธฐ ์ง์์ ํ๊ณ ์๋ค๊ณ ์ค๋ช ํ๊ณ ์์ต๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ 2028๋ 12์๊น์ง๋ ๋ณด์ ์ ๋ฐ์ดํธ์ ์ค์ ๋ฒ๊ทธ ์์ ์ด ๋ณด์ฅ๋ฉ๋๋ค.
CKEditor 4 ์ฌ์ฉ์๋ฅผ ์ํ ์ค์ ์ ๋ฐ์ดํธ
CKEditor4์ ์๋ช ์ข ๋ฃ 1์ฃผ๋ ์ด ๋๋ 2024๋ 7์ 1์ผ๋ถํฐ CKEditor4์ ๋ํ ๋ณด์ ์๋ฆผ์ ํ์ฑํํฉ๋๋ค. ํด๋น ๋ณ๊ฒฝ ์ฌํญ์ ์คํ ์์ค ๋ฒ์ 4.22์ CDN์ ํตํด ์ ๊ณต๋๋ ๋ชจ๋ ์ด์ ๋ฒ์ ์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ๊ณํ๋ ๋ณ๊ฒฝ์ฌํญ์ ๋ํด์๋ ์ ์ฉ ๋ฌธ์์์๋ ํ์ธํ ์ ์์ต๋๋ค.
CKEditor4 Download (Open Source)
์คํ ์์ค ๋ผ์ด์ ์ค ์กฐ๊ฑด์ ๋ฐ๋ผ CKEditor 4.22.1 ์ดํ๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์คํ ์์ค ๋ฒ์ ์๋ ๋ ์ด์ ๋ณด์ ์ ๋ฐ์ดํธ๊ฐ ์ ๊ณต๋์ง ์์ผ๋ฏ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ํ์ ์ฒํ๊ฒ ๋ฉ๋๋ค. CKEditor 4์ ์คํ ์์ค ๋ฒ์ ์ ๋ค์ด๋ก๋ ํ๋ ค๋ฉด 4.22.1 ๋ฐ ์ด์ ํ๊ทธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. CKEditor 4.22.1์ ์คํ ์์ค ๋ผ์ด์ ์ค ์กฐ๊ฑด์ ๋ฐ๋ผ ์ฌ์ฉ ๊ฐ๋ฅํ CKEditor4์ ๋ง์ง๋ง ๋ฒ์ ์ ๋๋ค.
CKEditor4 ์ ์ฅ์ ์์
Sample
ํด๋ 'samples/' ์๋ ์ค์น๋ฅผ ํ ์คํธํ๋๋ฐ ์ฌ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ์๊ฐ ๋ค์ด์์ต๋๋ค. CKEditor4 ์์ ๋ฅผ ๋ฐฉ๋ฌธํ์ฌ ๋ค์ํ ํธ์ง๊ธฐ ๊ธฐ๋ฅ์ ๋ณด์ฌ์ฃผ๋ ํ๋ถํ ์ํ์ ํ์ธํ๊ณ , ์์ค ์ฝ๋๋ฅผ ์ฝ๊ฒ ๋ณด๊ณ , ๋ณต์ฌํ๊ณ ์์ ์ ์๋ฃจ์ ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํ ์คํธ ํ๊ฒฝ
CKEditor4 ํ ์คํธ ํ๊ฒฝ ๊ฐ์ด๋์์ ํ๊ฒฝ์ ์ค์ ํ๊ณ ํ ์คํธ๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์ธํ ์์๋ณด์ธ์.
๋ฌธ์ ๋ณด๊ณ
๋ฒ๊ทธ๋ฅผ ๋ณด๊ณ ํ๊ณ ๊ธฐ๋ฅ ์์ฒญ์ ํ๋ ค๋ฉด CKEditor4 ๊นํ ์ด์ ํ์ด์ง๋ฅผ ์ฌ์ฉํฉ๋๋ค.
@Junesker
'OPEN SOURCE > CKEditor4' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์คํ๋ง(Spring)๋ถํธ & ์คํ๋ง ํ๋ ์์ํฌ๋ฅผ ํ์ฉํ CKEditor4 ์ ์ฉํ๊ธฐ (0) | 2025.04.02 |
---|