jquery - 如何使用 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 .