Fork me on GitHub
Current releases are 2.1.4 (30 Oct 2014) and 2.0.18.13 (5 Aug 2014)

Ready for 2.1? Find out if your plugins are compatible. 2.0 will no longer be updated after Dec 2014.

Quick WYSIWYG for Vanilla 2 + now with Addon!

rakrak
edited April 2010 in Vanilla 2.0 Help
UPDATE: all this is now wrapped into an Addon: http://vanillaforums.org/addon/549/jquery-wysiwyg .... 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) http://github.com/akzhan/jwysiwyg/downloads

Installation
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)
jquery.wysiwyg.min.js
jquery.wysiwyg.gif
jquery.wysiwyg.css
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(); });
</script>
<style>
ul.panel {margin-bottom: 2px !important;}
textarea#Form_Body { position: absolute; overflow: hidden; top: -999px;}
div#CommentForm form#Form_Comment div {margin-bottom: 10px;}
</style>
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: http://github.com/akzhan/jwysiwyg/issues/closed#issue/1

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: http://wiki.github.com/akzhan/jwysiwyg/
and examples: http://akzhan.github.com/jwysiwyg/examples/
«1

Comments

«1
Sign In or Register to comment.