Redactor Plugins in Perch 3

I'd love to see the return of the view source view. Is that possible now or will that be in a future update? I'm finding stray tags make their way in when pasting content but are impossible to edit without the view source view. Thanks!

Sounds good Drew - for those interested, we just copied the now built in Redactor folder to the /plugins/editors folder with a new name ('redactorcustom') and updated the JSON file and config file (to include the javascript for the Redactor plugins) and it all worked nicely.

Franz: You can download the Source Code plugin for Redactor from: https://imperavi.com/redactor/plugins/source/

Then just add that into your own custom editor if you like, as outlined in the last post.

Hi James, I just tried to build in the source plugin as described here. Unfortunately it does not work properly. When I add a new textarea I can see the button, but after saving it has disappeard...

I added the source.js to the JSON file:

{ "js": [ "PERCH_LOGINPATH/addons/plugins/editors/redactorcustom/redactor.min.js?v=2.0", "PERCH_LOGINPATH/addons/plugins/editors/redactorcustom/perch/config.js?v=2.0", "PERCH_LOGINPATH/addons/plugins/editors/redactorcustom/source.js" ], "css": [ "PERCH_LOGINPATH/addons/plugins/editors/redactorcustom/redactor.min.css?v=2.0", "PERCH_LOGINPATH/addons/plugins/editors/redactorcustom/perch/edit.css?v=2.0" ] }

And I added the source button to the config file:

plugins: ['perchassets', 'source']

Thanks a lot!

Hello Martin,

We didn't actually add the plugin source to the JSON file as you did - we added the javascript to the config.js file above the previous function:

$(function() {
    $.Redactor.prototype.table = function()
    {   };
    $.Redactor.prototype.perchassets = function()
    {   };


    var set_up_redactorcustom = function() {
        $('textarea.redactorcustom:not([data-init])').each(function(i,o){
            var self = $(o);
            var uploadFields = {
                    'width'  :  self.attr('data-width')||'',
                    'height' :  self.attr('data-height')||'',
                    'crop'   :  self.attr('data-crop')||'',
                    'quality':  self.attr('data-quality')||'',
                    'sharpen':  self.attr('data-sharpen')||'',
                    'density':  self.attr('data-density')||'',
                    'bucket' :  self.attr('data-bucket')||'default'

                };
            self.wrap('<div class="editor-wrap"></div>');
            self.redactor({
                //imageUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php?filetype=image',
                //fileUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php',
                //fileUploadFields: uploadFields,
                //imageUploadFields: uploadFields,
                plugins: ['perchassets','table']
            });
            self.attr('data-init', true);
        });
    };

    set_up_redactorcustom();

    $(window).on('Perch_Init_Editors', function(){
        set_up_redactorcustom();
    });

});

Our plugin was the 'table' plugin, where you would just use 'source' - also, we just emptied out the functions for brevity sake.

Hope that makes sense!

Makes sense, yes. However, when I include the function of the source.js directly into the config.js it doesn't work either. Where do you link in your case the table function if not in the JSON file? Your help is much appreciated!

In the /redactorcustom/perch/config.js file at the very top, right before the $.Redactor.prototype.perchassets = function(). So in my previous posting, it's in the top three lines of the embedded code sample. Then I also add the plugin name, lower down in the config.js file under the self.redactor() statement in plugins: ['perchassets','table']. I couldn't get it working with the JSON file as a standalone call to the source.js (or in my case table.js) plugin - perhaps there is a way that I'm just missing.

I did it all the same like you, it's all clear for me, just one thing: where do you put the table.js? It has to be linked somewhere...

I copy the code out of the table.js file and paste it into the top of the /redactorcustom/perch/config.js file. So I'm copying the code out of the one file and pasting it above the other function in the config.js file.

That's exactly what I did. Obviously I have to check it again... Thank you for your great support anyway!

No problem! The only other thing I can think of that may have been missed would be not using the correct editor name in the template. Rather than "redactor", it should be "redactorcustom" as below:

<perch:content id="text" type="textarea" label="Text" editor="redactorcustom" html="true" />

Also notice that in the config.js file itself, I've renamed most - if not all - instances of 'redactor' to 'redactorcustom', except the redactor init call. As can be seen in my previous post with the larger code snippet.

Lastly, I took out the version numbers in the _config.json.

Hope this helps!

The editor name as well, is correct...I'll find it out!

For anyone who has spent hours trawling through the forum trying to get Redactor 2 working with plugins, the above solution James works really well, but please READ all of his instructions.

Not removing the version number from the _config.json file has resulted in losing hours of my day, sleep, hair and the will to live, but I got there in the end !!!

Just in-case also, this solution works well for Runway.

Being less intrepid, (and not wanting to lose hours of my day, sleep, or hair, as Andrew's done), I'll cross my fingers and hope the source view button makes into an upcoming official Redactor release for Perch.