javascript - Froala 所见即所得编辑器中缺少一些工具栏按钮

Question

完整的 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(); 只有相同的结果。

Answer 1

如果你这样做是 Angular ，那么在 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));

为我工作。