Fork me on GitHub
Current Releases are 2.1 stable (major release) and (security patch for 2.0)
We've also rebooted our GitHub repo, docs, and more!

Quick WYSIWYG for Vanilla 2 + now with Addon!

edited April 2010 in Questions
UPDATE: all this is now wrapped into an Addon: .... read on if you have insomnia...

This might be useful for some people, not a proper Addon, but gives you simple WYSIWYG on Vanilla 2 - with a little hackery to make it look 'right'.

Requirements: latest version of jwysiwyg (v0.8)

1. Download and extract the jwysiwyg zip/tarball

2. Upload these 3 files to a jwysiwyg folder on your server (outside of Vanilla2's folder might be best)
3. BACKUP and edit: /applications/garden/views/default.master.php

4. Insert these lines just BEFORE the closing </HEAD> tag:
<script src="/jwysiwyg/jquery.wysiwyg.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/jwysiwyg/jquery.wysiwyg.css" type="text/css" />
<script type="text/javascript">
$(function() { $('#Form_Body').wysiwyg(); });
ul.panel {margin-bottom: 2px !important;}
textarea#Form_Body { position: absolute; overflow: hidden; top: -999px;}
div#CommentForm form#Form_Comment div {margin-bottom: 10px;}
5. Save/upload the edited default.master.php

That's it! To test, start a new discussion or view an existing discussion - you should see a toolbar with the usual formatting buttons. Let me know if you run into any issues. I've only tried it on a Mac (10.6.3) with Safari, Chrome and Camino.

Some notes...
The 3 additional lines of CSS are hacks to make it visually functional. If you are interested in the details, go to this 'Issues' thread on jwysiwyg's github:

Additional Tweaks
You can edit the 'jquery.wysiwyg.min.js' file to make 2 cosmetic changes - BEWARE OF TYPOS WHEN YOU DO THIS ON THE MINIFIED JS:

1. To make jwysiwyg's editing font match Vanilla2's default, search for:
<body style="margin: 0px;">
and replace it with:
<body style="margin: 0px;font-family: \'lucida grande\',\'Lucida Sans Unicode\', Tahoma, sans-serif;">
2. To make the jwysiwyg <textarea>s match the width of other form elements, search for:
{width:(newX>0)?(newX).toString() +'px':'100%'}
and replace it with:
{width:(newX>0)?(newX).toString() - 10 +'px':'100%'}
There are many other (& cleaner) options for tweaking jwysiwyg, check the wiki:
and examples:


Sign In or Register to comment.