froala 没有显示一些工具栏按钮答案

【问题标题】：froala not showing some toolbar buttonsfroala 没有显示一些工具栏按钮
【发布时间】：2022-01-18 09:56:33
【问题描述】：

Froala 不想显示一些按钮（例如：视频、图像、表格...），我现在不知道为什么。也许我只是忘记添加一些脚本？这是我的选择：

    public tb = [
        "bold", "italic" , "insertTable","insertImage"]; 
 public options: Object = { 
  placeholderText: 'Edit Your Content Here!',
  toolbarInline: false,
  toolbarButtons: this.tb,
        toolbarButtonsMD: this.tb,
        toolbarButtonsSM: this.tb,
        toolbarButtonsXS: this.tb
}

这是我的脚本：

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
  <script src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>
<script src="bower_components/froala-wysiwyg-editor/js/plugins/image.min.js"></script>
  <script src="bower_components/froala-wysiwyg-editor/js/plugins/image_manager.min.js"></script>
<script src="bower_components/froala-wysiwyg-editor/js/plugins/video.min.js"></script>

我的客户只显示粗体和斜体，我该如何解决？

【问题讨论】：

标签： javascript angular froala

【解决方案1】：

确保您也有 css 对应项。赞plugins/image.min.css

这里是 list

【讨论】：

【解决方案2】：

添加需要插件的按钮：

1.package.json

  "dependencies": {
     . . .
     "angular-froala-wysiwyg": "4.0.8",

在 app.module.ts 中为您的按钮添加插件导入

例如全屏按钮：

import 'froala-editor/js/plugins/fullscreen.min.js';
import 'froala-editor/js/plugins/code_view.min.js';

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
...
imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
...

添加你的 angular.json （我使用的是styles.scss）

 "styles": [
     "src/styles.scss",
     "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
     "node_modules/froala-editor/css/froala_style.min.css"
 ],
 "scripts": [
     "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
 ]

4.app.module.ts

<div [froalaEditor]>Hello, Froala!</div>

您将看到一个全屏按钮：

【讨论】：

【解决方案3】：

Froala 版本 2 需要 Font Awesome（以及 jQuery）。您需要包含 font-awesome CSS 文件，例如通过 CDN，使工具栏中的按钮可见：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

【讨论】：