gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:21:25 25 4
gpt4 key购买 nike

完整的 Froala 所见即所得编辑器如下所示: enter image description here

但是在我的元素中添加 API 后,一些工具栏按钮丢失了。快照如下所示。

enter image description here

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

我包含了以下库:

<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 数组,还尝试了 toolbarButtonsXStoolbarButtonsMD 等屏幕尺寸选项。还是没有结果。我错过了什么?

更新:使用 $('.editable-question').froalaEditor(); 只有相同的结果。

最佳答案

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

为我工作。

关于javascript - Froala 所见即所得编辑器中缺少一些工具栏按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46961434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com