Forum users add code to text area field

[Krishan]

Hi everyone!

I have a message board but I want the users to be able to add html links, bold their text etc, just like how FM Forums allows us to insert Instant UBB Code by pressing the buttons.

Does anyone know the javascript for creating these buttons which will write the HTML code into the text area field?

Thanks!

Krishan.

: : :grin:

[scratchmalogicalwax]

Formatting Code in text area:

you will notice that on this forum the formatted response is not in a text area but text in the body of the page.

To get HTML entered into a text area to display correctly from a Field replacement tag in the body of your HTML document look into encoding output. [FMP-Field: FieldName,Break] would probably be your best bet as this will replace returns with <br> aswell.

Sadly the ability to control the format of text in a form object is very limited (IE) or practically non existent (NS).

adding bbcode buttons

as you said this is done with javaScript. you can get good free scripts from all over the web and adapt them to suit your needs, poaching script is also an option - but not from here of course ..... after all "research" is good for the soul

[Krishan]

Thanks scratchmalogicalwax!

I hope you're keeping well.

With regard to encoding output, I'm using Lasso so I use the following code:

[string_Replace: (field:'Message',EncodeNone), Find='r', Replace='<BR>',EncodeNone]

---

This allows me to write html into my message form's textarea field which work when reading the message on the forum.

I just need to find a javascript that allows me to create a short cut button for writing basic html into the message form's textarea. This would allow people who don't know how to write html, to create links in their messages.

Anybody got a clue about the javascript required?

Thanks!

Krishan.

[Keith M. Davie]

Right you are scratch..., research is good for the soul.

I was once provided with this resource: The JavaScript Source!! http://javascript.internet.com

[Krishan]

Thanks Keith.

I do go to http://www.javascriptsource.com and http://www.javascriptcity.com a lot.

I was just wondering if anyone else has already done the hard work! haha!

Krishan.

[Garry Claridge]

A couple of Javascript editors are around the place. I have just finished building one, however we integrated it with Zope (Javascript/TAL/Python). We borrowed the core Javascript from somewhere (someone else found that!)

One problem to note, is that currently only IE on Win will be able to reference the location of your cursor, or selection, in a Textarea. Hence, with any other browser/OS combination any format insertions would only be appended to the end of the text.

I have been looking at a Java solution for this. (Another one of those 'get-around-to-it-one-day' projects!)

All the best.

Garry

[Krishan]

I found a site that does just what I want! (well, erm... it only works with Windows Internet Explorer and not my favourite Mac IE)

http://www.oreillynet.com/lpt/a/javascript/2001/12/21/js_toolbar.html

It tells you how to create a toolbar for your form's textarea field so that your text can be bold, italic or a link. Pretty cool if your users don't know how to write in html or are lazy programmers.

Krishan.

p.s. Can anyone find the same sort of toolbar javascript that works on a Mac IE browser?

[Krishan]

Thanks for your thoughts Garry !

[Garry Claridge]

I know some Java code exists around the place. I will keep my eye out.

All the best.

Garry

[Krishan]

Thanks!! I would be really grateful!!

Krishan.

[kenneth2k1]

There is something fishy about how IE:Mac handles Java (or, how web developers use Java)

However, most of these problems seem to appear in System 9.2 and below. I don't see this problem on >OS 10.

Ken

[Anatoli]

Please distinguish two very different animals in HTML:

1. JavaScript

2. Java

JavaScript is closely related to browser version -- in fact you cannot run JS without (outside) browser.

Java is usually provided as OS extension or in browser. It can run outside of browser or within one.

[abkaplan]

The code belove, taken from the page you gave the address, works well but the problem is that, it shows HTML codes in my text area instead of showing its result. Do you know how I can get the result instead of the code shown in my text area as Hotmail does in its message send page?

<BODY>

<P>

<style>

#toolbar {

margin: 0;

padding: 0;

width: 262px;

background: buttonface;

border-top: 1px solid buttonhighlight;

border-left: 1px solid buttonhighlight;

border-bottom: 1px solid buttonshadow;

border-right: 1px solid buttonshadow;

text-align:right;

}

.button {

background: buttonface;

border: 1px solid buttonface;

margin: 1;

}

.raised {

border-top: 1px solid buttonhighlight;

border-left: 1px solid buttonhighlight;

border-bottom: 1px solid buttonshadow;

border-right: 1px solid buttonshadow;

background: buttonface;

margin: 1;

}

.pressed {

border-top: 1px solid buttonshadow;

border-left: 1px solid buttonshadow;

border-bottom: 1px solid buttonhighlight;

border-right: 1px solid buttonhighlight;

background: buttonface;

margin: 1;

}</style>

<SCRIPT LANGUAGE="JavaScript">

function mouseover(el) {

el.className = "raised";

}

function mouseout(el) {

el.className = "button";

}

function mousedown(el) {

el.className = "pressed";

}

function mouseup(el) {

el.className = "raised";

}

</script>

<SCRIPT LANGUAGE="JavaScript">

function format_sel(v) {

var str = document.selection.createRange().text;

document.my_form.my_textarea.focus();

var sel = document.selection.createRange();

sel.text = "<" + v + ">" + str + "</" + v + ">";

return;

}

</script>

<SCRIPT LANGUAGE="JavaScript">

function format_sel('b') {

var str = document.selection.createRange().text;

document.my_form.my_textarea.focus();

var sel = document.selection.createRange();

sel.text = "<" + b + ">" + str + "</" + b + ">";

return;

}

</script>

<SCRIPT LANGUAGE="JavaScript">

function format_sel('i') {

var str = document.selection.createRange().text;

document.my_form.my_textarea.focus();

var sel = document.selection.createRange();

sel.text = "<" + i + ">" + str + "</" + i + ">";

return;

}

</script>

<SCRIPT LANGUAGE="JavaScript">

function insert_link() {

var str = document.selection.createRange().text;

document.my_form.my_textarea.focus();

var my_link = prompt("Enter URL:","http://");

if (my_link != null) {

var sel = document.selection.createRange();

sel.text = "<a href="" + my_link + "">" + str + "</a>";

}

return;

} </script>

<form name="my_form">

<div id="toolbar">

<img class="button"

onmouseover="mouseover(this);"

onmouseout="mouseout(this);"

onmousedown="mousedown(this);"

onmouseup="mouseup(this);"

onclick="format_sel('b');"

src="../forum/images/bold.gif"

width="16" height="16"

align="middle"

alt="click to make your selection bold">

<img class="button"

onmouseover="mouseover(this);"

onmouseout="mouseout(this);"

onmousedown="mousedown(this);"

onmouseup="mouseup(this);"

onclick="format_sel('i');"

src="../forum/images/italic.gif"

width="16" height="16"

align="middle"

alt="click to make your selection italic">

<img class="button"

onmouseover="mouseover(this);"

onmouseout="mouseout(this);"

onmousedown="mousedown(this);"

onmouseup="mouseup(this);"

onclick="insert_link();"

src="../forum/images/link.gif"

align="middle"

alt="click to add a link" WIDTH="32" HEIGHT="16"></div>

<P STYLE="margin-top: 0; margin-bottom: 0">

<TEXTAREA ROWS="19" NAME="my_textarea" COLS="78"></TEXTAREA></P>

</form>

</BODY>

[Garry Claridge]

Look at using the "document.element.innerHTML" method.

Garry