如何使用jQuery直接操作CKEditor内容? [英] How do I use jQuery to directly manipulate CKEditor content?

问题描述

我想使用jQuery直接操作CKEditor实例中的内容.例如，假设我要添加一个按钮，该按钮将在编辑器内容中找到所有h1，并在标题文本前添加"Title:".使用jQuery，在普通页面内容中这很容易:类似$('h1').prepend('Title: ')这样的事情就可以做到.

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.

但是，即使在插件中，我也无法在CKEditor文档中找到有关如何对内容执行这种操作的任何信息.我找到的最接近的答案是此答案，该问题类似，声称可以在插件中实现，但实际上并没有回答如何做的问题.

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.

推荐答案

您可以指定要在jQuery $()函数中使用的文档. document 是编辑器实例的属性.然后，您必须确保在 CKEditor iframe的DOM加载后完成:

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( '(!) ' );
        }
    }
} );

请参见 jsFiddle .

这篇关于如何使用jQuery直接操作CKEditor内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！