How do I create a JavaScript/DHTML rich text editor? — OZONE Asylum, home of the Mad Scientists

FAQ

How do I create a JavaScript/DHTML rich text editor?

This page's ID: 5281

You are editing "How do I create a JavaScript/DHTML rich text editor?"

Who can edit an FAQ?	Anyone registered may edit an FAQ.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Giving the user the ability to add information via a textarea and actual format that text as they go along is a popular and powerful tool. Read the resources below for more information: ------------------------------ Relevant threads: [url=http://www.ozoneasylum.com/Archives/Archive-000003/HTML/20020912-2-001693.html]Html and textarea[/url] [url=http://www.ozoneasylum.com/Forum2/HTML/001759.html]I need help with textarea[/url] ------------------------------ Just a thought, if it can be IE only, have a look at the MS dhtml control. It's a very powerful scriptable html design engine (ie. you mark a text, click 'add link' (for example), then the script does a showModal() (IE only again), which displays a windowsy looking input window, and adds the link to the html control, where it is actually displayed as a link. I've even seen a table editor done with this. --[internallink=4643]Tyberius Prime[/internallink] Code example for the ms dhtml control: [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <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.<br></div> <a href="javascript:b();">bold</a> <a href="javascript:r();">red</a> <a href="javascript:i();">italic</a> <br> <br> </body> </html> [/code] More info on commands can be found here:[url=http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp]http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp[/url] One way to do it is to make one page editable and show that in an iframe, you control the editing functions by buttons/images/links whatever, then on submit you grab the html from the page, strip out the head/body tags, place it in a hidden field that you submit, like this document.forms["your_submit_form_name"].your_hidden_field_name_here.value = window.frames['name_of_your_editor'].document.getElementById("name_of_the_editable_element").documentHTML Takes some fiddling, but you can make it just about how advanced or simple you like. //DmS ------------------------------ Relevant links: [url=http://richtext.cs.ramesys.com]Richtext editor[/url] [url=http://webfx.eae.net/dhtml/richedit/richedit.html]Rich Edit Component[/url] [url=http://www.dmsproject.com/test/wysiwygger/DmSWysiwyg.html]Wysiwygger[/url] - an example produced by our own DmS. [url=http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp]Command Identifiers[/url] - useful information from the MSDN library. ---------------------------- Relevant note: As of writing this FAQ is number [b]1[/b] at Google in the search for the terms [url=http://www.google.com/search?q=javascript+rich+text+editor]javascript, rich, text, editor[/url] and 6 for the terms [url=http://www.google.com/search?q=rich+text+editor]rich, text, editor[/url]. _______________________ [internallink=4626]Emperor[/internallink] [small][i](Added by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Sun 08-Sep-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Tyberius+Prime]Tyberius Prime [/url] on Wed 11-Sep-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Thu 12-Dec-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=rey]rey [/url] on Fri 20-Dec-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=DmS]DmS [/url] on Tue 14-Jan-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=deepak]deepak [/url] on Mon 28-Apr-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Yvonne]Yvonne [/url] on Mon 28-Apr-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=simonmaz]simonmaz [/url] on Thu 12-Feb-2004)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=lancefinal]lancefinal [/url] on Mon 15-Mar-2004)[/i][/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu