JQuery，Froala-在光标所在的元素上更改CSS

Question

使用Froala富文本编辑器，并想要更改光标在文本框中的元素的CSS。 创建了一个自定义按钮，我单击以执行此操作。 该按钮可以启动回调函数，但是在使用JQuery代码时遇到问题：

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

这不会改变任何东西。 使用下面的代码可以更改所有的“ P”元素，而不仅仅是更改光标所在的元素。

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

如何纠正此代码，以便在移动鼠标单击按钮时，只有光标闪烁的元素才能更改类？

提前致谢。

编辑：Froala texarea内将是普通的HTML，例如：

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

我要发生的事情：当光标闪烁在最后一个元素上时，我单击按钮以启动回调，并且CSS将仅应用于最后一个元素，而不是前两个元素。

Answer 1

经过大量搜索，找到了最简单的答案！ 在Froala网站上，有一个名为“ paragraphStyle.apply（value）”的选项。 可以在这里阅读。

回调非常简单：

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

“这个。” 似乎跟踪光标闪烁的位置，而不是鼠标指针的位置，这正是所希望的。

下面显示了完整的Froala代码，以添加带有书本符号的按钮，该按钮用于将段落格式设置为名为“ big”的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网站没有给出很好的例子，但是仅提供了难以理解的单行代码片段。 希望这对某人有帮助！