如何在角度2中自定义Froala？

Question

我在我的Angular 2应用程序中添加了Froala编辑器，它可以工作，我只是无法找到如何自定义工具栏，显示我想要的按钮（粗体，斜体，下划线等），任何帮助？

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

Answer 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'],
}

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

Answer 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';

到要插入编辑器的模块

我认为这是一个非常糟糕的实现，但它的工作

Answer 3

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

toolbarButtons适用于大型设备（≥1200px）

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

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

toolbarButtonsXS用于超小型设备（<768px）