Question

使用Froala RTF编辑器，并要更改光标在文本框中的元素的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网站没有给出很好的例子，而只是很难为新手找到的单行代码段。希望这对某人有帮助！

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

1 个答案: