Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Support for Vanilla Forums Cloud product

In this Discussion

Follow Us


Redactor Editor Plugin

XarcellXarcell
edited June 2012 in Questions

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.

«1

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.

  • KasperKasper Front-end Wizard 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) | Web Designer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

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

    Go right ahead!

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

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

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

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

    Monetary Donations will be appreciated if you use my plugins. Thanks in Advance.
    As a waiter gets a tip for a good meal, tips for successful solutions appreciated as well. Peregrine

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

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

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

  • 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 Front-end Wizard 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) | Web Designer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

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

  • XarcellXarcell
    edited June 2012

    I was having an argument with another software guru about implementing Redactor. Apparently, if your website generates revenue, you gotta pay a $19 fee per domain to use this.

    which is a deal breaker for me.

  • KasperKasper Front-end Wizard Vanilla Staff

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

  • @kasperisager @Xarcell That really sucks. Free but not really!

  • XarcellXarcell
    edited June 2012

    He says that if you site generates revenue, you need to pay $19. A multi-site license is $89. That doesn't mean you can't make a free plugin out of it. I reckon fee's are based on the honor system...

    I will continue to work on this for public use. The owner of redactor basically says, add-ons, modules, or plugins with redactor can be made free to the public. Who pays for a license or not is between that person using it on his/her domain and redactor owner. Just be sure to make note of that with the application.

  • Free but not really!

    Open source doesn't mean it is free of cost. I think a lot of people assume that, but are wrong in general.

    grep is your friend.

  • just a FYI, I came back to look at making this a plugin. ATM, I got everything working except the insert image(only upload part), video, and file.

    If anyone has any ideas or suggestions let me know.

  • I need help getting the upload to work with Vanilla. Here is the sample code:

    // files storage folder
    $dir = '/home/web/sitecom/redactor/images/';
    
    $_FILES['file']['type'] = strtolower($_FILES['file']['type']);
    
    if ($_FILES['file']['type'] == 'image/png' 
    || $_FILES['file']['type'] == 'image/jpg' 
    || $_FILES['file']['type'] == 'image/gif' 
    || $_FILES['file']['type'] == 'image/jpeg'
    || $_FILES['file']['type'] == 'image/pjpeg')
    {   
        // setting file's mysterious name
        $file = $dir.md5(date('YmdHis')).'.jpg';
    
        // copying
        copy($_FILES['file']['tmp_name'], $file);
    
        // displaying file
        echo '<img src="/tmp/images/'.$file.'" />';
    }
    

    How can this be coded to be secure, and have the proper paths.

    Thanks.

  • Have you looked at FileUpload plugin to see if they do any better?

  • yes, I've looked at it, but don't understand it. I think I can get it to work if I can get the absolute path for the $dir = '/home/web/sitecom/redactor/images/'; part.

«1
Sign In or Register to comment.