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

Question

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

感谢。

Answer 1

我想前进的方法可能是实际使用inlineStyle插件，然后进入Froala编辑器实例并隐藏工具栏上的插件按钮，同时添加自己的自定义按钮以点击＆＃39;插件下拉列表中隐藏的样式选项。

我现在没有启用inlineStyles插件，但我确实使用了paragraphStyles插件，我相信它遵循相同的方法。这张照片是来自Chromes检查员的抓拍，显示了构建Froala paragraphStyle选项下拉列表的元素（类似于inlinStyles）。黄色突出显示属于“＆＃39;”的元素类别。我的风格的激活按钮。突出显示的文本是我的类名 - 单击该选项时我想要应用的类。这让我有机会通过jQuery来定位点击触发器，所以

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

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

关于隐藏插件按钮，这是我成功用于隐藏Froala工具栏上的paragraphStyle插件下拉按钮的内容。我希望你能为inlineStyles做同样的事情。请注意，在Froala编辑器完成构建之后你需要触发它 - 我注意到这里有一些异步行为，这意味着事情不会立即发生或者以任何外部可预测的顺序发生，所以你可能想要使用Froala初始化回调事件。

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