WYSIWYG Editor (htmlArea)

Hi there ...

I have made use of some hacks you guys developed and i do wish that one day i will give back .. mean while i can only say Thank You all.

i am here to let you all know of a great WYSIWYG editor that will work with any < form > in any script .. including VBulletin.
It REPLACES the < textarea > tag.
I did not develop this .. i am just letting you all know about it ..
Its FREE .. and you can get it from here: htmlArea

Features:
- A complete WYSIWYG editor.
- Font Color Picker.
- Background Color Picker
- Insert Image (with alignment, Alt text, Bordre, Spacing)
- Insert Link (drop-down menu selector for http ftp etc.)
- and some more ... just look at it and test it.

How it works:
It just replaces the < textarea > tag with a WYSIWYG editor.
You edit your Head Inserts and add 3 lines in your newthread and/or newreply templates.. as a matter of fact you can use it anywhere a textarea exists .. including the QuickReply box.

installation:
I will just give instructions for modifying the new thread template as an example.

1- Upload contents of zip file into you forum dir. and put all included images in your images folder.

2- Control Pannel >> Styles >> Modify >> [fonts/colors/etc]
then in your headinsert at the top add this:

<!-- START : EDITOR HEADER - INCLUDE THIS IN ANY FILES USING EDITOR -->
<script language="Javascript1.2" src="editor.js"></script>
<script>
_editor_url = "";
</script>
<!-- END : EDITOR HEADER -->

3- Still in your headinsert and right after
< style type="text/css" > add:

.btn   { BORDER-WIDTH: 1; width: 26px; height: 24px; }
.btnDN { BORDER-WIDTH: 1; width: 26px; height: 24px; BORDER-STYLE: inset; BACKGROUND-COLOR: buttonhighlight; }
.btnNA { BORDER-WIDTH: 1; width: 26px; height: 24px; filter: alpha(opacity=25); }
body, td { font-family: arial; font-size: 12px; }
.headline { font-family: arial black, arial; font-size: 28px; letter-spacing: -2px; }
.subhead  { font-family: arial, verdana; font-size: 12px; let!ter-spacing: -1px; }

Save it now

4- open the template where you want to apply the WYSIWYG Editor ..
find < /TEXTAREA > and rigth after it add:

<script language="javascript1.2">
editor_generate('message'); // field, width, height
</script>

Thats all.


Clickable Smilies and Buttons:
Clickable smilies and buttons will not work with htmlEditor as it is .. however, htmlEditor provides a way to solve this ... its just that i know nothing about java scripts .. and surely someone here can edit the VB javascripts files to get it to work.
Read instructions after you download.

Good Luck all and Enjoy.

[Erwin]

Today at 02:46 AM LoveShack said this in Post #19
It's converting from bbcode to html in editpost that's going to be tricky (and seems to be one of the big issues with eiSecure's hack).

Really? I've managed to get it working flawlessly. Also got eiSecure's hack working for PM's too.

[Boofo]

Are you referring to eiSecure's hack? The one I am having problems with it htmlarea. Do you have that one working?

[Paul]

Yesterday at 11:49 PM Erwin said this in Post #21
Really? I've managed to get it working flawlessly. Also got eiSecure's hack working for PM's too.

If you edit a post with eiSecure's hack, does the message appear formatted properly in the editor or do you see bbcode instead?

[Erwin]

Today at 03:10 PM LoveShack said this in Post #23
If you edit a post with eiSecure's hack, does the message appear formatted properly in the editor or do you see bbcode instead?

Depends - I have seen both. I think if the original post was by Quick Reply, you see bbcode, but if the original post was made with his hack, you see the actual effects.

[Black Vivi]

I think I might be ablew to get this to work wih BB Code, have to edit it alot though...

[MalaK_3araby]

04-13-03 at 07:06 AM Boofo said this in Post #22
Are you referring to eiSecure's hack? The one I am having problems with it htmlarea. Do you have that one working?

i got that working w/o a problem and have been using it for sometime now.
get the latest version and follow instruction carefully.
It is important where you locate the script and associated files/images. I use:
forum/editor.js
forum/images/ed_*.gif

i used the above paths and edited html like this:

<!-- htmlArea -->
<script language="Javascript1.2"><!-- // load htmlarea
_editor_url = "";                     // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac')        >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera')      >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
 document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
 document.write(' language="Javascript1.2"></scr' + 'ipt>');  
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// --></script> 
<!-- /htmlArea -->

<!-- START : EDITOR HEADER - INCLUDE THIS IN ANY FILES USING EDITOR -->
<script language="Javascript1.2" src="editor.js"></script>
<script>
_editor_url = "";
</script>
<!-- END : EDITOR HEADER -->

and after the </textarea> tag, used:

<script language="JavaScript1.2" defer>
editor_generate('message');
</script>

I hope that helps.

[Xelation]

anyone ever get this working with bbcode?

[xware]

<font color="darkorange">Thanks, how does this hack work with HTMLArea-3.0 ?</font>

[gmarik]

Rather insteresting!