如何使用jQuery在文本和视觉两种模式下替换tinyMCE编辑器的内容?

时间:2017-11-03 作者:kosinix

我在WordPress的post editor中的Add Media按钮旁边添加了一个按钮。它被称为插入内容按钮。

当按下此按钮时,它应将内容(纯文本或HTML)发送到编辑器中,替换其中的任何文本。

代码应在文本和视觉模式下工作。我如何使用jQuery做到这一点?

下面的图片进一步澄清了这个问题:

enter image description here

注意:已经有各种答案,但它们只是在视觉模式下替换文本的答案。

1 个回复
最合适的回答,由SO网友:kosinix 整理而成

首先要做的是选择活动编辑器。这里,我们使用其id选择编辑器,即content.

var activeEditor = tinyMCE.get(\'content\');
然后我们用tinyMCE的setContent:

var activeEditor = tinyMCE.get(\'content\');
var content = \'HTML or plain text content here...\';
activeEditor.setContent(content);
但是,如果编辑器首先处于文本模式,则在加载页面后,activeEditor 将是null. 因此,我们需要考虑:

var activeEditor = tinyMCE.get(\'content\');
var content = \'HTML or plain text content here...\';
if(activeEditor!==null){
    activeEditor.setContent(content);
}
setContent 仅适用于tinyMCE,如果编辑器处于文本模式,则此选项无效。因此,我们必须直接调用textarea并更新其值:

var activeEditor = tinyMCE.get(\'content\');
var content = \'HTML or plain text content here...\';
if(activeEditor!==null){
    activeEditor.setContent(content);
} else {
    $(\'#content\').val(content);
}
然而,另一个警告是,如果切换到视觉模式,然后再切换回文本模式,activeEditor 不再为null,因此setContent 将始终调用而不是textarea。所以我们必须检查编辑器的状态。为了确定当前模式,我们监视div#wp content wrap的类。总而言之:

var content = \'HTML or plain text content here...\';
if($(\'#wp-content-wrap\').hasClass(\'html-active\')){ // We are in text mode
    $(\'#content\').val(content); // Update the textarea\'s content
} else { // We are in tinyMCE mode
    var activeEditor = tinyMCE.get(\'content\');
    if(activeEditor!==null){ // Make sure we\'re not calling setContent on null
        activeEditor.setContent(content); // Update tinyMCE\'s content
    }
}

结束