Does your site run on Perch CMS? Hire me to help. Perch CMS Development

How to customise Redactor editor in Perch

Posted on by Clive Walker in Perch

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

Update: 5-3-18. This article was written for Redactor 2017. The Source plugin no longer exists on the Redactor site. I'll find out more and write another post when Perch update their version of the editor.

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 :-)

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

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!

  • Clive Walker:

    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?

  • Mark Phoenix:

    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?

  • Clive Walker:

    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.

Comments are OFF for this post.

© 2024 Clive Walker