Получение содержимого WP Tinymce

Я пытаюсь написать плагин Wordpress. Я получу счетные слова, которые в редакторе WP Tinymce. В принципе, это счетчик слов, который отсчитывает длительность вашего сообщения и дает вам это сообщение в мета-поле

Ваше сообщение имеет 450 слов

Моя простая проблема заключается в получении слов от Tinymce через javascript. Это не работает:

document.getElementById('content')

Идентификатор содержимого Tinymce является содержимым. Но этот код возвращает NULL. Я не смог найти правильное имя для Tinymce.

Вскоре все остальные коды готовы, просто я не могу получить слова из редактора Wordpress WYSIWYG.

Спасибо.

Ответ 1

Try:

tinymce.activeEditor.getContent();

или

tinymce.editors.content.getContent();

Если "content" - это идентификатор вашего текстового поля.

Аналогично, если вы хотите получить только выделенный (выделенный) текст в текстовой области TinyMCE, вы бы сделали:

tinymce.activeEditor.selection.getContent();

Полный API находится здесь: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor

TinyMCE также предлагает множество событий, к которым вы можете привязать, особенно в вашем случае keyup, keydown и нажатие.

Обязательно вызывайте этот материал только после загрузки TinyMCE на странице.

Ответ 2

Я помню, что крошечный MCE загружает контент динамически из ajax, поэтому, возможно, ваш document.getElementById('content') попытается получить этот элемент слишком рано.

Я думаю, у вас есть 2 способа решить эту проблему:

1) дождитесь завершения события ajax с помощью прослушивателя событий и после этого получите элемент и его текст.

2) используйте функцию tinyMce для получения содержимого текстовой области. Здесь вы можете найти полезные советы: http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

Ответ 3

Принятый ответ действительно работал у меня, но для нескольких редакторов на одной странице мне нужно получить к нему доступ через идентификатор редактора, поэтому ниже

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

Работал для меня.

Ответ 4

Вот пример. Текст, находящийся ниже редактора, будет обновлен, если ключевое слово произошло в режиме Visual или HTML.

Событие Visual Mode в файле php:

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

Ответ 5

Это сработало для меня:

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

Где текст - это идентификатор редактора tinymce

Ответ 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' );
}