javascript - 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)”的选项。可以阅读here .

回调非常简单:

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 网站没有提供很好的示例，而只是一些单行片段，对于新手来说很难理解。希望这对某人有帮助!