Build a Suneditor.js WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using Javascript

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SunEditor Example</title>
    <!-- SunEditor CSS -->
    <link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
    <style>
        #editor-container {
            width: 100%;
            margin: auto;
            margin-top: 20px;
        }

        #sample-editor{
            width:100%
        }

        .editor-preview {
            border: 1px solid #ccc;
            margin-top: 20px;
            padding: 10px;
        }

        #show-content {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">SunEditor Example</h1>
    <div id="editor-container">
        <!-- Textarea for SunEditor -->
        <textarea id="sample-editor">Welcome to SunEditor!</textarea>
        <button id="show-content">Show HTML Content</button>
        <div class="editor-preview" id="editor-preview">
            <!-- Content preview will appear here -->
        </div>
    </div>

    <!-- SunEditor JS -->
    <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
    <!-- Language Support (optional, default is English) -->
    <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/lang/en.js"></script>
    <script>
        // Initialize SunEditor
        const editor = SUNEDITOR.create('sample-editor', {
            height: 300,
            buttonList: [
                ['undo', 'redo', 'formatBlock', 'bold', 'italic', 'underline', 'strike'],
                ['fontSize', 'fontColor', 'hiliteColor', 'align', 'list', 'link', 'image', 'video'],
                ['removeFormat', 'preview', 'codeView']
            ],
            lang: SUNEDITOR_LANG['en'], // Set language to English
            placeholder: 'Start typing here...',
            charCounter: true,
        });

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

</html>

<!DOCTYPE html>

<head>

<title>SunEditor Example</title>

<style>

#editor-container {

width: 100%;

margin: auto;

margin-top: 20px;

}

#sample-editor{

width:100%

}

.editor-preview {

border: 1px solid #ccc;

margin-top: 20px;

padding: 10px;

}

#show-content {

margin-top: 10px;

}

</style>

</head>

<body>

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

<textarea id="sample-editor">Welcome to SunEditor!</textarea>

<button id="show-content">Show HTML Content</button>

</div>

// Initialize SunEditor

const editor = SUNEDITOR.create('sample-editor', {

height: 300,

buttonList: [

['undo', 'redo', 'formatBlock', 'bold', 'italic', 'underline', 'strike'],

['fontSize', 'fontColor', 'hiliteColor', 'align', 'list', 'link', 'image', 'video'],

['removeFormat', 'preview', 'codeView']

lang: SUNEDITOR_LANG['en'], // Set language to English

placeholder: 'Start typing here...',

charCounter: true,

});

// Show content button click handler

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

const content = editor.getContents();

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

});

</script>

</body>

</html>

Build a Suneditor.js WYSIWYG Rich Text & HTML Editor With Live Preview in Browser Using Javascript

Comments

Leave a Reply Cancel reply

Archives