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.

[MalaK_3araby]

screenshot attached

[Erwin]

Looks good. I'm sure it is possible to include clickable smilies. Looks like an improvement to eisecure's hack. I hope he sees this to see if he can make the smilies work.

[MalaK_3araby]

hi Erwin ..

this is not a hack .. its more like an addon -i think.
but yeah ... its much better than a hack .. we just need to modify it to get the smilies to work. i am already using it as it is and my members love it.

[Erwin]

I am guessing that you would need to enable HTML in posts. Am I right? That would be the disadvantage of this addon.

[MalaK_3araby]

Hi Erwin

Yeah .. you are right.
i have html enabled .. so no problem here.

i am talking to the developer to see how we can replace < with [ and > with ] ..

Erwin.. i use your "Email Feedback Form" and i love it .. thanks for a good hack.

BTW .. V1.04 of htmlArea is out .. its much more optimized.
D-load and demo here:
http://www.interactivetools.com/products/htmlarea/

[Meltingfire]

Follow the instructions for installing it that MalaK_3araby wrote, then just simply use the vbcode.js that i have attached.

This will make smileys work, and the vBcode buttons...
it will work for both IE5.5 and above with the htmlArea and for other browsers with the standard texteditor

If u dont want to use the vBcode buttons, just delete the html from the template vbcode_buttons, but do not delete the <script> tags that load vbcode.js

[Erwin]

If you are referring to eisecure's excellent hack, then this is the wrong thread.

[Meltingfire]

Well this one seams to have better features, and is easier to install... also it is easier to update.. just replace the .js and .html files...

the only thing is that it uses html code instead of vBcode.. but for me it doesnt matter..i even maybe can fix that too... if i got the time...

[Erwin]

Good job in integrating the smilies. Too bad you need HTML enabled - it's a big security risk.