CKEditor instance already exists

Question

I am using jquery dialogs to present forms  fetched via AJAX   On some forms I am using a CKEditor for the textareas  The editor displays fine on the first load   When the user cancels the dialog  I am removing the contents so that they are loaded fresh on  a later request  The issue is  once the dialog is reloaded  the CKEditor claims the editor already exists   uncaught exception   CKEDITOR editor  The instance  textarea name  already exists    The API includes a method for destroying existing editors  and I have seen people claiming this is a solution   if  CKEDITOR instances  textarea name      CKEDITOR instances  textarea name   destroy      CKEDITOR replace  textarea name      This is not working for me  as I receive a new error instead   TypeError  Result of expression  i contentWindow   null  is not an object    This error seems to occur on the  destroy    rather than the  replace     Has anyone experienced this and found a different solution   Is is possible to  re-render  the existing editor  rather than destroying and replacing it   UPDATED Here is another question dealing with the same problem  but he has provided a downloadable test case

User · Answer

I had exactly the same problem like jackboberg. I was using dynamic form loading into jquery dialogs then attaching various widgets (datepickers, ckeditors etc...). And I tried all solutions noted above, none of them worked for me.

For some reason ckeditor only attached the first time I loaded form, the second time I got exactly the same error message jackboberg did.

I've analyzed my code and discovered that if you attach ckeditor in "mid-air" that is while form content is still not placed into dialog, ckeditor won't properly attach its bindings. That is since ckeditor is attached in "mid-air", second time you attach it in "mid-air"... poof ... an error is thrown since the first instance was not properly removed from DOM.

This was my code that ptoduced the error:

var $content = $(r.content); // jQuery can create DOM nodes from html text gotten from <xhr response> - so called "mid-air" DOM creation
$('.rte-field',$content).ckeditor(function(){});
$content.dialog();

This is the fix that worked:

var $content = $(r.content).dialog(); // first create dialog
$('.rte-field',$content).ckeditor(function(){}); // then attach ckeditor widget

User · Answer

You can remove any ckeditor instance by remove method of ckeditor  Instance will be id or name of the textarea   if  CKEDITOR instances instance name         CKEDITOR remove CKEDITOR instances instance name

User · Answer

I ve prepared my own solution based on all above codes            textarea ckeditor          each function                       var editorId     this  attr  id                     try                           var instance   CKEDITOR instances editorId                       if  instance    instance destroy true                                        catch e                     finally                       CKEDITOR replace editorId                                       It works perfectly for me   Sometimes after AJAX request there is wrong DOM structure   For instace    lt div id  result  gt      lt div id  result gt       CONTENT     lt  div gt   lt  div gt    This will cause issue as well  and ckEditor will not work  So make sure that you have correct DOM structure

User · Answer

I had this problem too  but I solved it in a much simpler way     I was using the class  ckeditor  in my jQuery script as the selector for which textareas I wanted use for CKEditor  The default ckeditor JS script also uses this class to identify which textareas to use for CKEditor    This meant there is a conflict between my jQuery script and the default ckeditor script    I simply changed the class of the textarea and my jQuery script to  do ckeditor  you could use anything except  ckeditor   and it worked

User · Answer

CKeditor 4 2 1  There is a lot of answers here but for me I needed something more  bit dirty too so if anyone can improve please do   For me MODALs where my issue   I was rendering the CKEditor in a modal  using Foundation  Ideally I would have destoryed the editor upon closing  however I didn t want to mess with Foundation   I called delete  I tried remove and another method but this was what I finally settled with   I was using textarea s to populate not DIVs   My Solution    hard code the DIV removal  due to duplication of CKeditors on page however they didn t work           cke myckeditorname   remove           if  CKEDITOR instances  myckeditorname                      delete CKEDITOR instances  myckeditorname                    CKEDITOR replace  myckeditorname   GetCKEditorSettings                   else                   CKEDITOR replace  myckeditorname   GetCKEditorSettings                     this was my method to return my specific formatting  which you might not want       function GetCKEditorSettings                return                       linkShowAdvancedTab  false                      linkShowTargetTab  false                      removePlugins   elementspath magicline                       extraAllowedContent   hr blockquote div                       fontSize sizes   small 8px normal 12px large 16px larger 24px huge 36px                        toolbar                              FontSize                              Bold    Italic    Underline    -    NumberedList    BulletedList    -    Link    Unlink                              Smiley

User · Answer

For ajax requests     for k in CKEDITOR instances       var instance   CKEDITOR instances k       instance destroy        CKEDITOR replaceAll      this snipped removes all instances from document   Then creates new instances

User · Answer

CKEDITOR instances   new Array      I am using this before my calls to create an instance  ones per page load   Not sure how this affects memory handling and what not  This would only work if you wanted to replace all of the instances on a page

User · Answer

This is what worked for me    for name in CKEDITOR instances      CKEDITOR instances name  destroy

User · Answer

If you know the name of the editor then it is pretty simple to do this    For example if the name of the editor is editor1  this is the id of div or textarea  then you simply check like this  if CKEDITOR instances  editor1           Instance present  else        Instance not present       If you want to get the number of initialized editor s then do like the below  for let inst of CKEDITOR instances         inst is an Obj of editor instance       inst name will give the name of the editor instance

User · Answer

I am in the situation where I have to controls that spawn dialogs  each of them need to have a ckeditor embedded inside these dialogs   And it just so happens the text areas share the same id    normally this is very bad practice  but I have 2 jqGrids  one of assigned items and another of unassigned items    They share almost identical configuration   Thus  I am using common code to configure both   So  when I load a dialog  for adding rows  or for editing them  from either jqGrid  I must remove all instances of CKEDITOR in all textareas      textarea   each function         try                if CKEDITOR instances   this  0  id     null                        CKEDITOR instances   this  0  id  destroy                        catch e                     This will loop over all textareas  and if there is a CKEDITOR instance  then destroy it   Alternatively if you use pure jQuery      textarea   each function         try                  this  ckeditorGet   destroy              catch e

User · Answer

I chose to rename all instances instead of destroy replace - since sometimes the AJAX loaded instance doesn t really replace the one on the core of the page     keeps more in RAM  but less conflict this way       if  CKEDITOR  amp  amp  CKEDITOR instances            for  var oldName in CKEDITOR instances                var newName    ajax  oldName              CKEDITOR instances newName    CKEDITOR instances oldName               CKEDITOR instances newName  name   newName              delete CKEDITOR instances oldName

User · Answer

For this to work you need to pass boolean parameter true when destroying instance       var editor   CKEDITOR instances name       if  editor    editor destroy true         CKEDITOR replace name

User · Answer

Try this   for  name in CKEDITOR instances        CKEDITOR instances name  destroy true

User · Answer

I had the same problem where I was receiving a null reference exception and the word  null  would be displayed in the editor   I tried a handful of solutions  including upgrading the editor to 3 4 1 to no avail   I ended up having to edit the source   At about line 416 to 426 in  source plugins wysiwygarea plugin js  there s a snippet like this   iframe   CKEDITOR dom element createFromHtml    amp lt iframe            gt  lt  iframe gt        In FF at least  the iframe isn t completely instantiated by the time it s needed   I surrounded the rest of the function after that line with a setTimeout function   iframe   CKEDITOR dom element createFromHtml    lt iframe            gt  lt  iframe gt      setTimeout function             Running inside of Firefox chrome the load event doesn t bubble like in a normal page   5689             1000           The script that launches the bootstrap logic on  domReady   so the document       The text renders consistently now in the modal dialogs

User · Answer

you don t need to destroy the object CKeditor  you need remove       Change this    CKEDITOR instances  textarea name   destroy     for that    CKEDITOR remove CKEDITOR instances  textarea name

User · Answer

I ran into this exact same thing and the problem was that the wordcount plugin was taking too long to initialize   30  seconds   The user would click into the view displaying the ckeditor  then cancel  thereby ajax-loading a new page into the dom   The plugin was complaining because the iframe or whatever contentWindow is pointing to was no longer visible by the time it was ready to add itself to the contentWindow   You can verify this by clicking into your view and then waiting for the Word Count to appear in the bottom right of the editor   If you cancel now  you won t have a problem   If you don t wait for it  you ll get the i contentWindow is null error   To fix it  just scrap the plugin   if  CKEDITOR instances  textarea name          CKEDITOR instances  textarea name   destroy      CKEDITOR replace  textarea name     removePlugins   wordcount         If you need a word counter  register for the paste and keyup events on the editor with a function that counts the words

User · Answer

I ve had similar issue where we were making several instances of CKeditor for the content loaded via ajax       CKEDITOR remove     Kept the DOM in the memory and didn t remove all the bindings       CKEDITOR instance instance id  destroy     Gave the error i contentWindow error whenever I create new instance with new data from ajax  But this was only until I figured out that I was destroying the instance after clearing the DOM    Use destroy   while the instance  amp  it s DOM is present on the page  then it works perfectly fine

User · Answer

I learned that  delete CKEDITOR instances editorName    by itself  actually removed the instance  ALL other methods i have read and seen  including what was found here at stackoverflow from its users  did not work for me   In my situation  im using an ajax call to pull a copy of the content wrapped around the  and  s  The problem happens to be because i am using a jQuery  live event to bind a  Edit this document  link and then applying the ckeditor instance after success of the ajax load  This means  that when i click another link a link with another  live event  i must use the delete CKEDITOR instances editorName  as part of my task of clearing the content window  holding the form   then re-fetching content held in the database or other resource

User · Answer

remove class  ckeditor    it might have triggered ckeditor initialization

User · Answer

To support dynamic  Ajax  loading of forms  without page refreshes between  which contain textareas with the same  same form is called again  or different ID s  previously unloaded form  and convert them to CKEditor elements I did the following  using the JQuery adapter    After the page has finished every Ajax call that delivers a textarea to be converted  I make a call to the following function   setupCKeditor     This looks like this  it assumes your textareas to be converted to RTE s have class  yourCKClass            Turns textAreas into TinyMCE Rich Text Editors where    class  tinymce applied to textarea      function setupCKeditor            define editor configuration           var config    skin    kama            Remove and recreate any existing CKEditor instances     var count   0      if  CKEDITOR instances      undefined             for var i in CKEDITOR instances                 var oEditor     CKEDITOR instances i               var editorName   oEditor name                   Get the editor data              var data         editorName  val                    Check if current instance in loop is the same as the textarea on current page             if     textarea yourCKClass   attr  id      editorName                    if CKEDITOR instances editorName                             delete and recreate the editor                     delete CKEDITOR instances editorName                             editorName  ckeditor function       config                       count                                                                  If no editor s exist in the DOM  create any that are needed                   if  count    0               textarea yourCKClass   each  function index                     var editorName     this  attr  id                          editorName  ckeditor function           editorName  val data     config                                 I should mention that the line          editorName  ckeditor function           editorName  val data     config     could  and should  be simply         editorName  ckeditor function       config     however I found that the editor would often show the correct content for a second after loading and them empty the editor of the desired content   So that line with the callback code forces the CKEditor content to be the same as the originating textarea content   Causes a flicker when used  If you can avoid using it  do so

User · Answer

I hade the same problem with a jQuery Dialog   Why destroy the instance if you just want to remove previous data    function clearEditor id      var instance   CKEDITOR instances id     if instance          instance setData

User · Answer

The i contentWindow is null error seems to occur when calling destroy on an editor instance that was tied to a textarea no longer in the DOM   CKEDITORY destroy takes a parameter noUpdate   The APIdoc states           If the instance is replacing a DOM element  this parameter indicates whether or not to update the element with the instance contents       So  to avoid the error  either call destroy before removing the textarea element from the DOM  or call destory true  to avoid trying to update the non-existent DOM element   if  CKEDITOR instances  textarea name         CKEDITOR instances  textarea name   destroy true        using version 3 6 2 with jQuery adapter

User · Answer

Indeed  removing the   ckeditor  class from your code solves the issue  Most of us followed the jQuery integration example from the ckeditor s documentation        jquery ckeditor    ckeditor  function        callback code         skin    office2003         and thought      maybe I can just get rid or the   jquery   part     I ve been wasting my time tweaking the callback function  because the  skin  office2003    actually worked   while the problem was coming from elsewhere   I think the documentation should mention that the use of  ckeditor  as a class name is not recommended  because it is a reserved keyword   Cheers

User · Answer

This is the fully working code for jquery  load   api and ckeditor  in my case I am loading a page with ckeditor  into div with some jquery effects  I hope it will help you         function                 runEffect   function fileload lessonid act                var selectedEffect    drop               var options                        effect    effect  selectedEffect  options  200  callback fileload lessonid act                        function callback fileload lessonid act                setTimeout function      load the page in effect div                      effect    load fileload  lessonid lessonid act act                         effect   show   drop                               direction   right    200                        effect   ajaxComplete function event  XMLHttpRequest  ajaxOptions                        loadCKeditor      call the function after loading page                                    100                           function loadCKeditor              you need to destroy  the instance if already exist             if  CKEDITOR instances  introduction                                   CKEDITOR instances  introduction   destroy                              CKEDITOR replace  introduction   getSelection   getSelectedText                                             button for call the function                                    lt input type  button  name  button  id  button  onclick  runEffect  lesson php      add     gt

User · Answer

This is the simplest  and only  solution that worked for me   if CKEDITOR instances editorName      delete CKEDITOR instances editorName   CKEDITOR replace editorName     Deleting this entry in the array prevents this form safety check from destroying your application   destroy   and remove   did not work for me

User · Answer

var e  CKEDITOR instances  sample    e destroy    e  null

User · Answer

function loadEditor id        var instance   CKEDITOR instances id       if instance                CKEDITOR remove instance             CKEDITOR replace id

User · Answer

i had the same problem with instances  i was looking everywhere and finally this implementation works for me           set my instance id on a variable      myinstance   CKEDITOR instances  info           check if my instance already exist      if  myinstance             CKEDITOR remove info               call ckeditor again          info   ckeditor           toolbar   Basic           entities  false          basicEntities  false

User · Answer

Perhaps this will help you out - I ve done something similar using jquery  except I m loading up an unknown number of ckeditor objects  It took my a while to stumble onto this - it s not clear in the documentation   function loadEditors         var  editors      textarea ckeditor        if   editors length             editors each function                 var editorID     this  attr  id                var instance   CKEDITOR instances editorID               if  instance    instance destroy true                 CKEDITOR replace editorID                         And here is what I run to get the content from the editors       var  editors      textarea ckeditor        if   editors length             editors each function                 var instance   CKEDITOR instances   this  attr  id                 if  instance      this  val instance getData                           UPDATE  I ve changed my answer to use the correct method - which is  destroy     remove   is meant to be internal  and was improperly documented at one point

User · Answer

Its pretty simple  In my case  I ran the below jquery method that will destroy ckeditor instances during a page load  This did the trick and resolved the issue -  JQuery method -  function resetCkEditorsOnLoad         for var i in CKEDITOR instances            editor   CKEDITOR instances i               editor destroy                editor   null             function                      form-button   button            button   button         resetCkEditorsOnLoad       CALLING THE METHOD DURING THE PAGE LOAD                   blah   blah   blah        REST OF YOUR BUSINESS LOGIC GOES HERE               That s it  I hope it helps you   Cheers  Sirish

User · Answer

For those using the jquery  adapter  and having trouble  as I was   as super hackish yet working solution is to do something like this      content editor plugin  function           fn contentEditor   function  params             var xParams     extend       fn contentEditor defaultParams  params           return this each  function                    var  editor     this               var  params     extend     xParams   editor data                     if identifier is set  detect type based on identifier in  editor             if   params identifier type                      params type    editor find  params identifier type  val                                editor data  type    params type                   edit functionality             editButton       lt button gt Edit Content lt  button gt    on  click  function                       content container                 var  cc            editor data  type                         editor window                 var  ew       lt form class  editorWindow    gt                      ew appendTo  body                        editor content                  ec       lt textarea name  editorContent    gt    val  cc html                      ec appendTo  ew                    ec ckeditor                         ec ckeditorGet   setMode  source                       ew dialog                        autoOpen   true                       modal   true                       draggable   false                       resizable   false                       width   850                       height    auto                        title    Content Editor                        buttons                               Save   function                                                              cc html   ec val                                   ec ckeditorGet   destroy                                  ew remove                                                        Cancel   Close   function                                    ec ckeditorGet   destroy                                                         ew remove                                                                          close   function                              ec ckeditorGet   destroy                                                 open   function                              ew find  a cke button source   click                             setTimeout function                                 ew find  a cke button source cke on   click                               500                                                              return false                               editButton appendTo   editor                               set default option values       fn contentEditor defaultParams              identifier                  type    input name  type                            jQuery         function            form contentEditor   contentEditor           The key point being this part                    open   function                          ew find  a cke button source   click                         setTimeout function                             ew find  a cke button source cke on   click                           500                       This fixes the problem with the editor text not being visible the next time you open the dialog  I realise this is very hackish  but considering that most of these are going to be used for admin tools  I don t think that s as big a concern as it normally would be   and this works  so hopefully it will save someone some time

User · Answer

This functions works for me in CKEditor version 4 4 5  it does not have any memory leaks   function CKEditor Render CkEditor id            var instance   CKEDITOR instances CkEditor id           if  CKEDITOR instances instance                CKEDITOR instances instance destroy                      CKEDITOR replace CkEditor id              call this function as below  var id    ckeditor      Id of your textarea  CKEditor Render id

[javascript] CKEditor instance already exists

Examples related to javascript

Examples related to ckeditor