WYSIWYG Editor (htmlArea)

[MalaK_3araby]

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 (http://www.interactivetools.com/products/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.

[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 (https://vborg.vbsupport.ru/showthread.php?postid=380069#post380069)
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.

[Erwin]

Today at 02:46 AM LoveShack said this in Post #19 (https://vborg.vbsupport.ru/showthread.php?postid=381052#post381052)
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 (https://vborg.vbsupport.ru/showthread.php?postid=381298#post381298)
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 (https://vborg.vbsupport.ru/showthread.php?postid=381309#post381309)
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 (https://vborg.vbsupport.ru/showthread.php?postid=381304#post381304)
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!