工具栏按钮在我们通过facebookcreate-react-app创建的React App中不显示。
我试过在srcindex.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,
}}
/>
我刚刚知道了问题所在。你必须在config中的pluginsEnabled数组中传递插件。像这样。
pluginsEnabled: [
'fullscreen',
'codeBeautifier',
],