我想知道如何在react wysiwyg froala编辑器中显示工具栏按钮, 当前编辑器仅显示三个图标(粗体,斜体,下划线)。 我已经按照文档添加了以下配置,但无法正常工作
this.state={
config : {
colorsHEXInput: false,
autoFocus: true,
toolbartop: true,
linkAlwaysBlank: true,
fontFamilySelection: true,
fontSizeSelection: true,
paragraphFormatSelection: true,
htmlExecuteScripts: true,
iframe: true,
tabSpaces: 4,
// pluginsEnabled: ['align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', 'draggable', 'embedly', 'emoticons', 'entities', 'file', 'fontFamily', 'fontSize', 'fullscreen', 'image', 'imageManager', 'inlineStyle', 'lineBreaker', 'link', 'lists', 'paragraphFormat', 'paragraphStyle', 'quickInsert', 'quote', 'save', 'table', 'url', 'video', 'wordPaste'],
toolbarButtons:{
moreText: {
buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
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
}
}
}
}
render(){ return (<FroalaEditor
config = {this.state.config}
model={this.state.emailbody}
onModelChange={this.handleChange}
/>);}