使用 jQuery 操作 TinyMCE 内容

Question

使用 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 );

我的方法有问题吗？

Answer 1

设置和访问 TinyMCE 是正确的；问题出在我使用 .remove() 上：

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

由于 TinyMCE 中的内容是单个对象，而不是对象集合，其中一些对象是 < ;a> 标签，该操作没有效果，返回的 html 与原始的相同。

为了删除链接，我需要这个：

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

我在此线程中收到了澄清： $('#foo').remove('a') 和 $('#foo').find('a').remove() 之间的区别

Answer 2

您需要使用获取编辑器内容

var content = $('#content').html();

并使用设置内容

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