customimagetoolbar v0.0.4

customimagetoolbar

customimagetoolbar is a 3. party image toolbar plugin for CKEditor 5. It solves the problem of adding frame, border, padding and shadows around an image. Below is a short integration documentation. first save install the plugin package npm i -s customimagetoolbar

In your CKEditor5 build file ADD a reference to customimagetoolbar and add it to plugins array of ClassicEditor:

// app.js

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Image from '@ckeditor/ckeditor5-image/src/image';

import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';

import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';

import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import './theme/style.css';


import customImageToolbar from 'customimagetoolbar';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic,Image, ImageCaption, ImageStyle,  customImageToolbar,ImageInsert, ImageResize ],
        toolbar: [ 'bold', 'italic','bookmark','insertImage' ],        
    } )
    .then( editor => {
        
        CKEditorInspector.attach( editor );
        
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

build with web pack webpack --mode development

for more info on detailed setup of ckeditor for above setup check official documentation