Custom CKEditor5

This repository presents a custom CKEditor 5 editor build that used by Portalnesia.com generated by the Online builder tool with image manager custom plugin.

Quick start

First, install the build from npm

npm install @portalnesia/custom-ckeditor5

Or, from cdn

https://cdn.jsdelivr.net/npm/@portalnesia/[email protected]/build/ckeditor.js

https://unpkg.com/@portalnesia/[email protected]/build/ckeditor.js

And use it in your website

<div id="editor">
    <p>This is the editor content</p>
</div>

<!-- <script src="https://cdn.jsdelivr.net/npm/@portalnesia/[email protected]/build/ckeditor.js"></script>  -->
<!-- <script src="https://unpkg.com/@portalnesia/[email protected]/build/ckeditor.js"></script>  -->
<script src="./node_modules/@portalnesia/custom-ckeditor5/build/ckeditor.js"></script>
<script>
    PortalnesiaEditor
        .create( document.querySelector("#editor"),{
            portalnesia:{
                onSave:function(){

                },
                onImageManager:(){
                    
                }
            }
        } )
        .then( editor => {
            window.editor = editor;
        })
        .catch( error => {
            console.error(error);
        })
</script>

Configuration

portalnesia.onImageManager

Callback function when imageManager toolbar is clicked.

PortalnesiaEditor
    .create( document.querySelector("#editor"),{
        portalnesia:{
            onImageManager:function(){
                /**
                 * 
                 * You can make custom UI for Image Manager which will display a collection of images and/or upload function
                 * 
                */
                console.log("This callback will be executed when image toolbar is clicked")
            }
        }
    } )
    .then( editor => {
        // Save editor instance
        window.editor = editor;
    })
    .catch( error => {
        console.error(error);
    })

portalnesia.onSave

Callback function to handle save toolbar when it clicked.

PortalnesiaEditor
    .create( document.querySelector("#editor"),{
        portalnesia:{
            onSave:function(){
                /**
                 * 
                 * Your custom save function which will save the editor's data to your database.
                 * 
                */
                console.log("This callback will be executed when save toolbar is clicked")
            }
        }
    } )
    .then( editor => {
        // Save editor instance
        window.editor = editor;
    })
    .catch( error => {
        console.error(error);
    })

Insert Image From Your Image Manager

This is an example function how to insert your image from your image manager to editor

function handleSelectedImage() {
    // Your image URL
    const url ="https://........png";

    // Your saved editor instance
    const editor = window.editor
    const plugin = editor.plugins.get("ImageManager");
    plugin.handleSelectedImage(url);
}