工具栏按钮未显示在由 facebook/create-react-app 创建的 React 应用程序中。
我尝试在 src/index.tsx 中或在使用组件之前导入 JS 和 CSS 文件。我还尝试导入单独的插件。他们都没有工作。
// Froala Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/js/plugins.pkgd.min.js';
// Froala Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/plugins.pkgd.min.css';
// Froala requires Font Awesome.
import 'font-awesome/css/font-awesome.css';
这就是我设置选项的方式。我什至尝试只设置对齐按钮,但它不起作用。
<FroalaEditor
model={model}
onModelChange={onModelChange}
config={{
key: FROALA_KEY,
attribution: false,
toolbarButtons: {
moreText: {
buttons: [
'bold',
'italic',
'underline',
'strikeThrough',
'subscript',
'superscript',
'fontFamily',
'fontSize',
'textColor',
'backgroundColor',
'inlineClass',
'inlineStyle',
'clearFormatting',
],
align: 'left',
buttonsVisible: 3,
},
moreParagraph: {
buttons: [
'alignLeft',
'alignCenter',
'formatOLSimple',
'alignRight',
'alignJustify',
'formatOL',
'formatUL',
'paragraphFormat',
'paragraphStyle',
'lineHeight',
'outdent',
'indent',
'quote',
],
align: 'left',
buttonsVisible: 3,
},
moreRich: {
buttons: [
'insertLink',
'insertImage',
'insertVideo',
'insertTable',
'emoticons',
'fontAwesome',
'specialCharacters',
'embedly',
'insertFile',
'insertHR',
],
align: 'left',
buttonsVisible: 3,
},
moreMisc: {
buttons: [
'undo',
'redo',
'fullscreen',
'print',
'getPDF',
'spellChecker',
'selectAll',
'html',
'help',
],
align: 'right',
buttonsVisible: 2,
},
},
...config,
}}
/>
I can only see these buttons on the UI no matter how I set up the options.