Clicking on a bunch of buttons of my app allows to create different customized instances of CKEditor, furhermore inside the textarerea is created a grid whith layoutmanager plugin. The created editor is resides inside the body of a bootstrap modal.
When one of the buttons is clicked for the first time everything works fine, and i can get the correct start element and the editable area can be accassed properly from my app. When i dispose the modal i destroy also the instance of CKEditor and the associated view (the app involves also Backbone.js) is removed:
$('#tallModal').one('hidden.bs.modal', function(e) {
if (this.ckeditor) {
CKEDITOR.instances[this.model.get("uniqueId")].destroy();
this.ckeditor = null;
}
this.view.close();
}.bind(this)).modal('hide');
this.ckeditor is created as follows:
this.ckeditor = $("#"+ this.model.get("uniqueId")).ckeditor(config.rte.ckeditor, $deferred.resolve).editor;
When i click another button the modal displays the correct editor instance but when this line in my code is reached (this._editor is an alias of this.ckeditor):
return this._editor.getSelection().getStartElement();
the following error is raised:
TypeError: Cannot read property 'getStartElement' of null
Debugging the code i discovered that when the editor is destroyed and then created again the editor object(this._editor) has the property status="destroyed", while when everything is working properly status="ready"
I tried this solution CKEditor issue with Bootstrap modal and many others with no luck, the line this.$element.trigger( 'focus' ); is called anyway.
I found myself an answer:
this._editor = CKEDITOR.instances[this.model.get("uniqueId")];
I had this line inside the initialize method of a Backbone.View but in this way i only get the reference to the destroyed instance.
The editor instance inside this._editor must be "refreshed" each time i want to do something with the result of:
return this._editor.getSelection().getStartElement();