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

Question

使用 Froala 富文本编辑器并希望更改 CSS 文本框中闪烁光标所在的元素。已经创建了一个自定义按钮，我单击它来执行此操作。该按钮用于启动回调函数，但遇到问题 JQuery 代码：

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

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

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

我该如何更正此代码，以便当我移动鼠标单击按钮时，只有上面有闪烁光标的元素会更改 Class?

提前致谢。

编辑： 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')
}

"this." 似乎跟踪闪烁光标的位置而不是鼠标指针的位置，这正是我们想要的。

添加带有书本符号的按钮的完整 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 网站没有提供很好的示例，只是单行代码片段，新手很难理解。希望这对某人有所帮助！

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

JQuery, Froala - changing CSS on element where cursor is

javascript

jquery

froala