프로그래밍/HTML
html : froala Editor 사용하여 콘텐츠 작성 및 미리보기 설정하기
재우니
2024. 9. 11. 13:42
froala Editor 사용하여 콘텐츠 작성 및 미리보기 설정하기
Froala Editor는 강력한 WYSIWYG(What You See Is What You Get) 에디터로, 사용자에게 직관적인 인터페이스를 제공하여 HTML, CSS, JavaScript로 웹 콘텐츠를 쉽게 작성할 수 있도록 합니다. 이 포스트에서는 Froala Editor를 초기화하고, 에디터에서 작성한 콘텐츠가 웹 페이지에서 올바르게 표시되도록 하는 방법을 설명합니다.
1. HTML 기본 구조
먼저, HTML 파일의 기본 구조를 설정합니다. 이 구조에는 Froala Editor의 스타일과 스크립트 파일을 포함합니다.
2. 코드 설명
위 HTML 코드는 Froala Editor를 사용하여 작성된 콘텐츠를 웹 페이지에 올바르게 표시하기 위한 설정을 포함합니다. 주요 요소를 하나씩 설명하겠습니다.
2.1 Froala Editor 스타일 및 스크립트 포함
- CSS 파일: Froala Editor의 스타일 파일(froala_editor.pkgd.min.css 및 froala_style.min.css)을 포함하여 에디터의 시각적 요소와 콘텐츠 스타일이 미리보기에도 적용되도록 합니다.
- Font Awesome: 에디터에서 사용하는 아이콘을 위해 Font Awesome을 선택적으로 포함합니다.
2.2 사용자 정의 스타일 추가
- #display 스타일: 미리보기 영역에 적용될 추가 스타일을 설정합니다. 폰트는 'sans-serif', 크기는 14px로 설정하였으며, 테두리와 여백을 추가하여 깔끔한 레이아웃을 유지합니다.
2.3 Froala Editor 초기화
- 초기화 코드: $() 함수로 문서가 준비되면 FroalaEditor를 #editor 요소에 초기화합니다.
- 이미지 기본 정렬 설정: 이미지가 기본적으로 좌측 정렬되도록 설정합니다.
- 콘텐츠 변경 이벤트: 사용자가 에디터에서 콘텐츠를 수정할 때마다 contentChanged 이벤트가 발생하여, 미리보기 영역(#display)에 실시간으로 내용을 업데이트합니다.
2.4 미리보기에 Froala 스타일 적용
- fr-view 클래스 추가: 미리보기 영역에 fr-view 클래스를 추가하여, 에디터의 CSS 스타일이 미리보기에도 동일하게 적용됩니다. 이를 통해 작성된 콘텐츠가 에디터와 미리보기에서 일관되게 보이도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Froala Editor 예제</title>
<!-- Froala Editor 스타일 파일 포함 -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@4/css/froala_editor.pkgd.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@4/css/froala_style.min.css" rel="stylesheet">
<!-- 아이콘을 위한 Font Awesome 포함 (선택 사항) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
/* 표시 영역에 필요한 추가 스타일 */
#display {
border: 1px solid #ddd;
padding: 15px;
margin-top: 20px;
font-family: sans-serif;
/* 폰트 설정 */
font-size: 14px;
/* 폰트 크기 설정 */
}
</style>
</head>
<body>
<div id="editor">
<p>여기에 내용을 입력하세요...</p>
</div>
<div id="display" class="fr-view"></div> <!-- fr-view 클래스 추가 -->
<!-- Froala Editor 스크립트 파일 포함 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4/js/froala_editor.pkgd.min.js"></script>
<script>
$(function () {
new FroalaEditor('#editor', {
// 이미지가 추가될 때 기본적으로 좌측 정렬되도록 설정
imageDefaultAlign: 'left',
events: {
'contentChanged': function () {
const editorContent = this.html.get();
const displayElement = document.getElementById('display');
// Froala 스타일 적용을 위해 fr-view 클래스 추가
displayElement.innerHTML = editorContent;
displayElement.classList.add('fr-view'); // Froala 미리보기 스타일 적용
}
}
});
});
</script>
</body>
</html>
미리보기
3. 결론
이 코드를 사용하면 Froala Editor에서 작성된 콘텐츠가 웹 페이지에서도 올바르게 표시되며, 스타일 및 레이아웃이 에디터와 일관성을 유지합니다. 이 설정은 블로그, CMS, 웹 애플리케이션 등 다양한 환경에서 사용자에게 직관적인 콘텐츠 편집 및 미리보기 기능을 제공하는 데 유용합니다.
이제 이 설정을 적용하여 에디터를 사용해 보세요! 에디터에서 작성된 모든 콘텐츠가 웹 페이지에서도 정확하게 표시될 것입니다.