Вопрос или проблема
Я думаю, что это должен быть очень простой вопрос, но я не слишком хорошо разбираюсь в общем функционировании WordPress / TinyMCE, поэтому испытываю трудности:
Я добавил пользовательскую кнопку в TinyMCE и мне нужна ссылка на соответствующий элемент DOM, которая позволила бы мне установить обработчик функции для события ‘click’. Каждый клик должен динамически изменять другие части редактора TinyMCE, поэтому мне также нужно каким-то образом обновлять (‘пересчитывать’?) представление.
Среди ответов на аналогичные вопросы я не смог найти именно то, что мне нужно.
Вот соответствующая часть основного .php файла плагина:
require( 'tinymce-buttons/buttons.php' );
add_action( 'init', 'py2web_buttons' );
function py2web_buttons() {
add_filter( "mce_external_plugins", "py2web_add_buttons" );
add_filter( 'mce_buttons', 'py2web_register_buttons' );
}
function py2web_add_buttons( $plugin_array ) {
$plugin_array['py2web'] = plugins_url() . '/py2web/tinymce-buttons/buttons.js';
return $plugin_array;
}
function py2web_register_buttons( $buttons ) {
array_push( $buttons, 'problem', 'solution' );
return $buttons;
}
И соответствующая часть соответствующего файла buttons.js:
tinymce.create('tinymce.plugins.Py2Web', {
count_problems : function(ed) {
// Получить текст тела
body_text = ed.getBody().textContent;
ids = [];
// Разобрать текст тела
do {
var re_match = re.exec(body_text);
if ( re_match ) {
ids.push( re_match[1] );
}
else {
break;
}
} while ( 1 );
return ids;
},
init : function(ed, url) {
ed.addButton('problem', {
title : 'Добавить проблему',
cmd : 'problem',
image : url + '/images/wturm.png'
});
ed.addCommand('problem', function() {
var selected_text = ed.selection.getContent();
nr_added = count_problems(ed).length;
var id = nr_added + 1;
var return_text="[problem id="" + id + '"] ' + selected_text + ' [/problem]';
ed.execCommand('mceInsertContent', 0, return_text);
sol_button = ed.buttons['solution'];
});
ed.addButton('solution', {
disabled: 0,//count_problems(ed).length == 0,
title : 'Добавить решение проблемы',
//cmd: 'solution_fun',
image : url + '/images/wspringer.png',
type: 'menubutton',
menu: [{text: 'problem id = ' + 1, value: 1}],
onselect: function(v1) {
ed.windowManager.open({
title: 'Вставить решение в формате вывода popeye',
body: [{type: 'textbox', name: 'solution', label: "решение", width: 300, height: 50}],
width: 270,
height: 70,
onsubmit: function(v2) {
console.log(v1);
solution( v2.data.solution, v1.control.settings.value );
}
});
};
});
ed.addCommand('solution_fun', function() {
set_solution_menu(ed);
});
function solution( selected_text, target="1" ) {
return_text="[solution target="" + target + '"]' + selected_text + '[/solution]';
ed.execCommand('mceInsertContent', 0, return_text);
};
}
Спасибо за любую помощь.
Попробуйте добавить атрибут id в определение вашей кнопки:
ed.addButton('solution', {
disabled: 0,//count_problems(ed).length == 0,
id: 'my_button',
title : 'Добавить решение проблемы',
//cmd: 'solution_fun',
image : url + '/images/wspringer.png',
type: 'menubutton',
menu: [{text: 'problem id = ' + 1, value: 1}],
onselect: function(v1) {
ed.windowManager.open({
title: 'Вставить решение в формате вывода popeye',
body: [{type: 'textbox', name: 'solution', label: "решение", width: 300, height: 50}],
width: 270,
height: 70,
onsubmit: function(v2) {
console.log(v1);
solution( v2.data.solution, v1.control.settings.value );
}
});
};
});
И посмотрите, можете ли вы получить доступ к нему с помощью jQuery('#my_button')
Ответ или решение
Для того чтобы сделать вашу кнопку TinyMCE интерактивной и обеспечить обработку событий, можно следовать следующему подходу. В данном ответе будет рассмотрено, как правильно добавить идентификатор к кнопке, а затем, как получить её ссылку, чтобы настроить обработчик события click.
Шаг 1: Добавление идентификатора к кнопке
В вашей функции init вы уже добавили кнопку solution. Чтобы было проще ссылаться на элемент кнопки в DOM, добавьте к определению кнопки атрибут id. Это позволит вам легко выбрать кнопку с помощью jQuery.
Измените код для кнопки solution следующим образом:
ed.addButton('solution', {
disabled: 0, // count_problems(ed).length == 0,
id: 'my_button', // Добавляем идентификатор кнопки
title: 'Add problem solution',
image: url + '/images/wspringer.png',
type: 'menubutton',
menu: [{ text: 'problem id = ' + 1, value: 1 }],
onselect: function(v1) {
ed.windowManager.open({
title: 'Insert solution in popeye output format',
body: [{ type: 'textbox', name: 'solution', label: "solution", width: 300, height: 50 }],
width: 270,
height: 70,
onsubmit: function(v2) {
console.log(v1);
solution(v2.data.solution, v1.control.settings.value);
}
});
}
});Шаг 2: Получение ссылки на кнопку и установка обработчика событий
После того как кнопка добавлена и у неё есть идентификатор, вы можете использовать jQuery для получения доступа к этой кнопке и установки обработчика событий.
Вы можете добавить этот код в функцию init после определения кнопки solution:
// Получаем ссылку на кнопку с использованием jQuery
jQuery(document).ready(function($) {
// Ищем кнопку по её идентификатору
var myButton = $('#my_button');
// Устанавливаем обработчик события click
myButton.on('click', function() {
console.log('Кнопка нажата!');
// Здесь можно добавить логику для обновления TinyMCE
refreshEditorView(ed);
});
});
// Функция для обновления представления редактора
function refreshEditorView(editor) {
// Ваш код для обновления представления редактора
// Например, вы можете перерисовать содержимое
editor.refresh();
}Шаг 3: Обновление представления редактора
Ваша функция refreshEditorView должна содержать логику, необходимую для повторного рендеринга или перетягивания вашего редактора после нажатия кнопки. Это может включать обновление содержимого или обновление определённых элементов на странице редактора.
Заключение
Следуя вышеперечисленным шагам, вы сможете добавить обработчик событий для вашей кнопки в TinyMCE, который будет выполнять действия при её нажатии. Не забывайте тестировать ваш код, чтобы убедиться, что он работает корректно в различных сценариях.
Таким образом, вы обладаете необходимыми инструментами для динамичного взаимодействия с вашим редактором TinyMCE, что значительно улучшает пользовательский опыт вашего плагина WordPress.