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

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

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

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

Answer 2

如果你这样做是 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));

对我有用。

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

Some Toolbar Buttons are missing in Froala wysiwyg Editor

html

javascript

css

jquery

froala