Forum

Thread tagged as: Question, Addons, Redactor

Redactor II - HTML/Code View?

I’m saddled with HTML-based content in a client's blog as the blog was migrated from Wordpress.

As much as I wish I could rely solely on markdown, I use Redactor as the editor for the blog portion of my client's website.

I performed a test upgrade of Redactor to Redactor II and compared the two. I note that Redactor II is missing an HTML/code view. I find code views indispensable with HTML-based content, particularly when troubleshooting content that has been copy and pasted from somewhere else.

How would you recommend, within the Perch ecosystem, that I customize Redactor II to allow for a code view?

I’ve gone deep with wysiwyg editor customization before, namely with TinyMCE, so I assume such a thing is possible, but I also would want to make sure I don't step on Perch’s toes in some way I haven't anticipated.
Abby Larsen

Abby Larsen 0 points

  • 5 years ago
Simon Clay

Simon Clay 127 points

5 years ago

Hi, you would use the Redactor 'Source Code' plugin: https://imperavi.com/redactor/plugins/source/

It shouldn't step on Perch's toes :)
Abby Larsen

Abby Larsen 0 points
Registered Developer

5 years ago

Thanks, Simon! :)
James Tedder

James Tedder 0 points

5 years ago

HI both,

I assume you add the code to the _config.inc file?

If so please can you share how you implemented this I am not getting the HTML button to show up :-/
Abby Larsen

Abby Larsen 0 points
Registered Developer

5 years ago

James — I downloaded the source.js plugin script that Simon directed me to and placed it in a "plugins" directory within /perch/addons/plugins/editors/redactor/.

I then amended my _config.inc file like so:


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

<!-- HTML Source Plugin -->
<script type="text/javascript" src="PERCH_LOGINPATH/addons/plugins/editors/redactor/plugins/source.js"></script>

<script type="text/javascript" charset="utf-8">
$(function() {
  var set_up_redactor = function() {
    $('textarea.redactor: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" 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',
        fileUploadFields: uploadFields,
        imageUploadFields: uploadFields,
        plugins: ['source'] // HTML Source Plugin
      });
      self.attr('data-init', true);
    });
  };

  set_up_redactor();

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

});
</script>

This is working in my dev and production environments. I admit I’m wary that future updates may overwrite my _config.inc. :/
Abby Larsen

Abby Larsen 0 points
Registered Developer

5 years ago

Is it within the Perch terms of agreement if I publish this config file to a public Gist? If so, I can do that, if it would be helpful.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

You can do anything you like with your own plugin config file.
Abby Larsen

Abby Larsen 0 points
Registered Developer

5 years ago

Here’s a gist for all who might find this helpful.