Froala wysiwyg编辑器中缺少一些工具栏按钮

Question

Full Froala wysiwyg编辑器看起来像这样：

但是在我的项目中添加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();只会产生相同的结果。

Answer 1

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

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

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

Answer 2

如果您这样做是有角度的，那么通过在angular.json文件中包含插件JS来解决问题。像这样将其粘贴在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));

为我工作。