By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,084 Members | 1,956 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,084 IT Pros & Developers. It's quick & easy.

Rich Text Form in JavaScript gives error: Object required

P: n/a
Hello,

I found this script to create a simple rich text form
(http://programmabilities.com/xml/index.php?id=17):

<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<script language= "JavaScript" type= "text/javascript" src=
"editor.js" >
//First lets initiate some variables

var isEditable= false;
var isIE;
var isGecko;
var isSafari;
var isKonqueror;

function initiateEditor() {
//check what browser is in use
var browser = navigator.userAgent.toLowerCase();
isIE = ((browser .indexOf("msie") != -1) && (browser
..indexOf("opera") == -1) && (browser .indexOf("webtv") == -1));
isGecko = (browser .indexOf("gecko") != -1);
isSafari = (browser .indexOf("safari") != -1);
isKonqueror = (browser.indexOf("konqueror") != -1);

//enable designMode if the browser is not safari or konqueror.
if (document.getElementById && document.designMode && !isSafari &&
!isKonqueror) {
isEditable= true;
}
}
//Javascript function dislpayEditor will create the textarea.

function displayEditor(editor, html, width, height) {
if(isEditable){
document.writeln('<iframe id="' + editor + '" name="' + editor
+ '" width="' + width + 'px" height="' + height + 'px"></iframe>');
//create a hidden field that will hold everything that is typed in the
textarea
document.writeln('<input type="hidden" id="hidden' + editor +
'" name="hidden' + editor + '" value="">');
//assign html (textarea value) to hiddeneditor
document.getElementById('hidden' + editor).value = html;
//call function designer
designer(editor, html);
}else{
document.writeln('<textarea name="' + editor + '" id="' + editor
+ '" cols="39" rows="10">' + html + '</textarea>');
}
}

//this is designer function that enables designMode and writes defalut
text to the text area
function designer(editor, html) {
var mainContent= "<html id=" + editor + "><head></head><body>" +
html + "</body></html>" ;
//assign the frame(textarea) to the edit variable using that frames id
var edit= document.getElementById(editor).contentWindow.docu ment;
//write the content to the textarea
edit.write(mainContent);
//enable the designMode
edit.designMode = "On" ;
document.getElementById(content).contentDocument.d esignMode = "on";
}

//To execute command we will use javascript function editorCommand.
function editorCommand(editor, command, option) {
// first we assign the content of the textarea to the variable
mainField
var mainField;
mainField = document.getElementById(editor).contentWindow;
// then we will use execCommand to execute the option on the textarea
making sure the textarea stays in focus
try {
mainField.focus();
mainField.document.execCommand(command, false, option);
mainField.focus();
} catch (e) { }
}

function updateEditor(editor) {
if (!isEditable) return;
//assign the value of the textarea to the hidden field.
var hiddenField = document.getElementById('hidden' + editor);
if (hiddenField.value == null) hiddenField.value = "";
hiddenField.value =
document.getElementById(editor).contentWindow.docu ment.body.innerHTML;
}
</script>
<table width="750">
<form action="form.asp" name="edit" method="POST" id="edit"
onsubmit="return submitForm();">
<tr>
<td> <a href= "javascript:editorCommand('content', 'bold', '')" ><img
src="bold.gif" width="25" height="24" alt="Bold" title="Bold"
border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'underline', '')"
<img src="underline.gif" width="25" height="24" alt="Underline" title="Underline" border="0"></a> </td>
<td> <a href= "javascript:editorCommand('content', 'italic', '')"<img src="italic.gif" width="25" height="24" alt="Italic" title="Italic" border="0"></a> </td>
<td> <a href= "javascript:editorCommand('content', 'justifyleft', '')"<img src="j_left.gif" width="25" height="24" alt="Align Left" title="Align Left" border="0"></a> </td>
<td> <a href= "javascript:editorCommand('content', 'justifycenter',
'')" ><img src="j_center.gif" width="25" height="24" alt="Align Center"
title="Align Center" border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'justifyright',
'')" ><img src="j_right.gif" width="25" height="24" alt="Align Right"
title="Align Right" border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'indent', '')"<img src="indent.gif" width="25" height="24" alt="Indent" title="Indent" border="0"></a> </td>
<td> <a href= "javascript:editorCommand('content', 'outdent', '')"<img src="outdent.gif" width="25" height="24" alt="Outdent" title="Outdent" border="0"></a> </td>


<td> <a href= "javascript:editorCommand('content', 'undo', '')" ><img
src="undo.gif" width="25" height="24" alt="Undo" title="Undo"
border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'redo', '')" ><img
src="redo.gif" width="25" height="24" alt="Redo" title="Redo"
border="0"></a> </td>

<td width="100%" align="levt">Shift+Enter for single line spacing</td>
</tr>
<tr>
<td colspan="12">
<script language="JavaScript" type="text/javascript">
<!--
function submitForm() {
updateEditor('content');
//alert("content = " + document.edit.hiddencontent.value);
return true;
}

initiateEditor();
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
displayEditor('content', '', 600, 300);
//-->
</script>
</td>
</tr>
<tr><td colspan="12"> <input type="submit" name="Submit"
value="Submit"> </td></tr>
</form>
</table>

</body>
</html>
But it is giving me this error in the status bar of my IE:
Line: 48
Char: 4
Error: Object required
Code: 0
URL: http://bewebmaster.com/editorjs/

Can somebody please help me out on this?

Thanks

Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Hello,

What is actually the use of this line:
document.getElementById(content).contentDocument.d esignMode = 'On';

Because when I mark it out it is still working!

Sorry but I am new in JavaScript.

Thanks

IkBenHet schreef:
Hello,

I found this script to create a simple rich text form
(http://programmabilities.com/xml/index.php?id=17):

<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<script language= "JavaScript" type= "text/javascript" src=
"editor.js" >
//First lets initiate some variables

var isEditable= false;
var isIE;
var isGecko;
var isSafari;
var isKonqueror;

function initiateEditor() {
//check what browser is in use
var browser = navigator.userAgent.toLowerCase();
isIE = ((browser .indexOf("msie") != -1) && (browser
.indexOf("opera") == -1) && (browser .indexOf("webtv") == -1));
isGecko = (browser .indexOf("gecko") != -1);
isSafari = (browser .indexOf("safari") != -1);
isKonqueror = (browser.indexOf("konqueror") != -1);

//enable designMode if the browser is not safari or konqueror.
if (document.getElementById && document.designMode && !isSafari &&
!isKonqueror) {
isEditable= true;
}
}
//Javascript function dislpayEditor will create the textarea.

function displayEditor(editor, html, width, height) {
if(isEditable){
document.writeln('<iframe id="' + editor + '" name="' + editor
+ '" width="' + width + 'px" height="' + height + 'px"></iframe>');
//create a hidden field that will hold everything that is typed in the
textarea
document.writeln('<input type="hidden" id="hidden' + editor +
'" name="hidden' + editor + '" value="">');
//assign html (textarea value) to hiddeneditor
document.getElementById('hidden' + editor).value = html;
//call function designer
designer(editor, html);
}else{
document.writeln('<textarea name="' + editor + '" id="' + editor
+ '" cols="39" rows="10">' + html + '</textarea>');
}
}

//this is designer function that enables designMode and writes defalut
text to the text area
function designer(editor, html) {
var mainContent= "<html id=" + editor + "><head></head><body>" +
html + "</body></html>" ;
//assign the frame(textarea) to the edit variable using that frames id
var edit= document.getElementById(editor).contentWindow.docu ment;
//write the content to the textarea
edit.write(mainContent);
//enable the designMode
edit.designMode = "On" ;
document.getElementById(content).contentDocument.d esignMode = "on";
}

//To execute command we will use javascript function editorCommand.
function editorCommand(editor, command, option) {
// first we assign the content of the textarea to the variable
mainField
var mainField;
mainField = document.getElementById(editor).contentWindow;
// then we will use execCommand to execute the option on the textarea
making sure the textarea stays in focus
try {
mainField.focus();
mainField.document.execCommand(command, false, option);
mainField.focus();
} catch (e) { }
}

function updateEditor(editor) {
if (!isEditable) return;
//assign the value of the textarea to the hidden field.
var hiddenField = document.getElementById('hidden' + editor);
if (hiddenField.value == null) hiddenField.value = "";
hiddenField.value =
document.getElementById(editor).contentWindow.docu ment.body.innerHTML;
}
</script>
<table width="750">
<form action="form.asp" name="edit" method="POST" id="edit"
onsubmit="return submitForm();">
<tr>
<td> <a href= "javascript:editorCommand('content', 'bold', '')" ><img
src="bold.gif" width="25" height="24" alt="Bold" title="Bold"
border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'underline', '')"
<img src="underline.gif" width="25" height="24" alt="Underline" title="Underline" border="0"></a> </td>


<td> <a href= "javascript:editorCommand('content', 'italic', '')"
<img src="italic.gif" width="25" height="24" alt="Italic" title="Italic" border="0"></a> </td>


<td> <a href= "javascript:editorCommand('content', 'justifyleft', '')"
<img src="j_left.gif" width="25" height="24" alt="Align Left" title="Align Left" border="0"></a> </td>


<td> <a href= "javascript:editorCommand('content', 'justifycenter',
'')" ><img src="j_center.gif" width="25" height="24" alt="Align Center"
title="Align Center" border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'justifyright',
'')" ><img src="j_right.gif" width="25" height="24" alt="Align Right"
title="Align Right" border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'indent', '')"
<img src="indent.gif" width="25" height="24" alt="Indent" title="Indent" border="0"></a> </td>


<td> <a href= "javascript:editorCommand('content', 'outdent', '')"
<img src="outdent.gif" width="25" height="24" alt="Outdent" title="Outdent" border="0"></a> </td>


<td> <a href= "javascript:editorCommand('content', 'undo', '')" ><img
src="undo.gif" width="25" height="24" alt="Undo" title="Undo"
border="0"></a> </td>

<td> <a href= "javascript:editorCommand('content', 'redo', '')" ><img
src="redo.gif" width="25" height="24" alt="Redo" title="Redo"
border="0"></a> </td>

<td width="100%" align="levt">Shift+Enter for single line spacing</td>
</tr>
<tr>
<td colspan="12">
<script language="JavaScript" type="text/javascript">
<!--
function submitForm() {
updateEditor('content');
//alert("content = " + document.edit.hiddencontent.value);
return true;
}

initiateEditor();
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
displayEditor('content', '', 600, 300);
//-->
</script>
</td>
</tr>
<tr><td colspan="12"> <input type="submit" name="Submit"
value="Submit"> </td></tr>
</form>
</table>

</body>
</html>
But it is giving me this error in the status bar of my IE:
Line: 48
Char: 4
Error: Object required
Code: 0
URL: http://bewebmaster.com/editorjs/

Can somebody please help me out on this?

Thanks


Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.