HTML 파일 구성
<head>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css">
</head>
<body>
<div class="form-group">
<label for="content">내용</label>
<div id="toastUi"></div>
<input type="hidden" id="content" name="content">
</div>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
데이터 전달 및 수신을 위한 JavaSrcipt
// TOAST UI Editor
document.addEventListener('DOMContentLoaded', function () {
const editor = new toastui.Editor({
el: document.querySelector('#toastUi'),
height: '500px',
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
initialValue: document.querySelector('#content').value
});
const form = document.getElementById('form');
form.addEventListener('submit', function () {
const content = document.getElementById('content');
content.value = editor.getHTML();
});
});본문 이미지 첨부 Custom
const editor = new toastui.Editor({
el: document.querySelector('#toastUi'),
height: '500px',
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
initialValue: document.querySelector('#content').value,
hooks: {
addImageBlobHook: async (blob, callback) => {
if (!postId) {
await createTempPost();
}
if (await getTotalSize() + blob.size > MAX_SIZE) {
alert("업로드 용량이 10MB를 초과할 수 없습니다.");
return;
}
const file = new File([blob], `pasted-image.png`, {type: blob.type});
const uploadedImages = await uploadImage(file, postId, false, true);
callback(uploadedImages[uploadedImages.length - 1].url, '업로드된 이미지');
updatePreview(uploadedImages);
updateTotalSize(uploadedImages);
// 이미지 URL 이 본문에 반영된 후, 서버로 업데이트 요청
await updatePostWithImage();
}
}
});본문 iframe 첨부 Custom
const editor = new toastui.Editor({
el: document.querySelector('#toastUi'),
height: '500px',
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
initialValue: document.querySelector('#content').value,
customHTMLRenderer: {
htmlBlock: {
iframe(node) {
const iframeSrc = node.attrs.src;
// iframe src가 허용된 도메인에 해당하는지 확인
const allowedDomains = ['https://www.google.com/maps', 'https://www.youtube.com'];
if (allowedDomains.some(domain => iframeSrc.startsWith(domain))) {
return [
{
type: 'openTag',
tagName: 'iframe',
outerNewLine: true,
attributes: node.attrs // iframe 태그 속성
},
{type: 'html', content: node.childrenHTML}, // iframe 안의 HTML 콘텐츠
{type: 'closeTag', tagName: 'iframe', outerNewLine: true}
];
}
return ''; // 허용되지 않은 iframe은 렌더링하지 않음
}
}
}
});참고
공식 문서 https://ui.toast.com/
https://curryyou.tistory.com/483
