Вставка текста в позицию курсора в редакторе TinyMCE
У меня есть небольшая функция, которая позволяет пользователю нажать кнопку под текстовым полем и вставить соответствующий текст (это работает в связке с 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();
});
});

Чтобы протестировать это, я добавил кнопку к одному из мета-блоков на экране редактирования/создания записи с 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();

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

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

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

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

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