How do I use ng2-ckeditor as inline?
I have used ng2-ckeditor, but I need to use it as inline, so how can I use it as inline?
https://www.npmjs.com/package/ng2-ckeditor
I am using angular-cli for angular2 development.
source to share
To make inline in ng2-ckeditor, change ckeditor.component.js in ng2-ckeditor / src
change this.instance = CKEDITOR.replace (this.host.nativeElement, config); to this.instance = CKEDITOR.inline (this.host.nativeElement, config); This worked on my local system but ran into a production issue
But after replacing this I get "Unable to set property" dir "undefined"
I tried to set base_path to index.html but didn't help.
source to share
Understand the difference between classic ckeditor and built-in first .
The classic ckeditor uses an IFrame that ng2-ckeditor
wraps and exposes an angular component, as in:
<ckeditor></ckeditor>
Creates an angular 2 component inside your template and inside an iFrame. This iFrame loads its own CSS (default .css content from ckeditor CDN). This means that your editor instance is isolated from your css sites.
Inline ckeditor uses the html contenteditable attribute on the HTML element (like div or textarea). Please note that not all items are supported ).
Since this is now a div on your page, your site's styles will be applied inside that editor (for example, if the user presses the enter button, thereby creating an element <p>
in the editor, whatever <p>
css is applied to your page will apply to the users <p>
in the editor) ...
So, first create a div in your template:
<div id="inline-editor1" contenteditable="true">
</div
Now you need to tell CKEDITOR about this div.
So, at the top of your component, before the @Component decorators, add this line:
declare var CKEDITOR: any;
Finally, in your ngOnInit tell CKEDITOR about your div:
ngOnInit() {
this.setConfig();
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'inline-editor1' );
}
Now when you click inside this div you get the inline ckeditor toolbar.
Docs here .
CAVEAT - PLEASE NOTE
This method means that you cannot use [(ngModel)] to bind to the content of the embedded editor (as you can with ng2-ckeditor). You will need to use standard javascript to fetch the content of the editor to save .
Here is a plunkr showing ng2-ckeditor and an inline editor. Note how the inline editor is NOT tied to any model.
source to share