David's Computer Stuff Journal

Manipulating ckeditor data with jQuery

Posted by David N. Welton Sat, 05 Mar 2011 14:21:00 GMT

I'm working on a project that utilizes CKeditor and need to manipulate the data it contains.  Since I'm familiar with jQuery and it's fairly efficient at doing that sort of thing, rather than figuring out how CKeditor manipulates things internally, I wanted to, at least to get started, access things in jQuery.  There isn't a lot of information out there on the best way to do that.  Here's what I figured out - it seems to work pretty well:

    var editor = theeditor();
    var contents = $("<div id='specialwrapperthing'>" + editor.getData() + "</div>");

    .... hack away with jQuery ....
    editor.setData(contents.html());

Basically, you just wrap up what the editor hands you in terms of the data, hack away on it, and then put the HTML back into the editor.

2 comments |

Trackbacks

Use the following link to trackback from your own site:
http://journal.dedasys.com/trackbacks?article_id=2220

  1. Adrian Sutton
    about {{count}} hours later:

    A better option would be to retrieve the internal DOM (or root element if you're using contenteditable mode) from CKEditor and then use that in place of the contents element. The changes will show up directly in CK without needing to serialise and then reparse the document which tends to be quite slow on large documents.

    I'm not sure what the exact function is for CKEditor - in TinyMCE it's getDoc() or getBody() and I'd expect something similar in CK.

  2. David N. Welton
    about {{count}} hours later:

    Yeah, I figured out how to do that as well, but what you see is not necessarily what you actually get, in some cases. For instance, to make you aware of anchors, they show a little icon, which of course is not actually in the HTML that it creates.