如何使用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 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( '(!) ' );
        }
    }
} );

参见jsFiddle。

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

How do I use jQuery to directly manipulate CKEditor content?

jquery

ckeditor