javascript - Froala 添加内联样式自定义按钮

Question

我是一名用户体验设计师，在前端开发方面有一些经验，在在线编辑器概念验证中工作，以便在可用性研究中进行测试。我们的第一个发现是，用户希望有一个按钮可以直接添加公司字体系列和正文文本大小(Arial 11px)。我知道这可以通过带有下拉菜单的 inlineStyle.js 插件轻松实现，但我希望具有与粗体或斜体按钮相同的行为。我尝试查看该插件的代码，但无法使其适用于我的情况我也尝试过此示例中的代码 Froala add custom pre code button但它太旧了，无法与最新版本的 froala 一起使用。

谢谢。

Answer 1

我想前进的方向可能是实际使用 inlineStyle 插件，然后进入 Froala 编辑器实例并隐藏工具栏上的插件按钮，同时添加您自己的自定义按钮以“单击”插件中的隐藏样式选项下拉菜单。

我现在没有启用 inlineStyles 插件，但我有 paragraphStyles 插件，我相信它遵循相同的方法。这张图片是从 Chrome 检查器中抓取的，显示了构建 Froala paragraphStyle 选项下拉列表的元素(类似于 inlinStyles)。黄色突出显示位于"is"我的样式的激活按钮的元素的类中。突出显示的文本是我的类名称 - 单击该选项时我想要应用的类。这让我有机会通过 jQuery 等方式定位点击触发器，所以

$('.dzTtlRed').trigger('click'....) 

因此，您可以向 Froala 编辑器工具栏添加一个自定义按钮，并将其设置为触发下拉列表中样式选项的点击。

关于隐藏插件按钮，这是我成功用来隐藏 Froala 工具栏上的 paragraphStyle 插件下拉按钮的方法。我希望你可以对 inlineStyles 做同样的事情。请注意，您需要在 Froala 编辑器完成构建后触发此事件 - 我注意到其中存在一些异步行为，这意味着事情不会立即发生或以任何外部可预测的顺序发生，因此您可能需要使用 Froala 初始化回调事件。 p>

var inputBox = $('#' + eleId); // eleId is the Froala nominate textarea html id attr.
inputBox.closest("div").find("button[data-cmd='paragraphStyle']").hide();