# Custom CKEditor5

This repository presents a custom CKEditor 5 editor build that used by [Portalnesia.com](https://portalnesia.com) generated by the [Online builder tool](https://ckeditor.com/ckeditor-5/online-builder) 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/custom-ckeditor5@2.0.0/build/ckeditor.js
```

```
https://unpkg.com/@portalnesia/custom-ckeditor5@2.0.0/build/ckeditor.js
```

And use it in your website

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

<!-- <script src="https://cdn.jsdelivr.net/npm/@portalnesia/custom-ckeditor5@1.1.2/build/ckeditor.js"></script>  -->
<!-- <script src="https://unpkg.com/@portalnesia/custom-ckeditor5@1.1.2/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.

```js
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.

```js
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

```js
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);
}
```