JQuery, Froala - изменение CSS для элемента, где находится курсор - PullRequest
Новая
       9

JQuery, Froala - изменение CSS для элемента, где находится курсор

0 голосов
/ 12 сентября 2018

Используя Froala Rich Text Editor и хотите изменить CSS для элемента, где мигающий курсор находится в текстовом поле.Создал пользовательскую кнопку, которую я нажимаю, чтобы сделать это.Кнопка работает для запуска функции обратного вызова, но возникают проблемы с кодом JQuery: 

callback: function () {
    $(this).addClass('big');
}

Это ничего не меняет.Использование приведенного ниже кода изменяет все элементы «P», а не только тот, на котором находится курсор. 

callback: function () {
  $('p').addClass('big');
}

Как бы я исправил этот код, чтобы при перемещении мыши, чтобы нажать кнопку, толькоэлемент с мигающим курсором меняет класс?

Заранее спасибо.

РЕДАКТИРОВАТЬ: Внутри Texarea Froala будет обычный HTML, например: 

<p>one element</p>
<p>two element</p>
<p>three element</p>

ЧТО Я ХОЧУ СЛУЧИТЬ: Когда ваш мигающий курсор находится на последнем элементе, я нажимаю кнопку, чтобы инициировать обратный вызов, и CSS будет применяться только к этому последнему элементу, а не к первым двум.

1 Ответ

0 голосов
/ 13 сентября 2018

После долгих поисков нашел самый простой ответ!На сайте Froala есть опция под названием "paraStyle.apply (значение)".Можете прочитать это здесь .

Обратный вызов очень прост: 

callback: function () {
  this.paragraphStyle.apply('big')
}

"this".Кажется, он отслеживает, где находится мигающий курсор, а НЕ там, где указатель мыши, что и было желаемым.

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

...