html : froala Editor 사용하여 콘텐츠 작성 및 미리보기 설정하기

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, 웹 애플리케이션 등 다양한 환경에서 사용자에게 직관적인 콘텐츠 편집 및 미리보기 기능을 제공하는 데 유용합니다.

이제 이 설정을 적용하여 에디터를 사용해 보세요! 에디터에서 작성된 모든 콘텐츠가 웹 페이지에서도 정확하게 표시될 것입니다.

froalaview.html

0.00MB

저작자표시 비영리 동일조건

'프로그래밍 > HTML' 카테고리의 다른 글

CSS : SUIT WEB FONT 폰트 사이트 적용하기 (2)	2024.10.21
html_css : 마우스 우클릭 방지와 텍스트 드래그 방지를 구현 (Prevent right-clicking and dragging text) (0)	2024.08.29
html : 애니메이션 효과, 특정 텍스트 자주색으로 형광펜 칠하듯이 보여주기 (0)	2024.08.22
image, xml, javascript, css, font 파일을 base64 로 치환하여 html 적용해 보기 (0)	2024.08.15
[JS] google calendar 와 outlook live 일정 추가하기 (2)	2023.12.21

재우니의 블로그