[CKEDITOR] Error code: editor-destroy-iframe

[yabab-dev]

No description provided.

[yabab-dev]

Same as #23 need to use divarea plugin or inline mode

[pain0486]

I added the extraPlugins: 'divarea' and got the following:
Failed to load resource: the server responded with a status of 404 (Not Found) http://cdn.ckeditor.com/4.5.11/full/plugins/divarea/plugin.js/.

[niravpatel9898]

same here @pain0486

[yabab-dev]

Please use full-all package : http://cdn.ckeditor.com/4.5.11/full-all/plugins/divarea/plugin.js

See http://cdn.ckeditor.com/ to use local package

[pain0486]

Worked perfectly thanks @chymz !

[niravpatel9898]

Sorted !! thank you very much @chymz

[OdaiTu]

i just did the same thing and i got this error

Uncaught ReferenceError: CKEDITOR is not defined
at plugin.js:5

[AlexandrZl]

The above way doesn't work

[kjhatis]

[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-destroy-iframe
(anonymous) @ ckeditor.js:21
m @ ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:12
CKEDITOR.warn @ ckeditor.js:19
detach @ ckeditor.js:850
CKEDITOR.editor.editable @ ckeditor.js:368
destroy @ ckeditor.js:253
(anonymous) @ CKEditor.es6:69
ZoneDelegate.invokeTask @ [email protected]?main=browser:236
onInvokeTask @ core.umd.js:5966
ZoneDelegate.invokeTask @ [email protected]?main=browser:235
Zone.runTask @ [email protected]?main=browser:136
ZoneTask.invoke @ [email protected]?main=browser:304

[AshMcConnell]

Is there any way to fix this without moving to a divarea instead? We kind of need IFrame to stop styles spilling into the editor in our case.

[zqzy]

什么东西啊 写的尴尬的很

[wilsonyiyi]

thank you very much @chymz

[saostad]

Solution is :
in component:

   <ckeditor
        [config]="{extraPlugins: 'divarea'}"
        [(ngModel)]="selectedCategory.short_desc"
        debounce="500"
         name="short_desc">
    </ckeditor> 

and in index.html as reference:

<script src="https://cdn.ckeditor.com/4.7.0/full-all/ckeditor.js"></script>

[rmcsharry]

The problem with using 'divarea' is that now your editor is a div in the page itself and therefore will use the styles from your website. If, for example, you want the font-style dropdown in the editor toolbar and your website does not load those fonts, those dropdowns will not work properly when changing font-size and font-style.

The 'divarea' plugin basically replaces the hidden textarea with a div. So if you want full support in the editor you need to work out how to properly destroy the editor before leaving the current page that the iFrame is on.

[gianny82]

Hi all, I don't have the problem if from the CKEditorComponent father component I write the following code lines before to leave the page(note: _ckEditorIstance is the instance variable of the CKEditorComponent):

`if (this._ckEditorIstance) {

      this._log.debug('destroing ckeditor..');
      
      this._ckEditorIstance.removeAllListeners();
      this._ckEditorIstance.destroy();
      this._ckEditorIstance = null;
  }`

I noticed that in ckeditor.component.ts there is a setTimeout that call the same code linesbut maybe the problem is that after the blink of the setTimeout the dom has already gone.

@chymz : there is anyway a problem calling directly the destroy whitout setTimeout if the editor has the focus(I think that is the reason of the setTimeout). The problem goes away if I add the line:

this._ckEditorIstance.focusManager.blur(true);

There is no way to destroy correctly whitout setTimeout and whitout hacks?

[yangfan0095]

http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-destroy-iframe

editor-destroy-iframe

Location: plugins/wysiwygarea/plugin.js
Description: The editor's <iframe> could not be destroyed correctly because it had been unloaded before the editor was destroyed. Make sure to destroy the editor before detaching it from the DOM.
Additional data: None.

[ehsaanwelcome]

I think, issue is with settimeout in ngOnDestroy.
editor is removed first from the dom and then timeout fire
i test it without timeout and no warning.

but for this, i had to recompile the code

[kjhatis]

@ehsaanwelcome Dont know why you are thinking! the ticket is already closed.

[asterieks]

Hi all.
I dont understand how may I import an instance and close iframe.
From my point of view its impossible to call cKEditorComponentngInstance.OnDestroy() from my app.ts.
May u help me with that?

[AlanObject]

I am running into this issue and as far as I can tell from this thread the issue is still open and there is no stable work-around. If that is not true can someone post a link to a good work around?

The method of destroying all instances (loop on CKEDITOR.instances) won't work for me because I have multiple Angular components on the screen each with their own instance.

[thedailycommute]

Just in case anyone else comes looking for a solution here (and no, there isn't a solution that still allows us to use CKEDITOR without the 'divarea' plugin), this link helps explain the problem, and the fact that it has to do with the way Angular is implemented (including the latest versions): https://github.com/angular/angular/issues/14252

[AlanObject]

thedailycommute -- your link goes 404. Can you repost?

[thedailycommute]

It looks like all issues were relocated. As far as I can remember, this is the issue I originally linked to:

#212

[khanh19934]

if we use more than one plugins it show 404 not found ...

[Marshal27]

Please see this SO post. A work around on destroying iFrame in Angular6 with modification to library file to eliminate error thrown by CKEditorComponent.prototype.ngOnDestroy in ckeditor.component.js.

https://stackoverflow.com/questions/48525867/angular-ng-ckeditor-and-the-editor-destroy-iframe-bug/52655850#52655850