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.

How to add code button to WYSIWYG (CLEditor)

I would like to add a code button to the WYSIWYG (CLEditor) so people can wrap their code in the syntax highlighter.
Example.

Thanks for the help.

«1

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
  • ytadvisorsytadvisors Indiana
    edited September 2015

    I have installed and activated the plugin. It still did not add a button for pre or code tags to the editor.
    Here is a screenshot.

  • hgtonighthgtonight ∞ · New Moderator

    I just got the pastecode plugin working by:

    1. Adding /plugins/cleditor/js/jquery.cleditor.pastecode.js (source)
    2. Adding the resource call to /plugins/cleditor/default.php line 127: $Sender->AddJsFile('jquery.cleditor.pastecode.js', 'plugins/cleditor');
    3. Adding the pastecode control to the script call in /plugins/cleditor/default.php line 153.

    Happy hacking!

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • ytadvisorsytadvisors Indiana
    edited September 2015

    Sorry, not a smart question. I am inserting the code now.

  • hgtonighthgtonight ∞ · New Moderator

    @ytadvisors said:
    Where is the pastecode plugin? I cannot find it in the dirrectory.

    I linked it in my original post, but here it is again: https://gist.githubusercontent.com/stas/837281/raw/84792c7140f0cdc664cba7665783266ad7df4ba1/jquery.cleditor.pastecode.js

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • ytadvisorsytadvisors Indiana
    edited September 2015

    OK. So everything went well accept for the last step #3.
    I went to line 153 and there was a doctype declaration. Where should i put the code for #3.
    You did also mean for step 1 to create a new file right?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited September 2015

    @ytadvisors said:
    I have installed and activated the plugin. It still did not add a button for pre or code tags to the editor.

    All you do is add the <pre> and it will wrap it , no need for button. Button Bar Editor has the button.

  • I would use button bar if it had more styling options to choose from. The links are easy to insert as well.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yes that is why I like cleditor, my PrettyPrint plugin works well with that at least for me. Just add the pre tag.

  • Yes it does work well. I am trying to accomplish adding a button that will put the pre tag in for you. Kind of like what this forum does when you click on code.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I am sure there is a way like hgtonight suggested. I find that pasting and selecting the text then pressing the pre button takes more time than adding the pre tag, but then again some people like the extra steps...

  • @hgtonight said:
    I just got the pastecode plugin working by:

    1. Adding /plugins/cleditor/js/jquery.cleditor.pastecode.js (source)
    2. Adding the resource call to /plugins/cleditor/default.php line 127: $Sender->AddJsFile('jquery.cleditor.pastecode.js', 'plugins/cleditor');
    3. Adding the pastecode control to the script call in /plugins/cleditor/default.php line 153.

    Happy hacking!

    What do i do for number 3? Where exactly do i add it in. Line 153 is right in the middle of code. You can see it at this link since the forum will not allow text documents.
    http://cdn4.yourtechadvisors.com/wp-content/uploads/2015/09/default.txt

  • hgtonighthgtonight ∞ · New Moderator

    @ytadvisors said:
    What do i do for number 3? Where exactly do i add it in. Line 153 is right in the middle of code. You can see it at this link since the forum will not allow text documents.

    Inside the strings where you want the button to appear.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited September 2015

    Find the part that has something like this:

    $Sender->Head->AddString

    Right below is the js that adds the cleditor and you can see the buttons, add your new one

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // Make sure the removal of autogrow does not break anything
                $.fn.autogrow = function(o) { return; }
                // Attach the editor to comment boxes.
                $("textarea.BodyBox").livequery(function() {
                    var frm = $(this).closest("form");
                    ed = jQuery(this).cleditor({
                    width:"100%", height:"100%",
    
    //these are the controls/buttons add yours here separated by | 
    
     controls: "bold italic strikethrough | font size " +
                            "style | color highlight removeformat | bullets numbering | outdent indent | " +
                            "alignleft center alignright | undo redo | " +
                            "image link unlink | pastetext source",
                    docType: '<!DOCTYPE html>',
                    docCSSFile: "$CssPath"
                 })[0];
                    this.editor = ed; // Support other plugins!
                    jQuery(frm).bind("clearCommentForm", {editor:ed}, function(e) {
                        frm.find("textarea").hide();
                        e.data.editor.clear();
                    });
                });
            });
        </script>
    
  • I added it as you can see below.

    controls: "bold italic strikethrough | font size " + "style | color highlight removeformat | bullets numbering | outdent indent | " + "alignleft center alignright |pastecode | undo redo | " + "image link unlink | pastetext source",
    It does not show the editor at all anymore.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You need to make sure you add the new button exactly like the others, that means spaces too. You should add the button at the end after pastetext source

    Then after you do the changes you need to delete all the .ini files in the cache of the forum. It is advisable to disable and then enable the plugins when you edit them. Because if you can't enable after editing it will help you find the error. Look at the cgi error log where you host your files. Look at possible errors in web tools for your browser to inspect what is going on.

  • ytadvisorsytadvisors Indiana
    edited September 2015

    I cleared the cache and found this in the error log.

    [14-Sep-2015 21:14:27 UTC] PHP Parse error: syntax error, unexpected '$Sender' (T_VARIABLE), expecting function (T_FUNCTION) in /home2/ytadvise/public_html/forums/plugins/cleditor/default.php on line 90

    Debug says pastecode when i open a forum post.

    Line 90 reads
    /** * @param AssetModel $Sender */ public function AssetModel_StyleCss_Handler($Sender, $Args) { $Sender->AddCssFile('jquery.cleditor.css', 'plugins/cleditor'); } /** * * @param Gdn_Form $Sender

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    It may be in the few lines above or bellow

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited September 2015
    controls: "bold italic strikethrough | font size " +
                        "style | color highlight removeformat | bullets numbering | outdent indent | " +
                        "alignleft center alignright | undo redo | pastecode | " +
                        "image link unlink | pastetext source",
    
  • Well, here it is.
    `<?php
    if(!defined('APPLICATION')) die();

    /*
    Plugin adds CLEditor (http://premiumsoftware.net/cleditor/) jQuery WYSIWYG to Vanilla 2

    Included files:
    1. jquery.cleditor.min.js (as v.1.3.0 - unchanged)
    2. jquery.cleditor.css (as v.1.3.0 - unchanged)
    3. images/toolbar.gif (as v.1.3.0 - unchanged)
    4. images/buttons.gif (as v.1.3.0 - unchanged)

    Changelog:
    v0.1: 25AUG2010 - Initial release.

    • Known bugs:
      -- 1. Both HTML and WYSIWYG view are visible in 'Write comment' view. Quick fix: click HTML view button twice to toggle on/off.

    Optional: Edit line 19 of jquery.cleditor.min.js to remove extra toolbar buttons.

    v0.2: 29OCT2010 - by Mark @ Vanilla.

    • Fixed:
      -- 1. Removed autogrow from textbox. Caused previous bug of showing both html and wysiwyg.
      -- 2. Disabled safestyles. Caused inline css to be ignored when rendering comments.
      -- 3. Added livequery so textareas loaded on the fly (ie. during an inline edit) get wysiwyg.
      -- 4. Upgraded to CLEditor 1.3.0

    v0.3: 30OCT2010 - by Mark @ Vanilla

    • Fixed:
      -- 1. Adding a comment caused the textarea to be revealed and the wysiwyg to
      retain the content just posted. Hooked into core js triggers to clear the
      wysiwyg and re-hide the textbox.

    v0.4: 30OCT2010 - by Mark @ Vanilla

    • Fixed:
      -- 1. Removed "preview" button since the wysiwyg is a preview, and it caused
      some glitches.

    v0.5: 02NOV2010 - by Tim @ Vanilla

    • Fixed:
      -- 1. Added backreference to the cleditor JS object and attached it to the textarea, for external interaction

    v1.0.1 31AUG2011 - by Todd @ Vanilla

    • Fixed:
      -- 1. Fixed js error with new versions of jQuery.

    v1.1 14SEPT2011 - by Linc @ Vanilla
    -- Disabled CLEditor for IE6 or less if using Vanilla 2.0.18b5+.

    v1.1.1 28SEPT2011 - Linc
    -- Fixed infinite height loop confict with embed plugin.
    */

    $PluginInfo['cleditor'] = array(
    'Name' => 'WYSIWYG (CLEditor)',
    'Description' => 'Adds a WYSIWYG editor to your forum so that your users can enter rich text comments.',
    'Version' => '1.3.1.1',
    'Author' => "Mirabilia Media",
    'AuthorEmail' => 'info@mirabiliamedia.com',
    'AuthorUrl' => 'http://mirabiliamedia.com',
    'RequiredApplications' => array('Vanilla' => '>=2'),
    'RequiredTheme' => FALSE,
    'RequiredPlugins' => FALSE,
    'HasLocale' => FALSE,
    'RegisterPermissions' => FALSE,
    'SettingsUrl' => FALSE,
    'SettingsPermission' => FALSE
    );

    class cleditorPlugin extends Gdn_Plugin {

    // public function PostController_Render_Before($Sender) {
    // $this->_AddCLEditor($Sender);
    // }
    //
    // public function DiscussionController_Render_Before($Sender) {
    // $this->_AddCLEditor($Sender);
    // }

    public function Gdn_Dispatcher_AppStartup_Handler($Sender, $Args) {
    // Save in memory only so it does not persist after plugin is gone.
    SaveToConfig('Garden.Html.SafeStyles', FALSE, FALSE);
    }

    /**
    * @param AssetModel $Sender
    */
    public function AssetModel_StyleCss_Handler($Sender, $Args) {
    $Sender->AddCssFile('jquery.cleditor.css', 'plugins/cleditor');
    }

    /** *
    * @param Gdn_Form $Sender
    */
    public function Gdn_Form_BeforeBodyBox_Handler($Sender, $Args) {
    $Column = GetValue('Column', $Args, 'Body');
    $this->_AddCLEditor(Gdn::Controller(), $Column);

      $Format = $Sender->GetValue('Format');
    
      if ($Format) {
         $Formatter = Gdn::Factory($Format.'Formatter');
    
         if ($Formatter && method_exists($Formatter, 'FormatForWysiwyg')) {
            $Body = $Formatter->FormatForWysiwyg($Sender->GetValue($Column));
            $Sender->SetValue($Column, $Body);
         } elseif (!in_array($Format, array('Html', 'Wysiwyg'))) {
            $Sender->SetValue($Column, Gdn_Format::To($Sender->GetValue($Column), $Format));
         }
      }
      $Sender->SetValue('Format', 'Wysiwyg');
    

    }

    public function AddClEditor() {
    $this->_AddCLEditor(Gdn::Controller());
    }

    private function _AddCLEditor($Sender, $Column = 'Body') {
      static $Added = FALSE;
      if ($Added)
         return;
    
        // Add the CLEditor to the form
        $Options = array('ie' => 'gt IE 6', 'notie' => TRUE); // Exclude IE6
        $Sender->RemoveJsFile('jquery.autogrow.js');
        $Sender->AddJsFile('jquery.cleditor'.(Debug() ? '' : '.min').'.js', 'plugins/cleditor', $Options);
    

    $Sender->AddJsFile('jquery.cleditor.pastecode.js', 'plugins/cleditor');
    $CssInfo = AssetModel::CssPath('cleditor.css', 'plugins/cleditor');

      if ($CssInfo) {
         $CssPath = Asset($CssInfo[1]);
      }
    
        $Sender->Head->AddString(<<<EOT
    
    a.PreviewButton { display: none !important; } jQuery(document).ready(function($) { // Make sure the removal of autogrow does not break anything $.fn.autogrow = function(o) { return; } // Attach the editor to comment boxes. $("textarea.BodyBox").livequery(function() { var frm = $(this).closest("form"); ed = jQuery(this).cleditor({ width:"100%", height:"100%", controls: "bold italic strikethrough | font size " + "style | color highlight removeformat | bullets numbering | outdent indent | " + "alignleft center alignright | undo redo | " + "image link unlink | pastetext source", | pastecode docType: '<!DOCTYPE html>', docCSSFile: "$CssPath" })[0]; this.editor = ed; // Support other plugins! jQuery(frm).bind("clearCommentForm", {editor:ed}, function(e) { frm.find("textarea").hide(); e.data.editor.clear(); }); }); });

    EOT
    );
    $Added = TRUE;
    }

    public function PostController_Quote_Before($Sender, $Args) {
    // Make sure quotes know that we are hijacking the format to wysiwyg.
    if (!C('Garden.ForceInputFormatter'))
    SaveToConfig('Garden.InputFormatter', 'Wysiwyg', FALSE);
    }

    public function Setup() {
      $this->Structure();
    

    }

    public function Structure() {

    }
    }
    `

Sign In or Register to comment.