How to add code button to WYSIWYG (CLEditor)

ytadvisors · September 2015

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.

vrijvlinder · September 2015

Use the plugin PrettyPrint

ytadvisors · 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.

hgtonight · September 2015

I just got the pastecode plugin working by:

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

Happy hacking!

ytadvisors · September 2015

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

hgtonight · September 2015

@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

ytadvisors · 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?

vrijvlinder · 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.

ytadvisors · September 2015

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

vrijvlinder · September 2015

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

ytadvisors · September 2015

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.

vrijvlinder · September 2015

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

ytadvisors · September 2015

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

Adding /plugins/cleditor/js/jquery.cleditor.pastecode.js (source)

Adding the resource call to /plugins/cleditor/default.php line 127: $Sender->AddJsFile('jquery.cleditor.pastecode.js', 'plugins/cleditor');

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

hgtonight · September 2015

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

vrijvlinder · 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>

ytadvisors · September 2015

I added it as you can see below.

vrijvlinder · September 2015

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.

ytadvisors · 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

vrijvlinder · September 2015

It may be in the few lines above or bellow

vrijvlinder · 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",

ytadvisors · September 2015

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() {

}
}
`

How to add code button to WYSIWYG (CLEditor)

Comments