如何在 Angular 2 中自定义 Froala？答案

【问题标题】：How to customize Froala in angular 2?如何在 Angular 2 中自定义 Froala？
【发布时间】：2019-07-26 21:35:13
【问题描述】：

我在我的 Angular 2 应用程序中添加了 Froala 编辑器，它工作正常，我只是找不到如何自定义工具栏，显示我想要的按钮（粗体、斜体、下划线等），有什么帮助吗？

https://github.com/froala/angular2-froala-wysiwyg

【问题讨论】：

也许看看文档会有帮助？ froala.com/wysiwyg-editor/customize
@ArrowHead 我提出了错误的问题，我对如何只显示我想要的按钮感兴趣.. 编辑了问题
这应该有助于froala.com/wysiwyg-editor/docs/options#toolbarButtons

【解决方案1】：

您可以像这样添加选项：

<div 
    *ngIf="homeIsInEditMode" 
    [froalaEditor]="options" 
    [(ngModel)]="homeMessage.libelleMessage"> 
</div>

并在组件中添加您想要的选项：

public options: Object = {
    placeholderText: 'Edit Your Content Here!',
    charCounterCount: false,
    toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
}

您可以在official 文档中获得更多详细信息。

【讨论】：

【解决方案2】：

添加这个

import 'froala-editor/js/plugins/font_size.min.js';
import 'froala-editor/js/plugins/font_family.min.js';
import 'froala-editor/js/plugins/emoticons.min.js';
import 'froala-editor/js/plugins/colors.min.js';

到要插入编辑器的模块

我认为这是一个非常糟糕的实现，但它确实有效

【讨论】：

【解决方案3】：

您可以在the Angular Demo 中找到设置自定义选项的示例。编辑器有 4 个用于控制工具栏的选项，如 https://www.froala.com/wysiwyg-editor/examples/toolbar-buttons 中所述：

大型设备的工具栏按钮（≥ 1200px）

toolbarButtonsMD 用于中型设备（≥ 992px）

用于小型设备（≥ 768px）的toolbarButtonsSM

toolbarButtonsXS 用于超小型设备 (

【讨论】：