[英]How to configure Ckeditor Toolbar in React JS?
我想在React中配置Ckeditor工具栏,但我不知道文档中的属性详细信息在哪里。 Ckeditor React集成文档没有帮助,因为它包含的信息不多。
我尝试了这个:
import CKEditor from "ckeditor4-react"
<CKEditor
data={this.state.data}
onChange={this.onEditorChange}
config={{
toolbar: [
["Bold", "Italic", "Strike Through"],
[
"Cut",
"Copy",
"Paste",
"Pasteasplaintext",
"FormattingStyles",
"Undo",
"Redo"
],
["List", "Indent", "Blocks", "Align", "Bidi", "Paragraph"],
["Find", "Selection", "Spellchecker", "Editing"]
]
}}
/>
但是其中一些配置没有显示出来,因为我正在猜测该属性。 我知道文档中有工具栏配置生成器,但是我不知道在React中将它放在哪里:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Source,Save,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CopyFormatting,RemoveFormat,CreateDiv,BidiLtr,BidiRtl,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,About';
};
我这样使用它:
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
<CKEditor
data={input.value}
editor={ ClassicEditor }
config={{
toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo']
}}
/>
工具栏选项的完整列表在此处:
*["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]*
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.