Froala 所见即所得编辑器中缺少某些工具栏按钮答案

【问题标题】：Some Toolbar Buttons are missing in Froala wysiwyg EditorFroala 所见即所得编辑器中缺少某些工具栏按钮
【发布时间】：2019-07-26 02:05:59
【问题描述】：

完整的 Froala 所见即所得编辑器如下所示：

但在我的项目中添加 API 后，缺少一些工具栏按钮。快照如下所示。

从上面可以看出，我的编辑器中缺少大多数工具栏按钮，例如颜色、段落格式等。

我已包含以下库：

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.1/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.1/css/froala_style.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.1/js/froala_editor.min.js'></script>

并使用以下编辑器设置：

<script>
        $(document).ready(function() {$('.editable-question').froalaEditor({
            initOnClick: true,
              charCounterCount: false,
        });
        });
    </script>

我尝试过明确提及toolbarButtons 数组，还尝试过toolbarButtonsXS、toolbarButtonsMD 等屏幕尺寸选项。还是没有结果。我错过了什么？

更新：使用$('.editable-question').froalaEditor(); 只会得到相同的结果。

【问题讨论】：

请发布定义按钮数组的代码。您想要需要单独插件的按钮吗？
@Seano666 ，例如，如果我添加 toolbarButtons=['bold', 'underline', 'color', 'formatOL', 'formatUL'] 只会出现粗体和下划线按钮。但是，缺少颜色和项目符号按钮。不是这样，他们的图标不见了，按钮完全不见了。
您能否更清楚地解释您认为应该发生什么以及实际发生了什么？
对于 FormatOL 和 FormatUL，您是否按照此处所述添加了 Lists 插件？ froala.com/wysiwyg-editor/docs/options#toolbarButtons
@Seano666 你是对的，我错过了那部分。谢谢你。你能帮我找到一种从文件夹中添加所有 js 文件的干净方法吗？或者我必须使用脚本标签单独添加它们。我正在使用 SpringBoot，Thymeleaf bdw。

标签： javascript jquery html css froala

【解决方案1】：

如果您这样做是有角度的，那么将插件 JS 包含在 angular.json 文件中对我不起作用。像这样将它贴在 main.ts 文件的顶部：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));

为我工作。

【讨论】：

【解决方案2】：

Froala 编辑器的某些按钮需要单独的插件，这些文件必须手动包含。

https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons

<script src="../js/plugins/lists.min.js"></script>

【讨论】：