codeslayer1 / react-ckeditor

CKEditor component for React with plugin and custom event listeners support
MIT License
129 stars 34 forks source link

How to use options given by Ckeditor like providing only certain options #43

Closed sarathjasrin closed 6 years ago

sarathjasrin commented 6 years ago

How to add or remove the toolbar buttons in the editor. I can understand this is a wrapper around the ckeditor. But how we can use native plugin features.

config.toolbar = [ [ 'Source', '-', 'Bold', 'Italic' ] ];

codeslayer1 commented 6 years ago

Check out this issue - #6

sarathjasrin commented 6 years ago

Thanks that worked. So we could send all the configurations mentioned in the documentation via config props.?? right

sarathjasrin commented 6 years ago

I tried adding those configs it's working.

<CKEditor config={{
                removeButtons: 'Source,Save,Templates,NewPage,Preview,Print,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,About,ShowBlocks,Font,CopyFormatting,RemoveFormat,Checkbox,CreateDiv,Language,Flash,Iframe',
                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' ] }
                ]
            }} />