Forum

Thread tagged as: Problem, Third-party, Redactor

Plugins for Redactor

Hi,

I am having trouble installing the fullscreen plugin for redactor (https://imperavi.com/redactor/plugins/fullscreen/) on my perch site. It doesn't seem to be loading the plugin at all, even after I've loaded the fullscreen.js file and initiated the plugin on the _config.inc file. I added an alert inside the init function on fullscreen.js on line 8, and it didn't do anything.

<script type="text/javascript" src="PERCH_LOGINPATH/addons/plugins/editors/redactor/redactor/redactor.min.js"></script>
<script type="text/javascript" src="PERCH_LOGINPATH/addons/plugins/editors/redactor/redactor/fullscreen.js"></script>
<link rel="stylesheet" href="PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/edit.css" type="text/css" />
<link rel="stylesheet" href="PERCH_LOGINPATH/addons/plugins/editors/redactor/redactor/redactor.css" type="text/css" />
<script type="text/javascript" charset="utf-8"> 
$(function() {
    $('textarea.redactor').each(function(i,o){
        var self = $(o);
        self.wrap('<div class="editor-wrap" style="float:left;"></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',
            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'
            },
            focus: true,
            plugins: ['fullscreen']
        });
    });
});
</script> 

Using fullscreen editing is pretty important, because my clients' articles are very long, and the fixed toolbar doesn't quite cut it.

Thanks,

-Rob

Robert Yedlin

Robert Yedlin 1 points

  • 7 years ago

Nevermind, I think there is something wrong with the plugin.

In fact, it looks like the issue is that some plugins for redactor only work with V10, and Perch is using V9.

-Rob

Drew McLellan

Drew McLellan 2638 points
Perch Support

Updating to v10 is just a case of dropping it in, so if you have a license that should be a 2 minute job.

Otherwise I'll see if I can backport our changes in dev to the production version of the plugin.

Done and done!

Rob: Is this the plugin that provides a floating toolbar so it's always visible even on long articles?

Do I understand you have this working?

That's exactly what I need.

Stefan

Yes, and I got it working.

Just download the latest copy of Redactor here: https://imperavi.com/redactor/ and replace the files in perch with the v10 ones.

You might want to disable the perch admin nav sliding down when you scroll up, since the redactor toolbar sticks to the top of the screen. To accomplish that, I just added position: static; to the perch admin toolbar in Redactor's _config.inc file (so it would only apply when Redactor was present).

Hope that helps!

So you had to pay $99 to get v10?

Rachel Andrew

Rachel Andrew 394 points
Perch Support

If you want your own copy of Redactor and the license then yes, you have to purchase your own. That is their licensing model not ours.

Mm, yeah I guess I did have to buy v10. Sorry I forgot to mention that.

Drew said he might put v10 into future releases.

Drew McLellan

Drew McLellan 2638 points
Perch Support

The version that has been updated to support Perch 2.7 is Redactor v10.

That is great news. Thank you Drew and Rachel.

Thanks to Rob too. One thing I would ask is that I'm unsure about where to add position: static;

Sorry if I'm being a bit dense here. But I am a bit dense!

I did something like this on _config.inc in /perch/addons/plugins/editors/redactor

<link rel="stylesheet" href="PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/edit.css" type="text/css" />

<!-- make toolbar position: static; to prevent it from popping up over the redactor toolbar -->
<style type="text/css">
.topbar {
    position: static;
    margin-bottom: -80px;
}
</style>
<!-- end toolbar style -->

<script type="text/javascript" charset="utf-8">
$(function() {

I currently am running Perch version 2.6.6 and Redactor v9.2.1. I was able to get the toolbar to stay on top of the wywsig field while scrolling for long articles by placing the code snippet below into /perch/addons/editors/redactor/_config.inc

toolbarFixed: true,

so the file _config.inc looks like this

<script type="text/javascript" src="PERCH_LOGINPATH/addons/plugins/editors/redactor/redactor/redactor.js"></script>
<link rel="stylesheet" href="PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/edit.css" type="text/css" />
<link rel="stylesheet" href="PERCH_LOGINPATH/addons/plugins/editors/redactor/redactor/redactor.css" type="text/css" />

<script type="text/javascript" charset="utf-8"> 
$(function() {
    $('textarea.redactor').each(function(i,o){
        var self = $(o);
        self.wrap('<div class="editor-wrap" style="float:left;"></div>');
        self.redactor({  
            toolbarFixed: true, 
            imageUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php?filetype=image',
            fileUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php',
            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'
            }

        });
    });
});
</script> 

Hope that helps.

Thanks so much ... Scott and Rob

Drew McLellan

Drew McLellan 2638 points
Perch Support

Our plugin has been updated to 10.0.2, but you'll need Perch or Runway 2.7.