How to set toolbar configuration?

[ashsepra]

I try to remove some unused icon at toolbar? Can you explain how to set toolbar configuration?

[codeslayer1]

Can you share a screenshot as to what you are trying to achieve?

[ashsepra]

I want to remove some icons such as CUT, PASTE, COPY

[ashsepra]

I want to remove some icons, below is screenshot

[codeslayer1]

You can remove the buttons by configuring the build of CKEditor that you are using. You can read about it here - https://ckeditor.com/forums/Support/How-remove-buttons-new-CK-editor.

Suggest you to go through the CKEditor docs. Closing this since this is not an issue with the library.

[ashsepra]

I try to using that code but still error, can you give me example @codeslayer1 for react-ckeditor. How to set toolbar configuration in react-ckeditor? Thanks

[codeslayer1]

You don't configure your toolbar in react-ckeditor. React-Ckeditor is simply a wrapper to render your CKEditor component in React. You need to make changes in the config of CKEditor build that you are using.

For example - I use a custom CKEditor in my project which is built using the CKEditor builder. I place it in my web server and simply pass the url of its script.js file in the scriptUrl prop to my react-ckeditor. So say your CKeditor file is located in "http://dummy.com/ckeditor/ckeditor.js". You simply use this package like this.

And now to set your toolbar configuration, you simply go to the directory where your CKEditor is located and there you will find a config.js file. You will find the configs there. I just tried removing Cut, Copy, Paste in my CKEditor and it worked fine. I did this by adding this line in my config.js.

config.removeButtons = 'Cut,Copy,Paste';

[mikeLspohn]

So what is the config prop for? It makes it seem like this is what it is for, but I can't seem to get it working.

[ehs035]

Any news on this? I was wondering too what the config property is for? I would like to pass different configuration via my react component.

[codeslayer1]

@mikeLspohn @ehs035 You can achieve the same thing via config prop too. The reason I suggest to use custom build is because it gives more flexibility in terms of adding/removing plugins.

But if you need something that can be done by only using the configs(such as removing some buttons/setting tab spaces, etc), you can do so using the config prop like this.

<CKEditor
        content={this.state.content}
        config={{
          removeButtons: 'Cut,Copy,Paste'
        }}
      />

I tested the above code and it works perfectly fine. Please let me know in case you guys face any issue while using it.