Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: [1] 2 3 ... 5

Author Topic: [Addon Package] Whizzywig editor  (Read 75540 times)

Joost

  • Guest
[Addon Package] Whizzywig editor
« on: June 03, 2007, 07:13:44 PM »

updated
Whizzywig editor is a lightweight editor (less than 40kb) developed by Unverse.net. Whizzywig editor is also highly customiziable.
- Produces valid xhtml
- Adds [break]
- Cleans up Word code. You don't need that, do you?!  :P  Answer: 'Of course not, It is for someone I know.'
- It works in internet Explorer and Mozilla/firefox

Here is the package
It is implemented in such way, that it will only load when the administrator is logged in. Visitors won't be able to use it to edit the contact form and it will not interfere with other javascripts used.

Here is a Whizzywig editor demo

What you need is:
Whizzywig.js 25,3 kB
xhtml.js 4,91 kB
Optional:
Buttons 5,45 kB


In snews.php, section '// TITLE' approximately line 327, look for:

Code: [Select]
if ($_SESSION[db('website').'Logged_In'] == token()) {js();}replace it with:

Code: [Select]
if ($_SESSION[db('website').'Logged_In'] == token()) {js();
 echo '<script type="text/javascript" src="whizzywig.js"></script>';
 echo '<script type="text/javascript" src="xhtml.js"></script>';
}
Note: Using this code, you will have to put whizzywig.js and xhtml.js in the directory where index.php resides. If you put the files somewhere else, change the path in the code.

Below // FORM GENERATOR approximately line 1054 look for:

Code: [Select]
case 'textarea': $output = '<p>'.$lbl.':
<textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>'; break;
replace it with:
Code: [Select]
# Wyzz Text Editor Mod
    case 'textarea':
        if ($_SESSION[db('website').'Logged_In'] == token()) {
         $output = '<textarea name="'.$name.'" id="'.$name.'" rows="'.$rows.'" cols="80"'.$attribs.' style="width:97%;height:28em;">'.$value.'</textarea>
<script type="text/javascript">buttonPath = "buttons/"; makeWhizzyWig("'.$name.'","all"); </script>'; break;
        } else {
        $output = '<p>'.$lbl.':
<textarea name="'.$name.'" rows="'.$rows.'"cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>';
        }
        break;
note: You can adjust height and width by editing style="width:97%;height:28em;"


To disable sNews Editor's function buttons (line 1325 - line 1335), comment it out using /* This is a comment */. It should look like this like this:

Code: [Select]
/*---------
echo '<p>';
echo html_input('button', 'strong', '', 'B', '', 'button', 'onclick="tag(\'strong\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'em', '', 'I', '', 'button', 'onclick="tag(\'em\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'strike', '', 'Strike', '', 'button', 'onclick="tag(\'strike\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'p', '', 'P', '', 'button', 'onclick="tag(\'p\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'br', '', 'BR', '', 'button', 'onclick="tag(\'br\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'break', '', 'Break', '', 'button', 'onclick="tag(\'break\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'img', '', 'Image', '', 'button', 'onclick="tag(\'img\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'link', '', 'Link', '', 'button', 'onclick="tag(\'link\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'include', '', 'Include', '', 'button', 'onclick="tag(\'include\')"', '', '', '', '', '', '', '', '');
echo '</p>';
--------*/
If you want to add  a [break] button, insert this right after the disabled snews buttons
Code: [Select]
echo '<p><input type="button" value="Continue reading (break article)" onclick="insHTML(\'[break]\')"></p>';Of course, you can also insert [break] handcoded and use the function insHTML for something else.

Buttons
Unzip Buttons and upload the file to the server.
In whizzywig.js, look for var buttonPath; and change it to var buttonPath = '/buttons/; (replace 'buttons' with the name of the directory, if needed).


Working with Whizzywig editor
This you should know, other functions are obvious.
Quote
If you want a new line without a paragraph break hold down the shift key:

Simply pressing Enter...

…gets a new para. But pressing Shift+Enter...
…gets a line break without a new paragraph.
Note: There is no such thing as a perfect editor. Whizzywig editor depends on the browser that is used. Unfortunately, there is no such thing as a perfect browser either, meaning: There might be, NO, GUARANTEED THERE ARE!! :P   some minor bugs.

(thanks to Sewen, who did the first mod for 1.5. and  Keyrocks. )
« Last Edit: October 12, 2007, 06:15:01 AM by Joost »
Logged

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 476
[Addon] Whizzywig editor
« Reply #1 on: June 03, 2007, 08:47:55 PM »

Nice addition joost :D
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

stephane

  • Full Member
  • ***
  • Karma: 6
  • Posts: 205
[Addon] Whizzywig editor
« Reply #2 on: June 06, 2007, 02:54:35 PM »

Hi,
I'm actually try this text editor, work's fine.
But I think there is some mistake in your "how to configure" !

To add buttons link, it's not in the whizzywig.js but in snews.php file
Code: [Select]
# Wyzz Text Editor Mod
    case 'textarea':
        if ($_SESSION[db('website').'Logged_In'] == token()) {
         $output = '<textarea name="'.$name.'" id="'.$name.'" rows="'.$rows.'" cols="80"'.$attribs.' style="width:97%;height:28em;">'.$value.'</textarea>
<script type="text/javascript">buttonPath = "buttons/"; makeWhizzyWig("'.$name.'","all"); </script>'; break;
        } else {
        $output = '<p>'.$lbl.':
<textarea name="'.$name.'" rows="'.$rows.'"cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>';
        }
        break;
Here --> script type="text/javascript">buttonPath = "buttons/";  Replace path by yours.

I first try in your way, but that doesn't work on my sNews 1.6. so I take a look further and I try in my way, that work fine  :P

To add french.js, or other  just copy from the language.js ans paste it in the whizzywig.js after var whizzies = new Array();
That all.

Another question about this text editor. I notice that when you hit "Enter" on your keyboard you ad a <p>
</p>  Why did he put a
 between the <p> ?? Ands this br balise is not valid xhtml ! Dam.
Any idea to take this
 off ?

Stéphane
« Last Edit: August 28, 2007, 04:21:19 AM by Phil Martin (Philmoz) »
Logged

Joost

  • Guest
[Addon] Whizzywig editor
« Reply #3 on: June 06, 2007, 06:21:21 PM »

I discovered xhtml.js is not found always using different browsers. I will change that by linking directly through the template (index.php). I found uppercase tags in IE and lowercase (correct) in Firefox.
Which browser do you use, Stephane?
About buttons. Discovered I also link to them through snews.php . Mixup with another tutorial. I will correct this.
Logged

stephane

  • Full Member
  • ***
  • Karma: 6
  • Posts: 205
[Addon] Whizzywig editor
« Reply #4 on: June 06, 2007, 06:52:16 PM »

I'm using FF & Safari on MacOS X.
But I expect that work's well also on IE, end user mostly visit website with IE  :(

I can't find where is this function to tell <p>
</p> ?? when you hit Enter on the keyboard. Strange code anyway !
« Last Edit: August 28, 2007, 04:23:34 AM by Phil Martin (Philmoz) »
Logged

Artos Viros

  • Newbie
  • *
  • Karma: 0
  • Posts: 20
[Addon] Whizzywig editor
« Reply #5 on: June 06, 2007, 10:24:54 PM »

There won't be a problem with your visitors, because this addon will only work for administrators, checkout the modifications

Quote
# Wyzz Text Editor Mod
    case 'textarea':
       if ($_SESSION[db('website').'Logged_In'] == token()) {
         $output = '<textarea name="'.$name.'" id="'.$name.'" rows="'.$rows.'" cols="80"'.$attribs.' style="width:97%;height:28em;">'.$value.'</textarea>
<script type="text/javascript">buttonPath = "buttons/"; makeWhizzyWig("'.$name.'","all"); </script>'; break;
        } else {
        $output = '<p>'.$lbl.':
<textarea name="'.$name.'" rows="'.$rows.'"cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>';
        }
        break;
« Last Edit: August 28, 2007, 04:22:14 AM by Phil Martin (Philmoz) »
Logged

stephane

  • Full Member
  • ***
  • Karma: 6
  • Posts: 205
[Addon] Whizzywig editor
« Reply #6 on: June 07, 2007, 12:28:02 AM »

Oups  :/
you right Artos Viros.

But still doesn't explain the <p>
</p> code !
« Last Edit: August 28, 2007, 04:22:41 AM by Phil Martin (Philmoz) »
Logged

stephane

  • Full Member
  • ***
  • Karma: 6
  • Posts: 205
[Addon] Whizzywig editor
« Reply #7 on: June 09, 2007, 01:06:21 PM »

xhtm.js is not found ! So I just put it in snews.php :

Code: [Select]
if ($_SESSION[db('website').'Logged_In'] == token()) {js();
echo '<script type="text/javascript" src="whizzywig.js"></script>';
echo '<script type="text/javascript" src="xtml.js"></script>';
}
Work fine with FF, and pages are valid  :|

I notice that whizzy editor didn't work well with Safari. Some buttons doesn't work. Anyway, It's not really important.

S.
« Last Edit: August 28, 2007, 04:23:05 AM by Phil Martin (Philmoz) »
Logged

Joost

  • Guest
[Addon] Whizzywig editor
« Reply #8 on: June 09, 2007, 05:31:55 PM »

Thank you Stephane for testing, I have updated de mod. Actually it is the same code I used in 1.5. Don't know why I changed it for 1.6.  ::)
« Last Edit: October 02, 2007, 11:11:35 PM by Joost »
Logged

aronka

  • Guest
Re: [Addon] Whizzywig editor
« Reply #9 on: October 06, 2007, 09:33:52 PM »

Is it possible to disable the editor in the contact page?
Logged

Joost

  • Guest
Re: [Addon] Whizzywig editor
« Reply #10 on: October 06, 2007, 10:43:43 PM »

The editor is supposed to be only visible when logged in.So the visitors who cannot log in, will not see it.
It doesn't work for you that way?
Logged

dummy

  • Newbie
  • *
  • Karma: 0
  • Posts: 5
Re: [Addon] Whizzywig editor
« Reply #11 on: October 12, 2007, 12:42:09 AM »

This sounds awesome!!!
I always loved whizzywig  :)

Hey Joost,  Would it be possible for you to include the customized files and the whizzywig editor in new zip file for us to downnload so that we can have a current version of sNews with whiizzywig editor included?

This way it would be an out of the box installation. Maybe the developer could include it on the downloads page as an option?

Thanks much for your work here,
Jeff

PS: If you are not allowed to do that, maybe you could just email it to me?  ;)
Logged

Joost

  • Guest
Re: [Addon Package] Whizzywig editor
« Reply #12 on: October 12, 2007, 04:55:42 AM »

Ok, here it is. sNews for dummies ;):
http://www.perceptieman.tomaatnet.nl/whizzywig-snews16.zip
The license allows to do so: Copyright (c) 2005 John Goodman

This should work when uploaded to the same directory. Xhtml is generated and buttons included.
Update: whizzywig-snews.php must be changed to snews.php
« Last Edit: October 12, 2007, 06:38:08 AM by Joost »
Logged

dummy

  • Newbie
  • *
  • Karma: 0
  • Posts: 5
Re: [Addon Package] Whizzywig editor
« Reply #13 on: October 12, 2007, 05:37:56 AM »

sweet! ...is whizzywig eitor in there too? ...that's kind of a small doenload. ???
I hope it is???  ;D

Thank you!



Ok, here it is. sNews for dummies ;):
http://www.perceptieman.tomaatnet.nl/whizzywig-snews16.zip
The license allows to do so: Copyright (c) 2005 John Goodman

This should work when uploaded to the same directory. Xhtml is generated and buttons included.
Logged

Joost

  • Guest
Re: [Addon Package] Whizzywig editor
« Reply #14 on: October 12, 2007, 06:16:44 AM »

Yep, it is a lightweight editor.

Update: whizzywig-snews.php must be changed to snews.php
« Last Edit: October 12, 2007, 06:37:39 AM by Joost »
Logged
Pages: [1] 2 3 ... 5