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

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

Thanks, Simon! :)

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

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

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

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

Abby Larsen

Abby Larsen 0 points
Registered Developer

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