Blog Documentation Book a Demo
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.

Quick WYSIWYG for Vanilla 2 + now with Addon!

rakrak
edited April 2010 in Vanilla 2.0 - 2.8
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/
«13

Comments

  • StashStash ✭
    Nice hacks! :D

    Any plans to make it an addon?
  • rakrak
    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...
  • rakrak
    edited 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.
  • vizionaviziona New
    edited April 2010
    try without starting slash. example:
    $Sender->AddJsFile('plugins/jwysiwyg/jquery.wysiwyg.min.js');
  • rakrak
    @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?
  • RonRon New
    Awesome add-on. Does this work with comments?
  • jadjad
    edited 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,
  • rakrak
    edited 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.
  • jadjad
    edited 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
  • rakrak
    @Jad: Did you disable/enable the plugin after editing the default.php file? and are you running the final/july22 release of Vanilla2?

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

    image

    When I start a new discussion everything seems correct!
  • RonRon New
    @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.
  • basbbasb
    @Ron this would be great! Thanks!
  • rakrak
    edited 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;
  • RonRon New
    @basb @rak posted the css fix I was referring to. this is what fixed the issue for me.
  • rakrak
    @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?
  • ryslivrysliv
    MY wysiwyg shrinks my Text content so you cant even type anything into the box at all!
  • basbbasb
    edited 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?
  • rakrak
    edited 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
  • basbbasb
    @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!
Sign In or Register to comment.