Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Redactor Editor Plugin

XarcellXarcell North Carolina
edited June 2012 in Vanilla 2.0 - 2.8

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.

Best Answer

  • x00x00 MVP
    edited June 2012 Answer ✓

    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.

    grep is your friend.

«13

Answers

  • hbfhbf wiki guy? MVP

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

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

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

    grep is your friend.

  • x00x00 MVP
    edited June 2012 Answer ✓

    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.

    grep is your friend.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited June 2012

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

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • XarcellXarcell North Carolina

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

    Go right ahead!

  • XarcellXarcell North Carolina
    edited 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...

  • XarcellXarcell North Carolina

    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();
                  }
    
  • XarcellXarcell North Carolina
    edited 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>
    
  • peregrineperegrine MVP
    edited 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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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 may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • XarcellXarcell North Carolina

    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>

  • XarcellXarcell North Carolina

    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(){}
    
    }
    
  • I couldn't get it working either even tough the rendered html and jquery looks good.

  • 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

  • Never mind, got it working!

  • XarcellXarcell North Carolina

    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?

  • XarcellXarcell North Carolina

    mclovin said:
    Never mind, got it working!

    What did you do to get it to work?

  • 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.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    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!

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • XarcellXarcell North Carolina

    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?

Sign In or Register to comment.