How to use CKEditor with Angular's ngShow/ngHide directives

Question

I am using CKEditor as my WYSIWYG editor for the text input on my site. And I ran into a problem of using this editor with angular's ng-show directive.

When the editor loads with ng-show="true" then the editor works fine. Meaning the toolbar pops up, the buttons on the toolbar work, and the text is editable as well.

However when the editor loads initially with ng-show="false" and then is later switch to ng-show="true" the toolbar still comes up, but contenteditable attribute is set to false for whatever reason, and the buttons are disabled.

My CKEditor instance is an inline editor and loaded with a custom Angular directive. The html template sets the contenteditable attribute to true.

Answer 1

You got that problem because CKEDITOR tries to modify the textarea since the very beginning of HTML rendering but the textarea didn't exist yet since the ng-show condition was not met yet.

There are Angular modules for CKEDITOR we can use available on the internet. You can choose one and use it.

Answer 2

Try ng-if instread. It basically doesn't render the editor at all on the contrary. It seems to be working well in the above scenario.