Quick WYSIWYG for Vanilla 2 + now with Addon!

rak · April 2010

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/

[-Stash-] · April 2010

Nice hacks! :D

Any plans to make it an addon?

rak · April 2010

Hadn't really looked at making an Addon... is it straightforward?

I only tried this after I thought that the charity I was setting up the forum for might get spooked by having to add HTML tags for formatting.

Vanilla2 was using jquery so I Googled jquery wysiwyg plugin, jwysiwyg was the first result and looked the neatest amongst these screenshots:
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

Even I was surprised it worked(!) with just 3 files and 3 lines in default.master.php

It's a rainy Sunday, so maybe I'll take a look at the addon docs...

rak · April 2010

-Stash-: That was easier than I thought!!

Here's the Addon: http://vanillaforums.org/addon/549/jquery-wysiwyg

I couldn't get the AddJsFile and AddCssFile commands to work though.

Ended up using $Sender->Head->AddString to add the script and css lines.

Anyone know why?

This is what I thought would work:

public function Base_Render_Before(&$Sender) {     
$Sender->AddJsFile('/plugins/jwysiwyg/jquery.wysiwyg.min.js');
$Sender->AddCssFile('/plugins/jwysiwyg/jquery.wysiwyg.css');
$Sender->Head->AddString('$(function() { $("#Form_Body").wysiwyg(); });');
}

this is what I ended up using:

public function Base_Render_Before(&$Sender) {     
$Sender->Head->AddString('<script src="/plugins/jwysiwyg/jquery.wysiwyg.min.js" type="text/javascript"></script>');
$Sender->Head->AddString('<link rel="stylesheet" href="/plugins/jwysiwyg/jquery.wysiwyg.css" type="text/css" />');
$Sender->Head->AddString('<script type="text/javascript">$(function() { $("#Form_Body").wysiwyg(); });</script>');
}

Not a big deal, but might be an issue it you have your Vanilla installation somewhere other than the root folder.

viziona · April 2010

try without starting slash. example:
$Sender->AddJsFile('plugins/jwysiwyg/jquery.wysiwyg.min.js');

rak · May 2010

@viziona: thanks for the tip!

Went back to the code and tried it with and without the slash... both work for AddJsFile.

So it looks like the original issue was only with AddCssFile, it doesn't seem to work with or without the slash, eg:

$Sender->AddCssFile('plugins/jwysiwyg/jquery.wysiwyg.css');

Is that the correct way to use AddCssFile?

Ron · July 2010

Awesome add-on. Does this work with comments?

jad · July 2010

Hello

Where’s the : garden/views/default.master.php

!!

I have setup only : jwysiwyg ( not edit ) because i don’t see : garden/views/default.master.php

But look this problem :

FATAL ERROR IN: PHP.Gdn_ErrorHandler();

"jwysiwyg requires the HTMLPurifier plugin version >=1.0." LOCATION: /home/content/w/a/s/-------------/html/va/library/core/functions.general.php > 303: // 1. Make sure that $RequiredItems are present > 304: if (is_array($RequiredItems)) { > 305: foreach ($RequiredItems as $RequiredItemName => $RequiredVersion) { > 306: if (array_key_exists($RequiredItemName, $EnabledItems) === FALSE) { >>> 307: throw new Exception( > 308: sprintf( > 309: T('%1$s requires the %2$s %3$s version %4$s.'), > 310: $ItemName, > 311: $RequiredItemName,

rak · July 2010

@jad: jwysiwyg is looking for the HTMLPurifier plugin, which in the recent release version of Vanilla2 has been replace with htmlawed.

A quick fix for this is to edit plugins/jysiwyg/default.php, on line 24 change:

'RequiredPlugins' => array('HTMLPurifier' => '>=1.0'),

to:

'RequiredPlugins' => FALSE,

It's a start, but I have not done any further testing of jwysiwyg with Vanilla2 - eg. doesn't seem to work in comments.

rak.

jad · July 2010

It’s not appear in the discussions and comment !!
It’s not working !!
I want bbcode very important !!
Or i leaving this script

rak · July 2010

@Jad: Did you disable/enable the plugin after editing the default.php file? and are you running the final/july22 release of Vanilla2?

basb · July 2010

Why does the plugin look like this on my Discussion-pages?

When I start a new discussion everything seems correct!

Ron · July 2010

@basb there was a css fix for this on the addon page but all the comments seem to be purged. Hopefully someone is able to post it here.

basb · July 2010

@Ron this would be great! Thanks!

rak · July 2010

@basb: Try editing line 13 (style for: div.wysiwyg ul.panel li a) of jwysiwyg's css file: plugins/jwysiwyg/jquery.wysiwyg.css

replace:

text-indent: -5000px;

with:

font-size:0;

Ron · July 2010

@basb @rak posted the css fix I was referring to. this is what fixed the issue for me.

rak · July 2010

@basb @Ron: Updated the Addon to v1.1 with css fix and default.php update for Vanilla2. http://www.vanillaforums.org/addon/549/jquery-wysiwyg

Are you able to get formatting options in comments?

rysliv · July 2010

MY wysiwyg shrinks my Text content so you cant even type anything into the box at all!

basb · July 2010

@rak seems to work now!
Some questions about it:
1. Is it normal that now I can't use html in comments any more? I would need this - is it possible to use both?
2. If I indent text, it gets marked as a quote (background becomes yellowish)
3. If I create a table, the empty rows are really small and it's hard to put the cursor in there with the mouse
4. Is it possible to translate the popups?

rak · July 2010

@basb: What browser/OS are you using? Answer to your questions:

1. You can try editing the .js and .css file to make html view button & textarea visible:
edit plugins/jwysiwyg/jquery.wysiwyg.min.js
search for:

"html":{"visible":false,"

change to:

"html":{"visible":true,"

edit plugins/jwysiwyg/jquery.wysiwyg.css and delete line 3:

textarea#Form_Body { position: absolute; overflow: hidden; top: -999px;}

[I'm not sure if this works 100% - let us know]

2. jwysiwyg's 'indent' button inserts a <blockquote> - it's possible to customise the way it works, if you want to try: http://github.com/akzhan/jwysiwyg/blob/master/README.rst

3. You can try hack up plugins/jwysiwyg/jquery.wysiwyg.min.js:
search for:

<table border='1'

insert this inbetween table & border

cellpadding='10'

Otherwise, you can use the arrows keys to move between cells and as you start typing the cell should expand.

4. You could search through the .js file and edit the text in popups - I think jwysiwyg developers are working on making the next version 'pluggable': http://github.com/akzhan/jwysiwyg

basb · July 2010

@rak
1. Seems to work but it's only a workaround. If I view html, a second Textarea underneath becomes visible which shows the html-code. If I want to use html, I have to enter it in that field. But it won't be copied into the upper field, so if I make changes in the lower field I have to stay in there, otherwise all of my entered code will be deleted.

3. Works like a charm, thanks!

Nimaveli · July 2010

Someone please help, I installed the plug-in but it's not working. Do I have to do any extra steps to get it to work or something?

It also seems that my forum just randomly supports BBCode, not that this is a bad thing cause I want to use BBCode but I never put that function in and I think it's ''interfering'' with this plugin. Could someone help me out please? :)

rak · July 2010

@Nimaveli: It should 'just work' - are you running the final release of Vanilla2?

Nimaveli · July 2010

Yes I am, here's a link to my forum if that helps you figure out the problem;

http://amerikasmostwanted.com/vanillaforums-Garden-8832d74/

rak · July 2010

@Nimaveli: I don't see the references to the plugin's .js and .css files in your page source.

Try editing plugins/jwysiwyg/default.php, on lines 39 & 40 remove the leading-slash before "plugins" in the file urls.

Then disable/enable the plugin and reload the site and let us know if it works.

Nimaveli · July 2010

@Rak
Hmm, I tried doing that but unfortunatly it still doesn't work D:

rak · July 2010

@Nimaveli: I reloaded your site and can now see the .js and .css referenced correctly.

Are you seeing any other errors?

What other plugins do you have loaded?

Nimaveli · July 2010

@Rak
These are the other plugins I got activated right now;

Tagging
Whos online
HtmLawed Flagging
Signatures
Getting Started

rak · July 2010

@Nimaveli: Try disabling everything expect HtmlLawed and see if it works.

Nimaveli · July 2010

@Rak
Tried that out, didn't help :(

rak · July 2010

@Nimaveli: Maybe it's the theme, can you switch back to the default theme and see if it works?

Howdy, Stranger!

Categories

In this Discussion

Quick WYSIWYG for Vanilla 2 + now with Addon!

Comments