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

Question

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

    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>

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

Answer 1

确保你也有 css 对应的。喜欢plugins/image.min.css

这是 list

Answer 2

Froala 版本 2 需要 Font Awesome（以及 jQuery）。您需要包含超棒的 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">

Answer 3

添加需要插件的按钮：

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>

您将看到一个全屏按钮：

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

froala not showing some toolbar buttons

javascript

froala

angular