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]

MetlignFire .. Good Job indeed .. and many thanks.
Clickable smiles and all the buttons now work .

[Meltingfire]

Im going to try to make it hide the php-code buttnons if the browser supports htmlArea...

I think a simple javascript with a if-statement would fix it...
but im not a master of javascripts =) i just know programming in general

[MalaK_3araby]

Meltingfire .. now that would be an excellent idea.

I have disabled the buttons and i am currently using a pop-window with pulldown menu instead of the buttons.
if you wanna see that get the attached 2 files : (overwrite your editor.js and upload select_phrase.html

i love this product .. i am using it with my VBulletin, guest book, PhpNuke and other places where i use an online editor.

[Mirri]

Cool.... I bet my members are gonna love this one.. :banana:

[Paul]

This looks great. Sorry to resurrect an old thread, but this is exactly what we've been searching for. I'm going to attempt over the next few days to write a function that will allow this to work without enabling HTML which is a major security risk.

It should be fairly simple to accomplish by simply converting the output with a few replacements (<B> to [B], <a href= to [url=, etc...)

I'll post an update as we examine the feasibilty of this. I especially like that they've developed a version compatible with mozilla on all platforms (not just windows).

[Erwin]

There is a hack out that does this already without needing to enable HTML. Search for it.

[Paul]

Hi Erwin,

Thanks for the tip. We've been aware of eiSecure's hack for quite some time, however did not like it's heavy reliance on javascript, which it uses to convert the html to bbcode.

Thanks,
Paul

[Boofo]

I have this installed according to the instructions here and I can't seem to get it to show up. The example file works great, just not in the message areas. Any ideas what I might have missed?

[Paul]

04-10-03 at 05:40 AM Boofo said this in Post #18
I have this installed according to the instructions here and I can't seem to get it to show up. The example file works great, just not in the message areas. Any ideas what I might have missed?

Make sure you put the javascript that calls the editor BELOW the textarea code. That one got me for a while.

I'm still working on this and have gotten basic functionality to work. Right now I'm trying to figure out the best way to get the info into the database. I was leaning towards a solution that didn't modify the php files themselves, since this hack will automatically turn itself off if the browser is incapable of displaying the wysiwyg editor.

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).

[Boofo]

I did have it below the textarea code. I had the javascript right after </textarea> but could still not get it to show. I'm sure I missed something somewhere.