CODEWITHSUNDEEP
angularckeditor
abhy
abhy

Reputation: 241

How to use ng2-ckeditor as inline?

I have used ng2-ckeditor but i need to use it as inline, So how can i used that as inline ?

https://www.npmjs.com/package/ng2-ckeditor

I am using angular-cli for angular2 development.

Upvotes: 3

Views: 2857

Answers (2)

rmcsharry
rmcsharry

Reputation: 5552

First understand the difference between classic ckeditor and inline.

Classic ckeditor uses an IFrame, which ng2-ckeditor wraps and provides an angular component for, as in:

<ckeditor></ckeditor>

That creates an angular 2 component inside your template and inside that is an iFrame. This iFrame loads its own CSS (contents.css by default from ckeditor CDN). This means your editor instance is isolated from your websites css.

Inline ckeditor uses the html contenteditable attribute on an HTML element (eg. a div or textarea - note that not all elements are supported).

Since this is now a div in your page, your website styles will apply inside that editor (eg. if the user presses enter, thereby creating a <p> element in the editor, whatever <p> css is being applied on your page will apply to the users <p> in the editor).

So, first create the div in your template:

<div id="inline-editor1" contenteditable="true">
</div

Now you need to tell CKEDITOR about that div.

So At the top of your component before @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 that div, you get the inline ckeditor toolbar.

Docs here.

CAVEAT - PLEASE NOTE

This method means you will not be able to use [(ngModel)] to bind to the contents of the inline editor (as you can with ng2-ckeditor). You will have to use standard javascript to extract the contents of the editor for saving.

Here is a plunkr that shows the ng2-ckeditor and the inline editor. Notice how the inline editor is NOT bound to any model.

Upvotes: 2

abhy
abhy

Reputation: 241

To do 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 in my local system but facing issue on production

But after replacing this i am getting the " Cannot set property 'dir' of undefined "

I have tried setting the base_path in index.html but didn't help.

Upvotes: 2

Related Questions