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

Question

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

Ваш пост содержит 450 слов

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

document.getElementById('content')

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

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

Спасибо.

Answer 1

Попробуйте:

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 на страницу.

Answer 2

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

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

Сработало для меня.

Answer 3

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

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

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

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

Answer 4

Вот пример. Текст под редактором будет обновлен независимо от того, произошла ли блокировка в режиме Visual или HTML.

Визуальный режим событие в 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

Answer 5

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

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

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

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' );
}