Используя редактор Froala Rich Text Editor, вы хотите изменить CSS для элемента, в текстовом поле которого находится мигающий курсор. Создал пользовательскую кнопку, которую я нажимаю для этого. Кнопка запускает функцию обратного вызова, но возникают проблемы с кодом JQuery:
callback: function () {
$(this).addClass('big');
}
Это ничего не меняет. Использование приведенного ниже кода изменяет все элементы «P», а не только тот, на котором установлен курсор.
callback: function () {
$('p').addClass('big');
}
Как мне исправить этот код, чтобы, когда я перемещаю мышь, чтобы щелкнуть кнопку, только элемент, на котором есть мигающий курсор, меняет класс?
Заранее спасибо.
РЕДАКТИРОВАТЬ: внутри текстового поля Froala будет обычный HTML, например:
<p>one element</p>
<p>two element</p>
<p>three element</p>
ЧТО Я ХОЧУ ПРОИЗОЙТИ: Когда ваш мигающий курсор находится на последнем элементе, я нажимаю кнопку, чтобы инициировать обратный вызов, и CSS будет применяться только к этому последнему элементу, а не к первым двум.
1 ответ
После долгих поисков нашел самый простой ответ! На сайте Froala есть опция под названием "paragraphStyle.apply (value)". Его можно прочитать здесь.
Обратный вызов очень прост:
callback: function () {
this.paragraphStyle.apply('big')
}
"это." кажется, отслеживает, где находится мигающий курсор, а НЕ где находится указатель мыши, что и требовалось.
Завершенный код Froala для добавления кнопки с символом книги, который предназначен для форматирования абзаца в стиле css под названием «большой», показан ниже. В моем случае большим было бы раскрасить и сделать больше, чтобы текст выделялся.
//custom icon book quote button
$.FroalaEditor.DefineIcon('quote', {NAME: 'book'});
$.FroalaEditor.RegisterCommand('quote', {
title: 'quote',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.paragraphStyle.apply('big')
}
});
Сайт Froala не дает хороших примеров, а только однострочные фрагменты, которые трудно понять новичкам. Надеюсь, это кому-то поможет!
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español