获取 WP Tinymce 的内容

Question

我正在尝试编写一个 WordPress 插件。我将在 WP 的 Tinymce 编辑器中计算单词数。 基本上，它是一个字计数器，可以计算您帖子的长度并在元框中向您提供此消息

您的帖子有 450 个字

我唯一的问题是通过 javascript 从 Tinymce 获取单词。这不起作用：

document.getElementById('content')

Tinymce 的内容 id 是 content 。但这段代码返回NULL。我找不到 Tinymce 的有效 ID 名称。

很快，其他所有代码都准备好了，只是我无法从 Wordpress 的所见即所得编辑器中获取单词。

谢谢。

Answer 1

尝试：

tinymce.activeEditor.getContent();

或

tinymce.editors.content.getContent();

其中“内容”是您的文本区域的 ID。

同样，如果您只想获取 TinyMCE 文本区域中选定的（突出显示的）文本，您可以这样做：

tinymce.activeEditor.selection.getContent();

完整的 API 在这里：http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor

TinyMCE 还提供了许多可以绑定的事件，特别是在您的情况下 < a href="http://tinymce.moxiecode.com/wiki.php/API3%3aevent.tinymce.Editor.onKeyUp">keyup, keydown 和

确保仅在 TinyMCE 加载到页面后才调用此内容。

Answer 2

接受的答案确实对我有用，但对于一页上的多个编辑器，我必须通过编辑器 ID 访问它，所以下面

tinymce.editors['content_id'].getContent();

对我有用。

Answer 3

我记得小型 MCE 从 ajax 动态加载内容，所以也许您的 document.getElementById('content') 尝试过早获取该元素。

我认为你有两种方法来解决这个问题：

1）等待ajax事件完成，使用事件监听器，然后获取元素及其文本。

2）使用tinyMce函数获取文本区域的内容。在这里您可能会找到一些有用的提示：
http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

Answer 4

这是一个例子。无论 keyup 发生在 Visual 还是 HTML 模式下，编辑器下方的文本都会更新。

php 文件中的 Visual 模式 事件：

function my_tiny_mce_before_init( $init ) {
    $init['setup'] = "function( ed ) { ed.onKeyUp.add( function( ed, e ) { repeater( e ); }); }";
    return $init;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

HTML 模式javascript 文件中的 事件：

jQuery( document ).ready( function( $ ) {

    $('<div id=look-at-it></div>').insertAfter('#postbox-container-1');

    $('#content').on('keyup', function( e ) {   
        repeater( e );
    });
});


var repeater = function ( e ) {
    var targetId = e.target.id;
    var text = '';

    switch ( targetId ) {

         case 'content':
             text = jQuery('#content').val(); 
             break;

         case 'tinymce':
             if ( tinymce.activeEditor )
                 text = tinymce.activeEditor.getContent();
             break;
    }

    jQuery('#look-at-it').html( text );
}

---

测试环境：

• WordPress 3.4.2

Answer 5

这对我有用：

if (jQuery("#wp-text-wrap").hasClass("tmce-active")){
    text1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    text1 = jQuery('[name="text"]').val();

其中text是tinymce编辑器的ID

Answer 6

这似乎在我测试的每种情况下都对我有用。无论我们是从文本模式还是视觉模式开始，也无论之后更改模式并添加更多内容。

if ( tinyMCE.editors['id-of-your-editor'] ) {
    tinyMCE.editors['id-of-your-editor'].save();
    tinyMCE.editors['id-of-your-editor'].load();
    var your_content = tinyMCE.editors['id-of-your-editor'].getContent();
} else if ( document.getElementById( 'id-of-your-editor' ) ) {
    var your_content = document.getElementById( 'id-of-your-editor' ).value;
} else {
    alert ( 'Error' );
}