Angular material 2 tabs with ckeditor

Question

I have a problem while trying to put ng2-ckeditor within a md-tab of angular-material2.

Here's the code:

HTML:

<md-tab-group>
    <md-tab>
        <ckeditor [(ngModel)]="content"></ckeditor>
    </md-tab>
</md-tab-group>

The problem is that I get an error whenever I click on something in the ckeditor:

ckeditor.js:438 Uncaught TypeError: Cannot read property 'getSelection' of undefined at CKEDITOR.dom.selection.getNative (ckeditor.js:438) at CKEDITOR.dom.selection (ckeditor.js:436) at a.CKEDITOR.editor.getSelection (ckeditor.js:434) at $.onOpen (ckeditor.js:721) at $.d.onShow (ckeditor.js:697) at $.showBlock (ckeditor.js:716) at $.e [as click] (ckeditor.js:696) at Object.execute (ckeditor.js:690) at ckeditor.js:691 at ckeditor.js:31 at Object.callFunction (ckeditor.js:31) at HTMLAnchorElement.onclick (VM30482 -KkkPBxTMDSipcy86VCV:1)`

What is weird is that when it loads the tab (for like 1sec) it displays fine.

Are there any solutions? Thank you!

Answer 1

Hi it seems that by adding the divarea plugin it works: <ckeditor [(ngModel)]="content" [config]="{extraPlugins: 'divarea'}"></ckeditor>

Answer 2

I have a similar problem (CkEditor and Angular Material 2 Tabs).

Thew divarea plugin didn't worked out but I found out that if I place the CkEditor in the tab that will be immediately visible (the first one/selected) then the editor works fine.

Maybe this will help somebody.