Web Hosting from Bluehost. Sign-up here

How to customise Redactor editor in Perch

Posted on by Clive Walker in Perch

Summary: Adding a View Source button to Redactor editor in Perch. Customising the editor using other Redactor plugins.

Perch 3.0 comes with several textarea editors (Redactor, Simple MDE, Markitup) installed by default. It's easy to create a Perch template to use your preferred editor (Redactor in my case). However, you might want to customise the editor, perhaps expanding what it can do by adding more buttons. So, this is what I did to add a View Source button (Redactor Source plugin) to the default Redactor editor in Perch. This can be used with other Redactor plugins too.

I followed the section "Custom configurations for default editors" on this page. Only this section. It's at the end of the page. That's different to the section before it where you are creating a new editor.

The "Custom configurations" section is how to configure the default editor.

  1. Add define('PERCH_CUSTOM_EDITOR_CONFIGS', true); to your overall Perch config file.
  2. Create a config.js file like the example on this page (amend as necessary) and put it in addons/plugins/editors/
  3. Download plugins you need from Redactor site, e.g https://imperavi.com/redactor/plugins/source/, and put these in /addons/plugins/editors/redactor-plugins
  4. Test on local dev site. Upload new files to live site.

That should be it.

Login to Perch and admire your new editor functionality :-)

Comments

  • Martin:

    19 Jun 2017 14:57:57

    Hi Clive
    Thanks for the post. I was just trying to build in the source plugin but I am not sure what to set as arguments, actually it doesn’t work.
    Here’s how I set the functions:

    var get = function(editor_config_value, redactor, textarea)
    var load = function(cb)

    Your help is much appreciated!

  • 20 Jun 2017 04:56:30

    I started with the exact same config.js file as the Perch documentation page and that worked for me. Have you tried that?

  • 21 Jul 2017 13:28:41

    That was really useful. Thanks Clive

  • Mark Melling:

    22 Jul 2017 14:16:53

    The example in the Perch docs shows how to add 2 buttons. I’ve followed that example and got the 2 additional buttons working. I’m not clear how to edit the config.js file if I want to add 3, 4 or more Redactor plugins. Could you show your config.js file here?

  • 22 Jul 2017 18:14:10

    I’m actually only using a couple of plugins. But, will code up a quick example for three plugins

    Here's example code for three plugins. It works on my site OK. But, cleaner/smarter code may be needed for more plugins. It's a start though.

  • Mark Melling:

    23 Jul 2017 08:47:53

    Clive – thanks so much for this. I had tried a couple of options but was mangling my curly brackets! Very simple when someone shows you the way.

Leave a comment

A simple question that helps prevent automated form fillers.

© 2017 Clive Walker