Redactor Editor Plugin

Xarcell · June 2012

I'm a complete noob to Vanilla. The only thing stopping me from making the switch is the editor. So now I'm trying to make a editor plugin, and I'm not having much luck. My PHP knowledge is limited...

I have everything for my plugin ready, the images, files, etc. However, I need to be able to change

This:
<textarea id="Form_Body" name="Comment/Body" rows="6" cols="100" class="TextBox"></textarea>

To This:
<textarea id="redactor_content" name="comment" rows="6" cols="100" class="TextBox"></textarea>

Any suggestions and examples of how I can accomplish this?

Thanks.

x00 · June 2012

one of the key things the live load, as comment editbox are loaded asynchronously.

$('.TextBox').livequery(function(){
      $(this).redactor();
}

One of the problem is that as the form is loaded in place, when editing you can have severall Form_Body id which is technically illegal, but hey ho.

Some editor rely of the id so this a problem, there is a workaround, but it can break other plugins, and css that rely on that id not being unique.

I'm hoping that is not the case with redactor. It seem to support multiple editor out of the box.

hbf · June 2012

I would look at some of the other plugins that replace the editor to see how they integrate

x00 · June 2012

I wouldn't bother changing the markup, just uses jquery selector to load it as a appropriate.

$('.TextBox').redactor();

x00 · June 2012

one of the key things the live load, as comment editbox are loaded asynchronously.

$('.TextBox').livequery(function(){
      $(this).redactor();
}

One of the problem is that as the form is loaded in place, when editing you can have severall Form_Body id which is technically illegal, but hey ho.

Some editor rely of the id so this a problem, there is a workaround, but it can break other plugins, and css that rely on that id not being unique.

I'm hoping that is not the case with redactor. It seem to support multiple editor out of the box.

Kasper · June 2012

Hmmm... Redactor? That looks like something definitely useful in VanillaBootstrap Mind if I borrow your idea @Xarcell?

Xarcell · June 2012

kasperisager said:
Hmmm... Redactor? That looks like something definitely useful in VanillaBootstrap Mind if I borrow your idea @Xarcell?

Go right ahead!

Xarcell · June 2012

Ok, I'm still trying to figure this out as a learning experience. So far, it's not working. Here's what I have in my default.php:

<?php
if(!defined('APPLICATION')) die();

/*
Plugin adds Redactor (http://redactorjs.com/) jQuery powered WYSIWYG to Vanilla 2

Included files:
1. jquery.redactor.min.js 
2. jquery.redactor.css 
3. images/icons.png

Changelog:

 */

$PluginInfo['redactor'] = array(
   'Name' => 'WYSIWYG (redactor)',
   'Description' => 'Adds a <a href="http://jquery.com/">jQuery</a> powered <a href="http://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> editor to your forum so that your users can enter rich text comments.',
   'Version' => '1.0',
   'Author' => "Xarcell",
   'AuthorEmail' => 'xarcell@yahoo.com',
   'AuthorUrl' => 'http://xarthemes.com',
   'RequiredApplications' => array('Vanilla' => '>=2'),
   'RequiredTheme' => FALSE, 
   'RequiredPlugins' => FALSE,
   'HasLocale' => FALSE,
   'RegisterPermissions' => FALSE,
   'SettingsUrl' => FALSE,
   'SettingsPermission' => FALSE
);

class redactorPlugin extends Gdn_Plugin {

    public function PostController_Render_Before(&$Sender) {
        $this->_AddRedactorEditor($Sender);
    }

    public function DiscussionController_Render_Before(&$Sender) {
        $this->_AddRedactorEditor($Sender);
    }

    private function _AddRedactorEditor($Sender) {
        // Turn off safestyles so the inline styles get applied to comments
        $Config = Gdn::Factory(Gdn::AliasConfig);
        $Config->Set('Garden.Html.SafeStyles', FALSE);

        // Add the Redactor to the form
        $Options = array('ie' => 'gt IE 6', 'notie' => TRUE); // Exclude IE6
        $Sender->RemoveJsFile('jquery.autogrow.js');
        $Sender->AddJsFile('redactor'.(Debug() ? '' : '.min').'.js', 'plugins/RedactorEditor', $Options);
        $Sender->AddCssFile('redactor.css', 'plugins/RedactorEditor', $Options);
        $Sender->Head->AddString('

        <script type="text/javascript">
            jQuery(document).ready(function($) {
              $(\'.TextBox\').livequery(function(){
                    $(this).redactor();
              }
            });
        </script>');
   }

    public function Setup(){}

}

Code based off of CLEditor Plugin...

Xarcell · June 2012

x00 said:
one of the key things the live load, as comment editbox are loaded asynchronously.
$('.TextBox').livequery(function(){
      $(this).redactor();
}
One of the problem is that as the form is loaded in place, when editing you can have severall Form_Body id which is technically illegal, but hey ho.

Some editor rely of the id so this a problem, there is a workaround, but it can break other plugins, and css that rely on that id not being unique.

I'm hoping that is not the case with redactor. It seem to support multiple editor out of the box.

Shouldn't it actually be this?

              $(\'#Form_Body\').livequery(function(){
                    $(this)#redactor_content();
              }

Xarcell · June 2012

I guess I'm in over my head. I am unable to disable the plugin once enabled.

It also appears this isn't working:

        <script type="text/javascript">
            jQuery(document).ready(function($) {
              $(\'.TextBox\').livequery(function(){
                    $(this).redactor();
              }
            });
        </script>

peregrine · June 2012

Does your plugin enable? - by the looks of your default.php (unless there are typos) is pretty much impossible to execute.

3 suggestions from the get go

$PluginInfo['redactor'] = array(

should be (if your file directory is RedactorEditor)
$PluginInfo['RedactorEditor'] = array(

'Name' => 'WYSIWYG (redactor)',

if you want to be able to find the plugin in the dashboard without guessing what the descriptive name might be. I immensely dislike plugin names that don't match the plugin name at least with the first word.

'Name' => 'Redactor Editor',

gdn_Plugin has no closing bracket.

peregrine · June 2012

You might also look at the basic structure of most of the approved plugins with regards as to where to put js files, css files, and php files and break the plugin into little pieces and add as you go until you have the complete plugin working.

Xarcell · June 2012

peregrine said:
Does your plugin enable? - by the looks of your default.php (unless there are typos) is pretty much impossible to execute.

3 suggestions from the get go

$PluginInfo['redactor'] = array(

should be (if your file directory is RedactorEditor)
$PluginInfo['RedactorEditor'] = array(

'Name' => 'WYSIWYG (redactor)',

if you want to be able to find the plugin in the dashboard without guessing what the descriptive name might be. I immensely dislike plugin names that don't match the plugin name at least with the first word.

'Name' => 'Redactor Editor',

gdn_Plugin has no closing bracket.

Thanks for your suggestions. I originally has the name as you suggested, but changed it to reflect the CLEditor plugin(approved).

The gnd_plugin closing bracket is on line 65.

Changing the $pluginInfo fixed the problem with it not disabling. I did not realize that it needed to match the directory.

The only problem I see is the livequery isn't working. When I view the source, it still says:

<textarea id="Form_Body" name="Discussion/Body" rows="6" cols="100" class="TextBox" style="overflow: hidden; display: block; "></textarea>

Instead of:

<textarea id="#redactor_content" name="Discussion/Body" rows="6" cols="100" class="TextBox" style="overflow: hidden; display: block; "></textarea>

Xarcell · June 2012

peregrine said:
You might also look at the basic structure of most of the approved plugins with regards as to where to put js files, css files, and php files and break the plugin into little pieces and add as you go until you have the complete plugin working.

I have, that's the only reason I've gotten as far as I did.

Here is the updated default.php:

<?php
if(!defined('APPLICATION')) die();

/*
Plugin adds Redactor (http://redactorjs.com/) jQuery powered WYSIWYG to Vanilla 2

Included files:
1. redactor.min.js 
2. redactor.css 
3. images/icons.png

Changelog:

 */

$PluginInfo['RedactorEditor'] = array(
   'Name' => 'Redactor Editor',
   'Description' => 'Adds a <a href="http://jquery.com/">jQuery</a> powered <a href="http://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> editor to your forum so that your users can enter rich text comments.',
   'Version' => '1.0',
   'Author' => "Xarcell",
   'AuthorEmail' => 'xarcell@yahoo.com',
   'AuthorUrl' => 'http://xarthemes.com',
   'RequiredApplications' => array('Vanilla' => '>=2'),
   'RequiredTheme' => FALSE, 
   'RequiredPlugins' => FALSE,
   'HasLocale' => FALSE,
   'RegisterPermissions' => FALSE,
   'SettingsUrl' => FALSE,
   'SettingsPermission' => FALSE
);

class redactorPlugin extends Gdn_Plugin {

    public function PostController_Render_Before(&$Sender) {
        $this->_AddRedactorEditor($Sender);
    }

    public function DiscussionController_Render_Before(&$Sender) {
        $this->_AddRedactorEditor($Sender);
    }

    private function _AddRedactorEditor($Sender) {

        // Turn off safestyles so the inline styles get applied to comments
        $Config = Gdn::Factory(Gdn::AliasConfig);
        $Config->Set('Garden.Html.SafeStyles', FALSE);

        // Add the Redactor to the form
        $Options = array('ie' => 'gt IE 6', 'notie' => TRUE); // Exclude IE6
        $Sender->RemoveJsFile('jquery.autogrow.js');
        $Sender->AddJsFile('redactor'.(Debug() ? '' : '.min').'.js', 'plugins/RedactorEditor', $Options);
        $Sender->AddCssFile('redactor.css', 'plugins/RedactorEditor', $Options);
        $Sender->Head->AddString('

        <script type="text/javascript">
            jQuery(document).ready(function($) {
              $(\'#Form_Body\').livequery(function(){
                    $(this)#redactor_content();
              }
            });
        </script>');
   }

    public function Setup(){}

}

mclovin · June 2012

I couldn't get it working either even tough the rendered html and jquery looks good.

mclovin · June 2012

However, I did a sample page in the CustomPages plugin and it works:

http://supernepal.com/plugin/page/redactor

Its so much better than cleditor. So It would be nice to get it working.

http://news.ycombinator.com/item?id=4034147

mclovin · June 2012

Never mind, got it working!

Xarcell · June 2012

mclovin said:
Never mind, got it working!

Great! I hope you intend to release it as a plugin?

Also, did you manage to get images and videos working?

Xarcell · June 2012

mclovin said:
Never mind, got it working!

What did you do to get it to work?

mclovin · June 2012

Try this:

$Sender->AddCssFile('http://redactorjs.com/js/redactor/css/redactor.css');
$Sender->AddJsFile('http://redactorjs.com/js/jquery-1.7.min.js');
$Sender->AddJsFile('http://redactorjs.com/js/redactor/redactor.js');

I haven't got the images, links working yet, but I am assuming its just a relative path thing.

Kasper · June 2012

You can see the Redactor Editor in action here as it's now a part of VanillaBootstrap 2.0a-2.1: http://vanilla.ungdomsrod.dk/
I haven't tested out how it reacts if other editors are enabled though, will test it out tonight if I find the time

Kudos to @Xarcell for the idea and to @x00 for the livequery thingy, that worked out like a charm!

Xarcell · June 2012

mclovin said:
Try this:

$Sender->AddCssFile('http://redactorjs.com/js/redactor/css/redactor.css');
$Sender->AddJsFile('http://redactorjs.com/js/jquery-1.7.min.js');
$Sender->AddJsFile('http://redactorjs.com/js/redactor/redactor.js');

I haven't got the images, links working yet, but I am assuming its just a relative path thing.

I tried that and it still isn't working for me. Can you post your default.php so I can have a look at it?

Redactor Editor Plugin

Best Answer

Answers