How do I use jQuery to directly manipulate CKEditor content?

Question

I would like to use jQuery to directly manipulate the content in a CKEditor instance. For example, let's say I want to add a button that will find all h1's in the editor content and prepend the heading text with "Title:". This is easy in normal page content with jQuery: something like $('h1').prepend('Title: ') should do it.

However, I cannot find any information in the CKEditor docs about how to perform this kind of manipulation on the content, even from within a plugin. The closest I've found is this answer to a similar question that claims it's possible from within a plugin, but it doesn't actually answer the question of how to do it.

Answer 1

You can specify which document to use in jQuery $() function. document is a property of editor instance. Then you got to make sure it's done after CKEditor iframe's DOM is loaded:

CKEDITOR.replace( 'editor', {
    on: {
        instanceReady: function() {
            var doc = this.document.$;

            $('p', doc ).prepend( '(!) ' );
        }
    }
} );

See the jsFiddle.