使用jQuery操作TinyMCE内容

时间:2012-01-11 23:52:55

标签: javascript jquery tinymce

使用TinyMCE,我可以轻松地操作内容并将其发送回编辑器,如下所示:

    // get content from tinyMCE
    var content = tinyMCE.get('content').getContent();

    // manipulate content using js replace
    content = content.replace(/<\/?div>/gi, '');

    // send back to tinyMCE
    tinyMCE.get('content').setContent( content );

上面的代码工作正常。但是,我不能让这个工作:

    // get content from tinyMCE (it provides an html string)
    var content = tinyMCE.get('content').getContent();

    // make it into a jQuery object
    var $content = $(content);

    // manipulate the jquery object using jquery
    $content = $content.remove('a');

    // use a chained function to get its outerHTML
    content = $("<div />").append( $content.clone() ).html();               

    // send back to tinyMCE
    tinyMCE.get('content').setContent( content );

我的方法有问题吗?

2 个答案:

答案 0 :(得分:4)

设置和获取TinyMCE是正确的;问题在于我使用了.remove()

$content = $content.remove('a');

由于来自TinyMCE的内容是单个对象,而不是一些对象的集合,其中一些是<a>标签,因此该操作无效,并且返回的html是和原版一样。

为了删除链接,我需要这样做:

$content = $content.find('a').remove();

我在这个主题中得到了澄清:Difference between $('#foo').remove('a') and $('#foo').find('a').remove()

答案 1 :(得分:1)

您需要使用

获取编辑器内容
var content = $('#content').html();

并使用

设置内容
var content = $('#content').html('<span>NEW CONTENT</span>');