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