Build a Froala WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using Javascript

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_style.min.css" rel="stylesheet"
        type="text/css" />
    <style>
        #editor-container {
            width: 80%;
            margin: auto;
            margin-top: 20px;
        }

        .editor-preview {
            border: 1px solid #ccc;
            margin-top: 20px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">Froala Editor Example</h1>
    <div id="editor-container">
        <div id="froala-editor"></div>
        <button id="show-content" style="margin-top: 10px;">Show HTML Content</button>
        <div class="editor-preview" id="editor-preview">
            <!-- Preview will appear here -->
        </div>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
    <script>
        const editor = new FroalaEditor("div#froala-editor", {
            toolbarButtons: [
                'bold', 'italic', 'underline', 'strikeThrough', '|',
                'formatUL', 'formatOL', '|',
                'align', 'insertImage', 'insertLink', 'insertVideo', '|',
                'undo', 'redo', 'html'
            ],
            charCounterCount: true,
            placeholderText: 'Start typing here...',
            quickInsertTags: ['h1', 'h2', 'h3', 'p'],
        });

        document.getElementById("show-content").addEventListener("click", () => {
            const content = editor.html.get();
            document.getElementById("editor-preview").innerHTML = content;
        });
    </script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

type="text/css" />

type="text/css" />

<style>

#editor-container {

width: 80%;

margin: auto;

margin-top: 20px;

}

.editor-preview {

border: 1px solid #ccc;

margin-top: 20px;

padding: 10px;

}

</style>

</head>

<body>

<h1 style="text-align: center;">Froala Editor Example</h1>

<button id="show-content" style="margin-top: 10px;">Show HTML Content</button>

</div>

const editor = new FroalaEditor("div#froala-editor", {

toolbarButtons: [

'bold', 'italic', 'underline', 'strikeThrough', '|',

'formatUL', 'formatOL', '|',

'align', 'insertImage', 'insertLink', 'insertVideo', '|',

'undo', 'redo', 'html'

charCounterCount: true,

placeholderText: 'Start typing here...',

quickInsertTags: ['h1', 'h2', 'h3', 'p'],

});

document.getElementById("show-content").addEventListener("click", () => {

const content = editor.html.get();

document.getElementById("editor-preview").innerHTML = content;

});

</script>

</body>

</html>

Build a Froala WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using Javascript

Comments

Leave a Reply Cancel reply

Archives