Insert / Update with the RTE editor

This tutorial will desribe how to build an Insert / Update page using the RTE editor

	Contents
Prev	Adding Extra Fields into the editor	Next

This part involves some hand coding.

The editor also allows you to add more fields to it than just the wysiwyg text area, say I wanted to add two fields called "Forename" & "Surname", first I add the fields into the "FORM" area:

</form>

I insert two and I name one "forename" and the other "surname", now I need to make these textfields part of the editor itself, this is easy, I insert a couple of lines of code.(this might look scary but just take a deep breath).

<form id="theForm" name="theForm">
<textarea name="text" style="display:none" rows="1" cols="20"></textarea>
<input name="forename" type="text" id="forename" />
<input name="surname" type="text" id="Surname" />
</form>
<script language="JavaScript" type="text/JavaScript" event="onload" for="window">
richedit.options="font=no;source=no";

richedit.addField("myforenamefield", "Forename", 5, theForm.forename.value);
richedit.addField("mysurnamefield", "Surname", 128, theForm.surname.value);

richedit.docHtml = theForm.text.innerText;
</script>
<script language="JavaScript" type="text/JavaScript" event="onscriptletevent(name, eventData)" for="richedit">
if (name == "post") {
if(confirm("This Document is about to be submitted Are you sure you have finished editing?")){

theForm.forename.value = richedit.getValue("myforenamefield");
theForm.surname.value = richedit.getValue("mysurnamefield");

theForm.text.value = eventData;
theForm.submit();
}
}
</script>

Lets break the first part down:

richedit.addField	This bit tells the richedit editor to add a field
"myforenamefield"	Whatever name you want (important in second part of code)
"Forename"	Text label that will be displayed in the editor window
128	Length of characters allowed to be entered
theForm.forename.value	Javascript bit: NameOfForm.NameOfTextfield.value

The thing to remember here is that javascript is CASE-SENSITIVE,

If I had called my textfield "Surname" and put "theForm.surname.value" into the code, this would have thrown an error,

one surname has a capital S other doesn't, they have to be the same!.

Ok, now onto the next bit:

theForm.forename.value = richedit.getValue("myforenamefield")

Again this is CASE-SENSITIVE, the first part is the same as the last part of the previous line of code and the richedit.getValue part is the name we gave the field in the first line of the code.

The long and short it is making sure the (theForm.fieldname.value) are the same in both lines and making sure the fieldname you assigned is the same in both parts.

When I preview the editor with my new text fields inserted, it looks like this:

Pretty cool huh?, lets move on to do an insert.

	Contents
Prev	Adding Extra Fields into the editor	Next

Bill Chalmers

Bill Chalmers Started doing sites in Frontpage about 3 years ago, progressed to ASP, Linux/Mysql, and PHP/MYSQL, currently learning LDAP, XML, XHTML, ASP.net, learning more about css, worked in Hammersmith Hospital for 8 years, Developed

www.hammersmithresearch.com
www.cafenetix.com
www.hammersmithcafe.org

Also developed the Trusts Intranet site with lots of php/asp applications built in, content management, enjoy getting paid for mucking about with stuff I do as a hobby.

See All Postings From Bill Chalmers >>

Comments

Thank You !

July 19, 2002 by Doug R

Nice job Bill, thank you! How about another one? Mybe in combination with file upload.

Dot

RE: Thank You !

July 19, 2002 by Bill Chalmers

Thanks for the compliment, at present I am trying to find a good, free, asp only upload script, php is easily doable, but I want to integrate both asp and php upload into the editor, currently I am having no luck finding an asp script to do the upload.

Question about other fields

July 30, 2002 by Tolu Ayoola

I was just wondering if it is possible to use other form fields such as radio buttons, check boxes, and file fields in the RTE editor. By the way, this extension is awesome. thanks

RE: Question about other fields

July 30, 2002 by Bill Chalmers

That is what I am working on currently, adding different types of fields to the editor, I will update the extension when I have developed this, you can of course use different types outside of the editor, just not embedded currently.

See all 17 Comments

You must me logged in to write a comment.