ckeditor5-custom-build-with-code-block

CKEditor 5 editor generated with the online builder

This repository presents a CKEditor 5 editor build generated by the Online builder tool with code block

how to use

1. Run `npm install ckeditor';

Open your component in angular project

1. Then import * as Editor from '../../../assets/ckeditor5/build/ckeditor.js';

2 Then public Editor = ClassicEditor;

3 in your configuration you could set-up you configuration as you want

editorConfig = {
         toolbar: {
             items: [
                 'bold',
                 'italic',
                 'link',
                 'bulletedList',
                 'numberedList',
                 '|',
                 'indent',
                 'outdent',
                 '|',
                 'codeBlock',
                 'imageUpload',
                 'blockQuote',
                 'insertTable',
                 'undo',
                 'redo',
             ]
         },
         image: {
             toolbar: [
                 'imageStyle:full',
                 'imageStyle:side',
                 '|',
                 'imageTextAlternative'
             ]
         },
         table: {
             contentToolbar: [
                 'tableColumn',
                 'tableRow',
                 'mergeTableCells'
             ]
         },
         // This value must be kept in sync with the language defined in webpack.config.js.
         language: 'en',
     };

Open your view

<ckeditor  placeholder="Body" [config]="editorConfig" [(ngModel)]="body" [editor]="Editor" data="<p>Hello, csharp corner!</p><br/><br/> <b>This is demo for ckeditor 5 with angular 8</br>"></ckeditor>