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

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

Answer 2

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

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

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

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

toolbarButtonsXS用于超小型设备（＆lt; 768px）

Answer 3

添加此

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

到要插入编辑器的模块

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

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

3 个答案: