자바스크립트(JavaScript)/API
[Quill] Quill로 텍스트 에디터 만들기
yerica
2025. 3. 26. 09:47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css"
rel="stylesheet"
/>
<link href="/quill/dist/quill.snow.css" rel="stylesheet" />
<style>
.ql-container {
font-family: 'Noto Sans KR', sans-serif;
}
.ql-container.ql-snow {
height: calc(100vh - 230px);
}
.ql-editor {
font-size: 16px;
}
.ql-snow .ql-transparent {
display: none;
}
.ql-snow .ql-transparent + .ql-stroke,
.ql-snow .ql-transparent + .ql-stroke + .ql-stroke {
stroke: #64acca;
transform: translateY(2px);
}
.ql-snow .ql-color-picker .ql-picker-label .ql-fill {
fill: #64acca;
}
.ql-snow.ql-toolbar button.ql-bold .ql-stroke {
stroke-width: 2.2px;
}
.ql-snow
.ql-picker.ql-size
.ql-picker-item[data-value='small']::before {
content: '본문2' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '본문1' !important;
}
.ql-snow
.ql-picker.ql-size
.ql-picker-item[data-value='large']::before {
content: '제목2' !important;
}
.ql-snow
.ql-picker.ql-size
.ql-picker-item[data-value='huge']::before {
content: '제목1' !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before {
content: '제목1';
}
</style>
</head>
<body>
<div id="editor">
<h2><strong>스며드는 것</strong></h2>
<p class="ql-align-right ql-direction-rtl">안도현</p>
<p>꽃게가 간장 속에</p>
<p>반쯤 몸을 담그고 엎으려 있다</p>
<p>등판에 간장이 울컥울컥 쏟아질 때</p>
<p>꽃게는 뱃속의 알을 껴안으려고</p>
<p>꿈틀거리다가 더 낮게</p>
<p>더 바닥 쪽으로 웅크렸으리라 버둥거렸으리라</p>
<p><br /></p>
<p>버둥거리다가 어찌할 수 없어서</p>
<p>살 속에 스며드는 것을</p>
<p>한때의 어스름을</p>
<p>꽃게는 천천히 받아드렸으리라</p>
<p>껍질이 먹먹해지기 전에</p>
<p>가만히 알들에게 말했으리라</p>
<p><br /></p>
<p><u>저녁이야</u></p>
<p><u>불 끄고 잘 시간이야</u></p>
</div>
<script>
const toolbarOptions = [
[{ size: ['huge', 'large', false, 'small'] }], // custom dropdown
['bold', 'underline'],
['blockquote'],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
['link', 'image'],
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
[{ script: 'sub' }, { script: 'super' }], // superscript/subscript
[{ direction: 'rtl' }], // text direction
]
const quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions,
},
theme: 'snow',
})
</script>
</body>
</html>