GUI

Monie · #1 (**permalink**) Oct 13th, 2004, 12:10

I am wondering how to do the BOLD, ITALIC, UNDERLINE function that webforums have?
Let say I have a form which the user able to fill in their comment about anything...

I want to provide them the basic function (at the top of the <textarea>) such as to make a text BOLD, ITALIC, UNDERLINE etc,
with each function have their own GUI.

How to achieve this?
At the current time, I just provide the user with text explaination like this:

PLEASE PUT ""YOUR TEXT"" TO MAKE YOUR TEXT BOLD.
PLEASE PUT "<U>"YOIUR TEXT"</U>" TO MAKE YOUR TEXT UNDERLINE....etc.

This is very difficult for the user to follow

I have been searching to find how to apply this method to my page but I ended up with nothing

Any idea

What is the javascript name for that?
(If I want to search in the internet for the coding)

Smokie · #2 (**permalink**) Oct 13th, 2004, 12:26

its a web based rich text editor, check it out: http://www.google.co.uk/search?q=ric...or&hl=en&meta=

Monie · #3 (**permalink**) Oct 14th, 2004, 02:27

Hey.. I found this simple javascript code for RTE.
It uses the text as the control. What the code does is it changes the text attributes in the <div>. How about if i want to change the <div> to a <textarea>?

I tried to change it like this but it didn't work!
<textarea CONTENTEDITABLE="true">The text in this page is editable.</textarea>

Code: Select all

<html>
<head>
<title>editablepageexample</title>    

<script>    
function b(){
    document.execCommand("Bold", false, null);
    }    
function i(){
    document.execCommand("Italic", false, null);
    }
function r(){
    document.execCommand("ForeColor", false, "red");
    }    
</script>
</head>

<body>

<div CONTENTEDITABLE="true">The text in this page is editable.
</div>

bold
red
italic




</body>
</html>

Rob · #4 (**permalink**) Oct 14th, 2004, 08:37

LOL!!!

monie..... you can only do it via a DIV... and only in Internet Explorer (At least, the way you are trying)

Have a look at the source code and javascripts of this forum... it should be simple enough to edit so it produces HTML instead of Forum code.

Monie · #5 (**permalink**) Oct 15th, 2004, 02:01

LOL...
Ok...I have found a nice code here...

Currently I am using this code to make the selected text to be a hyperlink

'+AnyWebAddress+'

This works well if the user enter any address without the http:// header!
If the user enter the web address including the "http://" header,
the link will not be working since there will be two "http://" header inside the link!

I have tried to use the <url> method but it is not working..
<url=\""+txt+"\">"+txt2+"</url> --> code from webforumz

When I type [url] followed by the web address, the output will show the "[]" in my display page.
and I tried to type <url> instead but the link is not active in my display page..

I wonder how webforumz uses the [url] method?
we can just type any web address enclosed with the [url], and then if works! But when I tried inside my textarea, it didn't work:mad:

Can anybody tell me whats wrong with my code?
I dont understand how the <url> method works...???

This is the code that I am using now...

Code: Select all

function hiliteToExternLink(txtArea){
	txtAreaName   = txtArea.name;
	txtRange      = document.all[txtArea].createTextRange();
	txtContainer  = txtRange.parentElement().name;
	
	objRange      = document.selection.createRange();
	hiliteTxt     = objRange.text;

	toExternLink   = '' + hiliteTxt + '';
	
	if(hiliteTxt != ""){
		objRange.text = toExternLink;
	}
}

Rob · #6 (**permalink**) Oct 15th, 2004, 09:46

Are you trying to do this with client side, or server side Jscript?

Monie · #7 (**permalink**) Oct 16th, 2004, 02:35

All the javascript i put inside the <head> tag...
Does that refer to client side programming?

Rob · #8 (**permalink**) Oct 17th, 2004, 15:08

Hi monie...

Client side programming EXECUTES on the client. Server side programming (eg, ASP, PHP, CGI.. etc) EXECUTES on the server.

Monie · #9 (**permalink**) Oct 18th, 2004, 03:29

Ok then...
My programming is in ASP format (intranet)

<blockquote id="quote" class="ffs">quote:<hr height="1" noshade="noshade" id="quote" />'+AnyWebAddress+'<hr height="1" noshade="noshade" id="quote" /></blockquote id="quote">

		Webforumz.com > Main Forums > Program Your Website > Classic ASP
GUI