CKEDITOR: Undo All DOM changes - javascript

I'm using CKEDITOR's Inline toolbar to edit text. The plugin does a lot of DOM changes and I'm fine with that.
What I want to do is to remove all attributes, elements, classes, ids, and everything that CKEDITOR added to my DOM. I can simply find all the changes and remove them individually but I want to know if there is an easier way. Also I want to be able to undo these changes on button click.

The closest that you can get using the API is by calling editor.destroy(); but I think that some people stated that it still leaves some artifacts in inline editing.

You need to look into getData and setData methods here
What you can do is to save the old state in a variable and then you can replace it using the setData method
var old = CKEDITOR.instances.editor1.getData();
$('#undo').click(function(e){
e.preventDefault();
CKEDITOR.instances.editor1.setData(old);
});
EXAMPLE

Related

better way of doing .html("").append()

I have a message-slot in the page, I show different messages in it. For each message I run the template and I append that HTML to messageslot like this. I add html("") to clear the box first. Is there a better way of doing this?
$("#message-slot").html("").append(messagetemplate);
Just do:
$("#message-slot").html(messagetemplate);
It will clear any existing contents before replacing them (reference):
When .html() is used to set an element's content, any content that was
in that element is completely replaced by the new content.
As a side note, be mindful of any existing event handlers that might be attached to elements you're removing. You'll want to be sure to unbind them. See unbind() and remove() for more info.

Change the height of textarea, CKEditor library

I'm trying to use CKEditor and I need to change the size, but this is not the real problem, because I can. The problem is that when I change the size I can not set data to textarea. I think that the problem is in the size change because when I don't use it, I don't have any problems.
The form that I used to change the size is:
CKEDITOR.replace('editor'+id,{height: "70%"});
editor = CKEDITOR.appendTo( 'editor'+id);
It works fine! The problem is when I use setData() like this:
editor.setData(text); //where text is the data;
Are you intending to have two text boxes? If not, you should use either CKEDITOR.replace() or CKEDITOR.appendTo() but not both. From the project's samples folder:
CKEDITOR.appendTo is basically to place editors inside existing DOM elements. Unlike CKEDITOR.replace a target container to be replaced is no longer necessary. A new editor instance is inserted directly wherever it is desired.
If yes, then perhaps id is being set to the same value elsewhere in your code.

is it possible to view one html element twice on the same page, or must I create a duplicate?

I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).

own dojo/dijit Editor Plugin is disabled - why?

I am trying to write my own Dojo/Dijit Editor Plugin. the only Information i found on the topic is this forum post recommending to use the print plugin as a pattern.
So i did build my own plugin, copying the print plugin and not changing anything apart from the name.
Then i included the plugin to an editor instance.
But instead of getting the print buttons functionality and the print button, i get a button with classes "dijitButtonDisabled dijitDisabled" and no functionality.
The Print button does work though.
Anyone any idea why that is?
In JavaScript events are often hooked onto individual objects, which are referenced by things like id, classes, and other parameters. For this to work you need both the selector and the original element to match.
It sounds like you updated some parts of the code (by changing the names) but did not update the corresponding actions. I'd start by looking for any remaining events bound to the previous names (in jQuery, look for bind() or live()) and changing those selectors to the new names if you find them.

Does JQuery have a way to unbind events in random HTML string?

I'm using JQuery to set the HTML inside a div. Something like this:
$(div).html(strHtmlBlob);
strHtmlBlob is a chunk of HTML returned via Ajax from the server. After, it's assigned, I set up some events for elements in the new HTML blob by doing this:
$(div).find("a").click(a_ClickHandler);
That all works perfectly fine. The problem is REMOVING the events. I want to make sure I clean up the DOM properly.
I'm removing the HTML like so:
$(div).html("");
But I can see that the events are still there. Is there a way to clean up events for elements that no longer exist?
Use .remove() instead of .html("")
That will clear the elements and events all at once. JQuery does a lot of cleanup magic under the covers if you let it.
$(div).find('a').unbind('click');
Check out the documentation.
Alternatively, you should empty() it:
$(div).empty();
According to the docs:
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.

Categories