<tutorialjinni.com/>

CKEditor Example

Posted Under: HTML5, JavaScript, Tutorials on Feb 8, 2023
CKEditor Example
CKEditor 5 is a cutting-edge rich text editor built using JavaScript and featuring an MVC design, custom data model, and virtual DOM. Developed using the latest ES6 language, it integrates seamlessly with webpack and provides an array of WYSIWYG editing options, including support for collaborative editing. Whether you're looking for an editor similar to Google Docs or Medium, or a platform like Slack or Twitter, this versatile framework offers everything you need in a single package.



CKEditor Example

<html>
<head>
    <title>CKEditor Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CKEditor CDN -->
    <script src="https://cdn.tutorialjinni.com/ckeditor5/36.0.0/ckeditor.min.js"></script>
</head>
<body>

    <textarea id="CKEditor-example" name="CKEditor-example"></textarea>

    <script>
        var CKEDITOR="";
        ClassicEditor.create(document.querySelector('#CKEditor-example'))
        .then(function (editor){
change Height of CKEditor
            editor.editing.view.change(writer=>{    
            writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
        });
            CKEDITOR=editor;
        })
        .catch(error =>{
            console.error( error );
        });
    </script>
</body>
</html>
Height of CKEditor 5 can be changed using below function after the editor is loaded. 
editor.editing.view.change(writer=>{    
    writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
});
Width of CKEditor 5 can be changes by adjusting the width of the container. As the CKEditor 5 is render as fluid it can fit it self according to the size of the container and the toolbar will adjust itself automatically.


imgae