Вставка текста в позицию курсора в редакторе TinyMCE

10 июл. 2013 г., 15:04:16
Просмотры: 16.6K
Голосов: 2

У меня есть небольшая функция, которая позволяет пользователю нажать кнопку под текстовым полем и вставить соответствующий текст (это работает в связке с jQuery плагином textrange).

Однако, поскольку в моем плагине используется редактор TinyMCE, это работает только в режиме 'Текст', а не в 'Визуальном'.

Я изучил исходный код, но не могу понять, как сделать так, чтобы это работало в обоих режимах. Кто-нибудь знает, как можно вставить текст в редактор в 'Визуальном' режиме? Спасибо.

$(document).ready(function(){

    var button_text = {} // Текст для вставки при каждом нажатии кнопки

    button_text['insert_event_name']            = 'event_name';
    button_text['insert_event_date']            = 'event_date';
    button_text['insert_event_start_time']      = 'event_start';
    button_text['insert_event_finish_time']     = 'event_finish';
    button_text['insert_event_location']        = 'event_location';
    button_text['insert_event_address_inline']  = 'event_address_inline';
    button_text['insert_event_address_blick']   = 'event_address_block';

    $('.inserter', '#event-desc-container').on('click', function(){

        var button = $(this).attr('name'),
            text = '['+button_text[button]+']',
            textarea = $('textarea#event_desc', '#event-desc-container');

        /** Получаем позицию курсора в текстовом поле */
        var start = textarea.textrange('get', 'start');

        /** Добавляем текст кнопки в позицию курсора */
        textarea.textrange('replace', text).trigger('updateInfo').focus();

        /** Вставленный текст будет выделен, получаем конечную позицию выделения */
        var end = textarea.textrange('get', 'end');

        /** Перемещаем курсор в конец вставленного текста, чтобы убрать выделение */
        textarea.textrange('set', end, 0).trigger('updateInfo').focus();

    });

});
3
Комментарии

Ссылка на плагин jQuery?

kaiser kaiser
10 июл. 2013 г. 15:59:46

В любом случае, этот вопрос о Javascript и jQuery и не по теме данного сайта.

kaiser kaiser
10 июл. 2013 г. 16:07:21

Справедливо - Поскольку я использую TinyMCE с WordPress, я по умолчанию ассоциирую его с этим.

David Gard David Gard
10 июл. 2013 г. 16:19:46
Все ответы на вопрос 1
6

Чтобы протестировать это, я добавил кнопку к одному из мета-блоков на экране редактирования/создания записи с id равным addtxtbtn. При нажатии (click) я получаю все элементы textarea внутри #wp-content-editor-container, который является стандартным контейнером для редактора WP по умолчанию. Возможно, вам потребуется изменить этот код, если у вас другая разметка. Остальное взято из демонстрации на GitHub, если это тот самый плагин, о котором вы говорили.

( function($) {
    $( '#addtxtbtn' ).on( 'click', function( e ) {
        e.preventDefault();
        var textarea = $( '#wp-content-editor-container' ).find( 'textarea' );
        textarea.bind( 'updateInfo keyup mousedown mousemove mouseup', function() {
            var range = $( this ).textrange();
            console.log( range );
        } );
    } );
} )( jQuery );

Текст

Коротко: чтобы добавить текст в textarea режима "Текст", сделайте следующее:

$( '#wp-content-editor-container' ).find( 'textarea' ).val( 'Какой-то текст по умолчанию' );

Визуальный редактор

Чтобы добавить текст в редактор "TinyMCE" (визуальный режим), используйте следующий код:

tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, 'Какой-то текст по умолчанию' );

Если вам нужно получить содержимое из TinyMCE, воспользуйтесь следующим:

// Сырой текст
tinyMCE.activeEditor.getContent( { format : 'raw' } );
// HTML содержимое:
tinyMCE.activeEditor.getContent();

Чтобы получить содержимое из конкретного экземпляра TinyMCE (если их несколько), используйте:

tinyMCE.get( 'some-id' ).getContent();
10 июл. 2013 г. 16:07:02
Комментарии

Это тот плагин, о котором я говорил, и он не имеет отношения к вопросу. Я уже могу использовать его в режиме 'Текст', но проблема в режиме 'Визуальный' — там не находится textarea, и поэтому текст не вставляется. Спасибо.

David Gard David Gard
10 июл. 2013 г. 16:23:55

@DavidGard Тогда (1) вернитесь и отредактируйте свой вопрос, добавив ссылку на плагин ... и (2) вы говорите не о textarea, а о редакторе TinyMCE, верно?

kaiser kaiser
10 июл. 2013 г. 16:47:54

(1) Почему плагин важен?! Я указал его название, чтобы люди не смотрели на код и не думали: 'Это не валидный JS/jQuery'. Это не имеет значения. Этот код работает в режиме 'Текст', а мне нужна помощь с режимом 'Визуальный'. Код приведён, чтобы показать, что я пытался! (2) Да, это касается TinyMCE, и, как я уже сказал в комментарии выше (в ответ на ваш комментарий), это была моя ошибка — задать вопрос в этом форуме. Я использую Wordpress, я не использую ничего другого, что включает TinyMCE, поэтому мой маленький мозг связал их, когда я задавал вопрос!

David Gard David Gard
10 июл. 2013 г. 16:53:39

^^ И извините, если вышесказанное звучит как жалоба, это не было моей целью. Я благодарен за любую помощь.

David Gard David Gard
10 июл. 2013 г. 16:55:53

@DavidGard Плагин важен, так как он может работать совершенно иначе, чем можно было ожидать. Кроме того, он является частью вашего вопроса. Также учтите, что это не форум, а сайт вопросов и ответов, который архивирует вопросы для будущих читателей с такой же проблемой. Относительно textarea: Проблема в том, что TinyMCE — это не textarea, что немного сбивает с толку. Смотрите обновление о том, как вставлять данные в оба. Проблема будет в том, что ваш jQuery-плагин не сможет получить доступ к содержимому TinyMCE.

kaiser kaiser
10 июл. 2013 г. 16:57:58

Я предполагал, что в этом проблема, но не знал, как её исправить. Ваш код для 'Visual' решает вопрос и вставляет текст именно туда, куда нужно. Спасибо.

David Gard David Gard
10 июл. 2013 г. 16:59:54
Показать остальные 1 комментариев