I'm currently working on a project that makes extensive use of JQuery UI modal dialogs. Some of these dialogs use CKEditor instances. I've been fighting with this for the last 24 hours, and I'm getting very frustrated. Any help that anyone can offer is greatly appreciated.
Here's what's going on. I have a Backbone.js view that I've created as a base for the edit forms I show throughout the application. This base edit view contains a lot of the plumbing to get my forms working, including code to create and destroy instances of CKEditor.
Initially I used a div that contained the basic elements of my base form that I keep hidden in my _layout.cshtml file (this is an MS MVC3 app), and that was working great. It had all of the elements that I shared across all of my modal popup forms, and every time I needed a form I'd just point my backbone view to that base form DIV and things worked great. I'd pull the individual form contents from templates and set the content of a fieldset in that base form DIV each time, display the form in a modal dialog, and on save or cancel clean everything up.
The problems arose when I needed to have multiple modals on the screen at the same time. The problem was that I couldn't use the same DOM element for the content of two modal forms at the same time. So the approach I took was to clone the base form's DOM element when I created the view. Now I'm having issues with the forms that use CKEditor, and I think it has something to do with cleanup, but I'm not sure how.
Here's the code I use to clone the base form DIV in my render method of the view:
And here's the code where I create the CKEditor instance:
Currently, when I close the form, the inheriting view tracks any instances of CKEditor on that view. In my clean-up method, I destroy each CKEditor instance that exists in the view, setting the view property that pointed to that instance to null after the instance is destroyed.
Here's the method on my base form view that cleans up individual editor instances. This is called from a clean-up method on the views that inherit from the base form view
What's happening now is that the initial form displays without issue. However, every time I try to open up a second modal form, I get an error that says "holderElement is null" on line 176 of plugin.js (holderElement.setHtml( '' );)
I've tried everything...I was initially using the jQuery plugin to create the forms, but I took that out. I then changed the way that I create and destroy the editor instances. I'm still getting the same result - the first time I load the form in the modal it works, but every subsequent attempt before reloading the entire page fails.
ANY help or insight that could get me over this hurdle is greatly appreciated!
Here's what's going on. I have a Backbone.js view that I've created as a base for the edit forms I show throughout the application. This base edit view contains a lot of the plumbing to get my forms working, including code to create and destroy instances of CKEditor.
Initially I used a div that contained the basic elements of my base form that I keep hidden in my _layout.cshtml file (this is an MS MVC3 app), and that was working great. It had all of the elements that I shared across all of my modal popup forms, and every time I needed a form I'd just point my backbone view to that base form DIV and things worked great. I'd pull the individual form contents from templates and set the content of a fieldset in that base form DIV each time, display the form in a modal dialog, and on save or cancel clean everything up.
The problems arose when I needed to have multiple modals on the screen at the same time. The problem was that I couldn't use the same DOM element for the content of two modal forms at the same time. So the approach I took was to clone the base form's DOM element when I created the view. Now I'm having issues with the forms that use CKEditor, and I think it has something to do with cleanup, but I'm not sure how.
Here's the code I use to clone the base form DIV in my render method of the view:
var newId = "formDialog" + Math.round(Math.random() * 100); // get a random ID var newElement = $("#baseFormDialog") .clone(true, true) .attr("id", newId); // Clone the base form and set the new ID this.setElement(newElement); // Set this new element as the element // Associated with this view
And here's the code where I create the CKEditor instance:
var domElement = (parentElement.get())[0]; // parentElement is a jQuery object...need to // get DOM element if (!content) content = ""; // Make sure my content isn't undefined...not sure // what that might do, so I'll make sure // it doesn't happen var editor = CKEDITOR.appendTo(domElement, config, content); // Append the editor to my parentElement return editor;
Currently, when I close the form, the inheriting view tracks any instances of CKEditor on that view. In my clean-up method, I destroy each CKEditor instance that exists in the view, setting the view property that pointed to that instance to null after the instance is destroyed.
Here's the method on my base form view that cleans up individual editor instances. This is called from a clean-up method on the views that inherit from the base form view
TearDownEditor: function (editorInstance) { // Destory the CKEditor instance if (editorInstance) editorInstance.destroy(); }
What's happening now is that the initial form displays without issue. However, every time I try to open up a second modal form, I get an error that says "holderElement is null" on line 176 of plugin.js (holderElement.setHtml( '' );)
I've tried everything...I was initially using the jQuery plugin to create the forms, but I took that out. I then changed the way that I create and destroy the editor instances. I'm still getting the same result - the first time I load the form in the modal it works, but every subsequent attempt before reloading the entire page fails.
ANY help or insight that could get me over this hurdle is greatly appreciated!
Re: Issue applying CKEditor to dynamically created modal for
I tried to use instance.destroy(true), instance = null and delete instance. But it still raising the same error.
I can't wonder that just we fought with this.
I'm stuck.
[]s
Re: Issue applying CKEditor to dynamically created modal for
Maybe 4.0 will fix this.