CKEditor 5 based Editor with integrated Placeholder Plugin for Angular

Quick start

First, install the build from npm:

npm install --save ckeditor5-bravura

And use it in JavaScript application:

import * as ClassicEditor from 'ckeditor5-bravura';

// Or using the CommonJS version:
// const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );

ClassicEditor
	.create( document.querySelector( '#editor' ) )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( error => {
		console.error( 'There was a problem initializing the editor.', error );
	} );

Dependencies

Install the following package from npm:

npm install --save @ckeditor/ckeditor5-angular

Include this in the module file

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

Include this in the html file

<ckeditor [(ngModel)]="editorData" [editor]="Editor"></ckeditor>

and the following in the corresponding ts file

import * as ClassicEditor from 'ckeditor5-bravura';

...
...
...

Editor:any = ClassicEditor;

How to make changes generate a build?

After making all the changes, to generate a build run the following command from the root folder of this project by runnin the following command

yarn run build

You can test by browsing the root folder of the project using "Web Server for Chrome" or equivalent and then navigating to the file index.html in sample folder

Additional Information

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html