Fork me on GitHub
Current release is 2.1.6 (21 Nov 2014).

Users who have not yet upgraded to 2.1 should get security release (1 Nov 2014). We will stop providing these security releases to 2.0 at the end of this year.

Quick WYSIWYG for Vanilla 2 + now with Addon!

edited April 2010 in Vanilla 2.0 Help
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.