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.
Options
How to add code button to WYSIWYG (CLEditor)
![ytadvisors](https://secure.gravatar.com/avatar/220fe8025ea2d8179e1643df03fc9883/?default=https%3A%2F%2Fvanillicon.com%2Fa59db4ea4fa1206f1a189b4b052fb1d9_100.png&rating=g&size=100)
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.
Tagged:
0
Comments
Use the plugin PrettyPrint
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
I have installed and activated the plugin. It still did not add a button for pre or code tags to the editor.
![](https://us.v-cdn.net/5018160/uploads/editor/nn/vndx02c1zwgb.jpg)
Here is a screenshot.
I just got the pastecode plugin working by:
/plugins/cleditor/js/jquery.cleditor.pastecode.js
(source)/plugins/cleditor/default.php
line 127:$Sender->AddJsFile('jquery.cleditor.pastecode.js', 'plugins/cleditor');
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.
Sorry, not a smart question. I am inserting the code now.
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.
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?
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.
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.
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...
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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
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.
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
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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.
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.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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
It may be in the few lines above or bellow
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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.
-- 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.
-- 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
-- 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
-- 1. Removed "preview" button since the wysiwyg is a preview, and it caused
some glitches.
v0.5: 02NOV2010 - by Tim @ Vanilla
-- 1. Added backreference to the cleditor JS object and attached it to the textarea, for external interaction
v1.0.1 31AUG2011 - by Todd @ Vanilla
-- 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);
}
public function AddClEditor() {
$this->_AddCLEditor(Gdn::Controller());
}
$Sender->AddJsFile('jquery.cleditor.pastecode.js', 'plugins/cleditor');
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(); }); }); });$CssInfo = AssetModel::CssPath('cleditor.css', 'plugins/cleditor');
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 Structure() {
}
}
`