时间戳

首页 > 解决方案 > JQuery，Froala - 在光标所在的元素上更改 CSS

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

问题描述

使用 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 将仅应用于最后一个元素，而不是前两个元素。

标签： javascriptjqueryfroala

解决方案

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

回调非常简单：

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

“这。” 似乎跟踪闪烁光标的位置，而不是鼠标指针的位置，这是想要的。

完整的 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 网站没有给出很好的例子，而只是单行片段，新手很难理解。希望这对某人有帮助！

推荐阅读