如何使用jQuery直接操作CKEditor内容？

Question

我想使用jQuery直接操作CKEditor实例中的内容。例如，假设我想添加一个按钮，该按钮将在编辑器内容中找到所有h1，并在标题文本前面加上“Title：”。使用jQuery在普通页面内容中很容易：像$('h1').prepend('Title: ')这样的东西应该这样做。

但是，我在CKEditor文档中找不到有关如何对内容执行此类操作的任何信息，即使是在插件中也是如此。我发现的最近的是this answer类似的问题，声称它可能来自插件，但它实际上并没有回答如何做的问题。

Answer 1

你可以specify which document to use in jQuery $() function。 document是编辑器实例的属性。然后你必须确保它在CKEditor iframe's DOM is loaded之后完成：

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

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

请参阅jsFiddle。