Forum
How to customize the redactor toolbar and add the fontsize plugin
I've managed to customize CK Editor by editing the config.js file. I can't intuitively understand how this is done with the Redactor config.js file however. I've also downloaded the Redactor fontsize plugin and uploaded it to public_html/perch/addons/plugins/editors/redactor-plugins/. I'm not a seasoned script editor but this shouldn't be that hard to learn. I've studied the doc at https://docs.grabaperch.com/api/editors/ but I don't understand where things are being placed and how it all comes together. In short:
Q: can you provide me a step by step answer for a) removing specific default editing options from Redactor and b) adding the fontsize plugin?
Thank you.
Go watch the tutorial videos.
I haven't encountered this on the tutorial videos. Can you be more specific as to which one?
The docs are a step-by-step example, so could you explain what problem you're running into?
Please can the person above (three comments above) not post the same comment "go watch the tutorial videos" on all forum posts. I'd like to read posts with constructive comments and posting the same non-specific comment on every post isn't at all helpful. Thank you!
I tried to be fairly specific in the original post. To be more specific:
The doc https://docs.grabaperch.com/api/editors/ instructs us to make edits but isn't specific as to where those edits are made. For example, it tells me this:
Ok, that looks like php to me, but I can find no config.php file for Redactor. Or does this refer to the config file for Perch. What is meant by "your config file"? Am I adding this string or editing it?
Then it tells me:
Yet, there are only folders on that path, not files. So do I need to create this file?
And then the script example following this... where is that placed?
Configuring CK Editor is fairly straightforward. The config.js file lists the toolbar menu functions as strings and one simply has to remove them or add new ones (great resource for that here: https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#advanced). However, I am unable to understand the config.js file for Redactor. Furthermore, I've downloaded the fontsize plugin for Redactor but I can find no instruction as to where this should be placed and how to install it.
I have been through the videos and I have yet to find anything about configuring the toolbar on either default or add-on editors. This is essential to building a CMS interface where editors are given the control they need but not able to break the layouts.
Can you provide me answers to these things, assuming I'm a fairly adept CSS/HTML front-end programmer with limited java/jquery script editing experience? Specifically the path to the files to add/edit and where within the files to make these edits?
Also - I would like to get a more detailed description in the use of 'editor-config'
Thank you.
Firstly, you're making configurations (in JavaScript) to a reasonably complex JavaScript component, so the documentation presumes that what you're doing is within your skill set. If this is all completely knew to you, you should be prepared for the fact that's it's not going to be a walk in the park. You really need to know JavaScript or be prepared to learn some quickly.
Yes, you've correctly understood, it means your
perch/config/config.phpfile. If you look at that file you'll find it's full of entries just like the one you're being asked to add If the option is already in there, you're editing it. If not, you're adding it. If you add it twice you'll just get an error, so it's hard to go wrong.Yes, you've correctly understood.
That's what goes in the file you've just created.
In the example given, these are within:
but it's up to you where you'd like to place them, as your script loads them in, so Perch doesn't really care. I would probably go with that location unless you have a good reason not to.
There's nothing in the videos as far as I'm aware. Changing editor toolbars is pretty niche with Perch because the entire system of templates is designed to help you get away from a place where you're dumping important content into a WYSIWYG editor.