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

0
HDer 12 Сен 2018 в 00:57

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 не дает хороших примеров, а только однострочные фрагменты, которые трудно понять новичкам. Надеюсь, это кому-то поможет!

1
HDer 13 Сен 2018 в 06:32