Simple Rich Text Editor with Contenteditable and JavaScript

Basic WYSIWYG example

by ph822720355

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word to CKEditor</title>
    <!-- CKEditor 5 -->
    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
    <!-- Mammoth.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
    <!-- Custom Styles for Tables -->
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>

    <h1>Word to CKEditor Example with Table Styles</h1>

    <!-- File Upload -->
    <input type="file" id="upload" accept=".docx">

    <!-- CKEditor Container -->
    <div id="editor"></div>

    <script>
        let editorInstance;

        // Initialize CKEditor
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                editorInstance = editor;
            })
            .catch(error => {
                console.error(error);
            });

        // Convert DOCX to HTML using Mammoth.js
        function convertDocxToHtml(file) {
            var reader = new FileReader();
            
            reader.onload = function(event) {
                var arrayBuffer = reader.result;
                
                mammoth.convertToHtml({arrayBuffer: arrayBuffer})
                    .then(displayResult)
                    .catch(handleError);
            };
            
            reader.readAsArrayBuffer(file);
        }

        // Display the converted HTML in CKEditor
        function displayResult(result) {
            var htmlContent = result.value; // Converted HTML content
            editorInstance.setData(htmlContent); // Insert HTML into CKEditor
        }

        // Handle errors...