Hellos, i need help on how i can implement a rich text box in javascript for my forms on my web pages, just like the one we use on this site when posting.
thanks in advance
javascript Rich text box
Page 1 of 11 Replies - 10644 Views - Last Post: 25 June 2007 - 10:36 PM
Replies To: javascript Rich text box
#2
Re: javascript Rich text box
Posted 25 June 2007 - 10:36 PM
When you post something here actually you don’t use a rich text box.
It is a normal text box with predefined tags to locate where the text should looks in bold or in red color or…. etc
The rich text box allows you to immediately see what the text should looks like when you post it and that’s what we call (WYSIWYG) which standards for What You See Is What You Get.
To do that you have to know about javascript and little about DOM then you can write your won script for rich text box like I do
Now the key to start is to:
1- put an inline frame in your html page and specify all visual properties you want to it and assign a unique id. Let us say “richbox”
2- when you want to use just do this from javascipt
The above code will set the inline frame in design mod and let you to edit any thing you want
You try ctrl+b – ctrl+c – ctrl+I and more, try to drag an image in your site to it.
3- you should know how to use execCommand in javascrip and here is the most useful :
execCommand(“Bold”,"","")
execCommand(“Italic”,"","")
execCommand(“Underline”,"","")
execCommand(“ForeColor”,"",#ffee111)
execCommand(“Backcolor”,"",#551122)
Etc…
Note :
The execCommand will applied to the selected text
I will post a snippet for rich text editor as soon as possible
For any question please don’t hesitate
Best regards
For all interested guys,you can download the attached file which contain a list of execCommand Identifiers
It is a normal text box with predefined tags to locate where the text should looks in bold or in red color or…. etc
The rich text box allows you to immediately see what the text should looks like when you post it and that’s what we call (WYSIWYG) which standards for What You See Is What You Get.
To do that you have to know about javascript and little about DOM then you can write your won script for rich text box like I do
Now the key to start is to:
1- put an inline frame in your html page and specify all visual properties you want to it and assign a unique id. Let us say “richbox”
2- when you want to use just do this from javascipt
richbox.document.designMode='On'
The above code will set the inline frame in design mod and let you to edit any thing you want
You try ctrl+b – ctrl+c – ctrl+I and more, try to drag an image in your site to it.
3- you should know how to use execCommand in javascrip and here is the most useful :
execCommand(“Bold”,"","")
execCommand(“Italic”,"","")
execCommand(“Underline”,"","")
execCommand(“ForeColor”,"",#ffee111)
execCommand(“Backcolor”,"",#551122)
Etc…
Note :
The execCommand will applied to the selected text
I will post a snippet for rich text editor as soon as possible
For any question please don’t hesitate
Best regards
For all interested guys,you can download the attached file which contain a list of execCommand Identifiers
Attached File(s)
-
Command_Identifiers.zip (3.39K)
Number of downloads: 517
This post has been edited by ahmad_511: 25 June 2007 - 10:37 PM
Page 1 of 1

New Topic/Question
Reply



MultiQuote



|