|
I have an iframe (name=framething) in a file called home. In the home file there is a java script routine called SignUp();
How do I call SignUp()from FrameThing??
I assume is is something like:
onclick=document.home.SignUp()
but that doesn't work
any help would be appreciated
thanks
mb
|
|
|
|
|
U use window.parent..SignUp()
|
|
|
|
|
I'm trying to pull text back into the iFrame. This works fine when the text doesn't contain quotes (" "), but crashes when it does.
Has anyone found out how to read text back into the iframe when the text contains quotes.
Paul Creedy
|
|
|
|
|
Paul Creedy wrote:
Has anyone found out how to read text back into the iframe when the text contains quotes.
Can't you just escape out the quotes with the backslash character? "\"
ex.: \"This is quoted\".
I'm not totally sure, but it seems like it should help...
Regards,
MarkC#
---------
.Net Head
|
|
|
|
|
|
Hi!
This editor is great but I wan't to enable right click menu. How can I enabled it?
|
|
|
|
|
just click three times in a rows your text will be highlighted
|
|
|
|
|
Hi,please someone tell me how I can with help of some JavaScript code save the content of an IFrame which is loaded from a HTML page from Internet. Here is the code I try, but it dose not save the content of the Iframe...
function Open_Page (id){
document.getElementById(id).src="http://www.msdn.com";
}
function Save_File (id){
document.getElementById(id).focus();
document.getElementById(id).document.execCommand('SaveAs');
}
Load
Save
|
|
|
|
|
document.getElementById("frame1").document.execCommand('SaveAs');
|
|
|
|
|
Can you think of a way to apply styles to the text. Instead of using execCommand("FormatText", false, "") be able to specifiy a preset style that you have defined in the style sheet. That way you could have a list of styles on the site that the user could select from. Ive tried passing various commands to execCommand but documentation on the web seems very limited.
|
|
|
|
|
When I add a link using the editor, the link that is generated is not the same. It comes out as the current working directory of the server followed by the link for example:
http://www.testserver.co.uk/"http://www.test.co.uk"
Where http://www.test.co.uk is the link I entered in the editor and http://www.testserver.co.uk/ is the domain the page is running on.
Any ideas how I can solve this?
David Hughes
Web Manager
CSP
|
|
|
|
|
I solve this problem modifying the setMode function like this :
function setMode(newMode) {
bTextMode = newMode;
var cont, re; //declaration of re
if (bTextMode) {
cleanHtml();
cleanHtml();
cont=mytext.document.body.innerHTML;
re = new RegExp (document.location.href, 'gi') ; //replace document.location.href
cont = cont.replace(re, '') ; //nothing
mytext.document.body.innerText=cont;
} else {
cont=mytext.document.body.innerText;
mytext.document.body.innerHTML=cont;
}
mytext.focus();
}
Juan VICO
Project Engineer
|
|
|
|
|
You only need 3 files: testeditor2.htm, htmleditor.js
and borrow colorselect.htm from my previous response,
Re: HowTo Really Set and Submit the HTML,
http://www.codeproject.com/jscript/w3richtechedit.asp?df=100&forumid=1933&select=422874#xx422874xx
Do you still want to use a scriptlet?
At end, I included a scriptlet file, htmleditor.htm,
that would work as a scriptlet (not necessary for testeditor2.htm to work)
If you have SSI you may be able to speed up page loading by replacing
<script SRC="htmleditor.js" LANGUAGE="javascript"></script>
with
<script><!-- #include file="htmleditor.js" --></script>
Note: Don't bother trying to convert this to netscape (netscape doesn't support designMode). Fixed Styles and toolbars from previous post, and made toolbars automatically combine if width is long enough.
FILE: testeditor2.htm :
<html>
<head>
<title>Test Html Editor2</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<H1>Testing an HTML Editor2</H1>
<script SRC="htmleditor.js" LANGUAGE="javascript"></script>
<script>
<!--
var editor = new Editor(300); // height, width
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
editor.SetHTML('<P><STRONG>Sample Default Text</STRONG></P>');
editor.Focus();
}
}
function SubmitEditor() {
alert(editor.GetHTML());
}
// -->
</script>
<p><script>editor.Instantiate();</script></p>
<p><button type=button onclick="SubmitEditor()">Submit HTML</button></p>
</center>
</body>
</html>
FILE: htmleditor.js :
<!--
document.write(
'<style type="text/css">',
'<!--',
'.HtmlEditorBodyStyle { BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 5px }',
'.HtmlEditorFrameStyle { BACKGROUND-COLOR: #ffffff; POSITION: relative }',
'.HtmlEditorHeadingStyle { BACKGROUND: lightgrey; COLOR: navy }',
'.HtmlEditorToolbarStyle { BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; HEIGHT: 28px; LEFT: 0px; POSITION: relative; TOP: 0px }',
'.HtmlEditorButtonNormalStyle { BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; position: relative; top: 1px; left: 1px }',
'.HtmlEditorIconStyle { HEIGHT: 22px; WIDTH: 22px }',
'.HtmlEditorDividerStyle { BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; FONT-SIZE: 0px; POSITION:RELATIVE; TOP: 1px; LEFT: 1PX; HEIGHT: 22px; WIDTH: 1px; margin-left: 1px; margin-right:1px }',
'.HtmlEditorListStyle { BACKGROUND: White; FONT: 8pt verdana,arial,sans-serif; POSITION: relative; TOP: 2px; LEFT: 1px }',
'.HtmlEditorTextStyle { FONT: 8pt verdana,arial,sans-serif; POSITION: relative; TOP: -2px }',
'.HtmlEditorButtonMouseOverStyle { BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; position: relative; top: 1px; left: 1px }',
'.HtmlEditorButtonDisabledStyle { BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; BORDER-TOP: buttonshadow 1px solid; position: relative; top: 1px; left: 1px }',
'.HtmlEditorButtonPressedStyle { BACKGROUND-COLOR: gainsboro; BORDER-BOTTOM: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; BORDER-TOP: buttonshadow 1px solid; position: relative; top: 1px; left: 1px }',
'-->',
'</style>');
var MinHtmlEditorHeight = 70, MinHtmlEditorWidth = 411, DefHtmlEditorHeight = 200, DefHtmlEditorWidth = MinHtmlEditorWidth;
var HtmlEditorCombineWidth = (MinHtmlEditorWidth * 2) - 2; // change this if toolbars are different sizes
function UtilBeginScript()
{
return String.fromCharCode(60, 115, 99, 114, 105, 112, 116, 62);
}
function UtilEndScript()
{
return String.fromCharCode(60, 47, 115, 99, 114, 105, 112, 116, 62);
}
function IDGenerator(nextID)
{
this.nextID = nextID;
this.GenerateID = IDGeneratorGenerateID;
}
function IDGeneratorGenerateID()
{
return this.nextID++;
}
var BUTTON_IMAGE_PREFIX = "buttonImage";
var BUTTON_DIV_PREFIX = "buttonDiv";
var buttonMap = new Object();
function Button
(
idGenerator,
caption,
action,
image
)
{
this.idGenerator = idGenerator;
this.caption = caption;
this.action = action;
this.image = image;
this.enabled = true;
this.Instantiate = ButtonInstantiate;
this.Enable = ButtonEnable;
}
function ButtonInstantiate()
{
this.id = this.idGenerator.GenerateID();
buttonMap[this.id] = this;
var html = "";
html += '<div id="';
html += BUTTON_DIV_PREFIX;
html += this.id;
html += '" class="HtmlEditorButtonNormalStyle"';
html += ' onselectstart="ButtonOnSelectStart()"';
html += ' ondragstart="ButtonOnDragStart()"';
html += ' onmousedown="ButtonOnMouseDown(this)"';
html += ' onmouseup="ButtonOnMouseUp(this)"';
html += ' onmouseout="ButtonOnMouseOut(this)"';
html += ' onmouseover="ButtonOnMouseOver(this)"';
html += ' onclick="ButtonOnClick(this)"';
html += ' ondblclick="ButtonOnDblClick(this)"';
html += '>';
html += '<img id="';
html += BUTTON_IMAGE_PREFIX;
html += this.id;
html += '" src="';
html += this.image;
html += '" title="';
html += this.caption;
html += '" class="HtmlEditorIconStyle"';
html += '>';
html += '</div>';
document.write(html);
}
function ButtonEnable(enabled)
{
this.enabled = enabled;
if (this.enabled)
{
eval(BUTTON_DIV_PREFIX + this.id).className = "HtmlEditorButtonNormalStyle";
}
else
{
eval(BUTTON_DIV_PREFIX + this.id).className = "HtmlEditorButtonDisabledStyle";
}
}
function ButtonOnSelectStart()
{
window.event.returnValue = false;
}
function ButtonOnDragStart()
{
window.event.returnValue = false;
}
function ButtonOnMouseDown(element)
{
if (event.button == 1)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonPushButton(id);
}
}
}
function ButtonOnMouseUp(element)
{
if (event.button == 1)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonReleaseButton(id);
}
}
}
function ButtonOnMouseOut(element)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonReleaseButton(id);
}
}
function ButtonOnMouseOver(element)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonReleaseButton(id);
eval(BUTTON_DIV_PREFIX + id).className = "HtmlEditorButtonMouseOverStyle";
}
}
function ButtonOnClick(element)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
eval(button.action);
}
}
function ButtonOnDblClick(element)
{
ButtonOnClick(element);
}
function ButtonPushButton(id)
{
eval(BUTTON_DIV_PREFIX + id).className = "HtmlEditorButtonPressedStyle";
}
function ButtonReleaseButton(id)
{
eval(BUTTON_DIV_PREFIX + id).className = "HtmlEditorButtonNormalStyle";
}
var EDITOR_COMPOSITION_PREFIX = "editorComposition";
var EDITOR_PARAGRAPH_PREFIX = "editorParagraph";
var EDITOR_LIST_AND_INDENT_PREFIX = "editorListAndIndent";
var EDITOR_TOOLBAR_PREFIX = "editorToolbar";
var EDITOR_TOP_TOOLBAR_PREFIX = "editorTopToolbar";
var EDITOR_BOTTOM_TOOLBAR_PREFIX = "editorBottomToolbar";
var editorMap = new Object();
var editorIDGenerator = new IDGenerator(0);
function Editor(height, width)
{
this.GetText = EditorGetText;
this.SetText = EditorSetText;
this.GetHTML = EditorGetHTML;
this.SetHTML = EditorSetHTML;
this.GetBrief = EditorGetBrief;
this.SetBrief = EditorSetBrief;
this.Focus = EditorFocus;
this.SetDomain = SetDomain;
this.Instantiate = EditorInstantiate;
this.objectHeight = (height === (void 0)) ? DefHtmlEditorHeight : ((height < MinHtmlEditorHeight) ? MinHtmlEditorHeight : height);
this.objectWidth = (width === (void 0)) ? DefHtmlEditorWidth : ((width < MinHtmlEditorWidth) ? MinHtmlEditorWidth : width);
this.textMode = false;
this.brief = false;
this.instantiated = false;
this.id = editorIDGenerator.GenerateID();
}
function EditorInstantiate()
{
if (this.instantiated) {
return;
}
editorMap[this.id] = this;
var html = "";
html += "<div id=\"" + EDITOR_TOOLBAR_PREFIX + this.id + "\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=" + this.objectWidth + "><tr>";
html += "<td nowrap><div id=\"" + EDITOR_TOP_TOOLBAR_PREFIX + this.id + "\" class=\"HtmlEditorToolbarStyle\">";
html += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
html += "<tr>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var cutButton = new Button(";
html += "editorIDGenerator,";
html += "\"Cut\",";
html += "\"EditorOnCut(" + this.id + ")\",";
html += "\"cut.gif\"";
html += ");";
html += "cutButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var copyButton = new Button(";
html += "editorIDGenerator,";
html += "\"Copy\",";
html += "\"EditorOnCopy(" + this.id + ")\",";
html += "\"copy.gif\"";
html += ");";
html += "copyButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var pasteButton = new Button(";
html += "editorIDGenerator,";
html += "\"Paste\",";
html += "\"EditorOnPaste(" + this.id + ")\",";
html += "\"paste.gif\"";
html += ");";
html += "pasteButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var boldButton = new Button(";
html += "editorIDGenerator,";
html += "\"Bold\",";
html += "\"EditorOnBold(" + this.id + ")\",";
html += "\"bold.gif\"";
html += ");";
html += "boldButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var italicButton = new Button(";
html += "editorIDGenerator,";
html += "\"Italic\",";
html += "\"EditorOnItalic(" + this.id + ")\",";
html += "\"italic.gif\"";
html += ");";
html += "italicButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var underlineButton = new Button(";
html += "editorIDGenerator,";
html += "\"Underline\",";
html += "\"EditorOnUnderline(" + this.id + ")\",";
html += "\"under.gif\"";
html += ");";
html += "underlineButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var foregroundColorButton = new Button(";
html += "editorIDGenerator,";
html += "\"Foreground Color\",";
html += "\"EditorOnForegroundColor(" + this.id + ")\",";
html += "\"tpaint.gif\"";
html += ");";
html += "foregroundColorButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var backgroundColorButton = new Button(";
html += "editorIDGenerator,";
html += "\"Background Color\",";
html += "\"EditorOnBackgroundColor(" + this.id + ")\",";
html += "\"parea.gif\"";
html += ");";
html += "backgroundColorButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var alignLeftButton = new Button(";
html += "editorIDGenerator,";
html += "\"Align Left\",";
html += "\"EditorOnAlignLeft(" + this.id + ")\",";
html += "\"aleft.gif\"";
html += ");";
html += "alignLeftButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var centerButton = new Button(";
html += "editorIDGenerator,";
html += "\"Center\",";
html += "\"EditorOnCenter(" + this.id + ")\",";
html += "\"center.gif\"";
html += ");";
html += "centerButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var alignRightButton = new Button(";
html += "editorIDGenerator,";
html += "\"Align Right\",";
html += "\"EditorOnAlignRight(" + this.id + ")\",";
html += "\"aright.gif\"";
html += ");";
html += "alignRightButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "<td id=\"" + EDITOR_LIST_AND_INDENT_PREFIX + this.id + "\" style=\"display:" + (this.brief ? "none" : "inline") + "\">";
html += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
html += "<tr>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var numberedListButton = new Button(";
html += "editorIDGenerator,";
html += "\"Numbered List\",";
html += "\"EditorOnNumberedList(" + this.id + ")\",";
html += "\"nlist.gif\"";
html += ");";
html += "numberedListButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var bullettedListButton = new Button(";
html += "editorIDGenerator,";
html += "\"Bulletted List\",";
html += "\"EditorOnBullettedList(" + this.id + ")\",";
html += "\"blist.gif\"";
html += ");";
html += "bullettedListButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var decreaseIndentButton = new Button(";
html += "editorIDGenerator,";
html += "\"Decrease Indent\",";
html += "\"EditorOnDecreaseIndent(" + this.id + ")\",";
html += "\"ileft.gif\"";
html += ");";
html += "decreaseIndentButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var increaseIndentButton = new Button(";
html += "editorIDGenerator,";
html += "\"Increase Indent\",";
html += "\"EditorOnIncreaseIndent(" + this.id + ")\",";
html += "\"iright.gif\"";
html += ");";
html += "increaseIndentButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "</tr>";
html += "</table>";
html += "</td>";
html += "<td nowrap>";
html += UtilBeginScript();
html += "var createHyperlinkButton = new Button(";
html += "editorIDGenerator,";
html += "\"Create Hyperlink\",";
html += "\"EditorOnCreateHyperlink(" + this.id + ")\",";
html += "\"wlink.gif\"";
html += ");";
html += "createHyperlinkButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
if (this.objectWidth < HtmlEditorCombineWidth) {
html += "</tr></table></div>";
html += "</tr><tr>";
html += "<td nowrap><div id=\"" + EDITOR_BOTTOM_TOOLBAR_PREFIX + this.id + "\" class=\"HtmlEditorToolbarStyle\">";
html += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
html += "<tr>";
}
else
html += "<td nowrap><div class=\"HtmlEditorDividerStyle\"></div></td>";
html += "<td nowrap>";
html += "<span id=\"" + EDITOR_PARAGRAPH_PREFIX + this.id + "\" style=\"display:" + (this.brief ? "none" : "inline") + "\">";
html += "<select class=\"HtmlEditorListStyle\" onchange=\"EditorOnParagraph(" + this.id + ", this)\">";
html += "<option class=\"HtmlEditorHeadingStyle\">Paragraph</option>";
html += "<option value=\"Normal\">Normal</option>";
html += "<option value=\"Heading 1\">Heading 1 <H1></option>";
html += "<option value=\"Heading 2\">Heading 2 <H2></option>";
html += "<option value=\"Heading 3\">Heading 3 <H3></option>";
html += "<option value=\"Heading 4\">Heading 4 <H4></option>";
html += "<option value=\"Heading 5\">Heading 5 <H5></option>";
html += "<option value=\"Heading 6\">Heading 6 <H6></option>";
html += "<option value=\"Address\">Address <ADDR></option>";
html += "<option value=\"Formatted\">Formatted <PRE></option>";
html += "<option style=\"color: darkred\" value=\"removeFormat\">Remove Formatting</option>";
html += "</select>";
html += "</span>";
html += "</td>";
html += "<td nowrap>";
html += "<select class=\"HtmlEditorListStyle\" onchange=\"EditorOnFont(" + this.id + ", this)\">";
html += "<option class=\"HtmlEditorHeadingStyle\">Font</option>";
html += "<option value=\"Arial\">Arial</option>";
html += "<option value=\"Arial Black\">Arial Black</option>";
html += "<option value=\"Arial Narrow\">Arial Narrow</option>";
html += "<option value=\"Comic Sans MS\">Comic Sans MS</option>";
html += "<option value=\"Courier New\">Courier New</option>";
html += "<option value=\"System\">System</option>";
html += "<option value=\"Times New Roman\">Times New Roman</option>";
html += "<option value=\"Verdana\">Verdana</option>";
html += "<option value=\"Wingdings\">Wingdings</option>";
html += "</select>";
html += "</td>";
html += "<td nowrap>";
html += "<select class=\"HtmlEditorListStyle\" onchange=\"EditorOnSize(" + this.id + ", this)\">";
html += "<option class=\"HtmlEditorHeadingStyle\">Size</option>";
html += "<option value=\"1\">1</option>";
html += "<option value=\"2\">2</option>";
html += "<option value=\"3\">3</option>";
html += "<option value=\"4\">4</option>";
html += "<option value=\"5\">5</option>";
html += "<option value=\"6\">6</option>";
html += "<option value=\"7\">7</option>";
html += "</select>";
html += "</td>";
html += "<td nowrap>";
html += "<div class=\"HtmlEditorDividerStyle\"></div>";
html += "</td>";
html += "<td nowrap>";
html += "<input type=\"checkbox\" onclick=\"EditorOnViewHTMLSource(" + this.id + ", this.checked)\">";
html += "<span class=\"HtmlEditorTextStyle\">View HTML</span>";
html += "</td>";
html += "</tr>";
html += "</table>";
html += "</div></td>";
html += "</td></tr></table></div>";
document.write(html); html = "";
this.toolbarHeight = eval(EDITOR_TOOLBAR_PREFIX + this.id).offsetHeight;
this.editBoxHeight = this.objectHeight - this.toolbarHeight;
if (this.editBoxHeight < 0) this.editBoxHeight = 10;
html += "<iframe class=\"HtmlEditorFrameStyle\" id=\"" + EDITOR_COMPOSITION_PREFIX + this.id + "\" width=\"" + this.objectWidth + "\" height=\"" + this.editBoxHeight + "\" onblur=\"EditorOnBlur(" + this.id + ")\">";
html += "</iframe>";
document.write(html); html = "";
html += '<body class=\"HtmlEditorBodyStyle\"></body>';
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.open();
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.write(html);
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.close();
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.designMode = "on";
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.onclick = new Function("EditorOnClick(" + this.id + ")");
this.instantiated = true;
}
function EditorGetText()
{
return eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerText;
}
function EditorSetText(text)
{
text = text.replace(/\n/g, "<br>");
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerHTML = text;
}
function EditorGetHTML()
{
if (this.textMode) {
return eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerText;
}
return eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerHTML;
}
function EditorSetHTML(html)
{
if (this.textMode) {
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerText = html;
}
else {
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerHTML = html;
}
}
function EditorGetBrief()
{
return this.brief;
}
function EditorSetBrief(brief)
{
this.brief = brief;
var display = this.brief ? "none" : "inline";
if (this.instantiated) {
eval(EDITOR_PARAGRAPH_PREFIX + this.id).style.display = display;
eval(EDITOR_LIST_AND_INDENT_PREFIX + this.id).style.display = display;
}
}
function EditorFocus()
{
eval(EDITOR_COMPOSITION_PREFIX + this.id).focus();
}
function SetDomain(d)
{
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.domain = d;
}
function EditorOnCut(id)
{
EditorFormat(id, "cut");
}
function EditorOnCopy(id)
{
EditorFormat(id, "copy");
}
function EditorOnPaste(id)
{
EditorFormat(id, "paste");
}
function EditorOnBold(id)
{
EditorFormat(id, "bold");
}
function EditorOnItalic(id)
{
EditorFormat(id, "italic");
}
function EditorOnUnderline(id)
{
EditorFormat(id, "underline");
}
function EditorOnForegroundColor(id)
{
if (!EditorValidateMode(id)) {
return;
}
var color = showModalDialog("colorselect.htm", "", "font-family:Verdana;font-size:12;dialogWidth:28em;dialogHeight:32em");
if (color) {
EditorFormat(id, "forecolor", color);
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
}
}
function EditorOnBackgroundColor(id)
{
if (!EditorValidateMode(id)) {
return;
}
var color = showModalDialog("colorselect.htm", "", "font-family:Verdana;font-size:12;dialogWidth:28em;dialogHeight:32em");
if (color) {
EditorFormat(id, "backcolor", color);
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
}
}
function EditorOnAlignLeft(id)
{
EditorFormat(id, "justifyleft");
}
function EditorOnCenter(id)
{
EditorFormat(id, "justifycenter");
}
function EditorOnAlignRight(id)
{
EditorFormat(id, "justifyright");
}
function EditorOnNumberedList(id)
{
EditorFormat(id, "insertOrderedList");
}
function EditorOnBullettedList(id)
{
EditorFormat(id, "insertUnorderedList");
}
function EditorOnDecreaseIndent(id)
{
EditorFormat(id, "outdent");
}
function EditorOnIncreaseIndent(id)
{
EditorFormat(id, "indent");
}
function EditorOnCreateHyperlink(id)
{
if (!EditorValidateMode(id)) {
return;
}
var anchor = EditorGetElement("A", eval(EDITOR_COMPOSITION_PREFIX + id).document.selection.createRange().parentElement());
var link = prompt("enter link location (eg. http://www.mydomain.com):", anchor ? anchor.href : "http://");
if (link && link != "http://") {
if (eval(EDITOR_COMPOSITION_PREFIX + id).document.selection.type == "None") {
var range = eval(EDITOR_COMPOSITION_PREFIX + id).document.selection.createRange();
range.pasteHTML('<A HREF="' + link + '"></A>');
range.select();
}
else {
EditorFormat(id, "CreateLink", link);
}
}
}
function EditorOnParagraph(id, select)
{
EditorFormat(id, "formatBlock", select[select.selectedIndex].value);
select.selectedIndex = 0;
}
function EditorOnFont(id, select)
{
EditorFormat(id, "fontname", select[select.selectedIndex].value);
select.selectedIndex = 0;
}
function EditorOnSize(id, select)
{
EditorFormat(id, "fontsize", select[select.selectedIndex].value);
select.selectedIndex = 0;
}
function EditorOnViewHTMLSource(id, textMode)
{
var editor = editorMap[id];
editor.textMode = textMode;
if (editor.textMode) {
eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerText = eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerHTML;
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerHTML = eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerText;
}
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
}
function EditorOnClick(id)
{
}
function EditorOnBlur(id)
{
}
function EditorValidateMode(id)
{
var editor = editorMap[id];
if (!editor.textMode) {
return true;
}
alert("Please uncheck the \"View HTML Source\" checkbox to use the toolbars.");
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
return false;
}
function EditorFormat(id, what, opt)
{
if (!EditorValidateMode(id)) {
return;
}
if (opt == "removeFormat") {
what = opt;
opt = null;
}
if (opt == null) {
eval(EDITOR_COMPOSITION_PREFIX + id).document.execCommand(what);
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).document.execCommand(what, "", opt);
}
}
function EditorCleanHTML(id)
{
var fonts = eval(EDITOR_COMPOSITION_PREFIX + id).document.body.all.tags("FONT");
for (var i = fonts.length - 1; i >= 0; i--) {
var font = fonts[i];
if (font.style.backgroundColor == "#ffffff") {
font.outerHTML = font.innerHTML;
}
}
}
function EditorGetElement(tagName, start)
{
while (start && start.tagName != tagName) {
start = start.parentElement;
}
return start;
}
// -->
FILE: htmleditor.htm :
<html>
<head>
<title>HTML Editor</title>
</head>
<body STYLE="margin:0pt;padding:0pt">
<script SRC="htmleditor.js" LANGUAGE="javascript"></script>
<script>
<!--
public_description=new Editor(document.body.offsetHeight, document.body.offsetWidth);
public_description.Instantiate();
// -->
</script>
</body>
</html>
|
|
|
|
|
Using the code from w3richtechedit_src.zip offered for download,
in your Test Page (the zip's index.htm), insert (before any form):
<script>
<!--
// The HTML on the page is accessed by the html property of the scriptlet
// created by the javascript used by the Editor Scriptlet.
// In order to access this property,
// you will need to assign an ID to the scriptlet object on the Test Page
// (something the original code neglected to do).
// For example, I assigned an ID of "editor"
// to Editor Scriptlet object on my Test Page.
// Thus, I can access the html by using editor.html
// Setting the Default Html
function document.onreadystatechange() {
// We cannot safely access the object's methods or properties
// until the document is 'complete'.
// So, we must use the onreadystatechange event handler
// and check the document.readyState property.
// The event is triggered several times,
// but is is only triggered once with the readyState set to 'complete'.
if (document.readyState == 'complete') {
editor.html = '<P><STRONG>Start Here:</STRONG></P>';
editor.CompFocus(); // as defined by the Editor Scriptlet
// Or, if you already have onreadystatechange event handler,
// modify it by adding this code.
// But make sure that this code only executes after
// document.readyState == 'complete'
}
}
// Accessing/Submitting the HTML
function SubmitEditor() {
// How quickly is a button available in a multitasking environment?
// First check the document state to be safe:
if (document.readyState != 'complete') {
alert('The page has not yet finished loading.\r\n'+
'Wait a couple of seconds and try again.');
return false; // the false is only useful if put in onsubmit
}
// For quick testing, I use the alert below
// and I added a button to the Test Page to call this function.
alert(editor.html);
// On your Test Page, you might create a form on the page
// with a INPUT element of type HIDDEN
// and set that element's value property to editor.html
// for example, I might call the form name "MyForm"
// and the hidden value, "MyHiddenHtml" .. Then:
// document.MyForm.MyHiddenHtml.value = editor.html
// You want to do this either in the Form's onsubmit event, if any,
// or otherwise before calling document.MyForm.submit()
// Note: the submit method does NOT call the form's onsubmit event
// if inside onsubmit, don't forget to return true;
}
// -->
</script>
Also add to your Test Page (the zip's index.htm): your test form and it's call to SubmitEditor, or a test button like mine below.
Below, I show how to set the ID of the object to "editor" (and a fix for the original's bogus height value), and a how to add a test button to the page:
<p><object id="editor" data="main.htm" align="baseline" border="0" width="500" height="256" type="text/x-scriptlet"></object></p>
<p><button type=button onclick="SubmitEditor()">Submit HTML</button></p>
Ignore the Bogus FAQ in the article and the various ignorant attempts to make that work with the completely different code in the zip. Take a careful look at the compose.js in the zip.. UGH! it needs a lot of work.
To compare, try signing up with Yahoo and looking at its current editor for email (under the Color and Graphics link).
|
|
|
|
|
To see an even better example of doing this, download the zip (to get the images) and then create the following three files (testeditor.htm , htmleditor.htm , colorselect.htm ), and open testeditor.htm
Implements color selection, the control now automatically sizes itself based upon the size parameter that you pass to the object, and the scriptlet interface has been modified. This code was pieced together from the previous examples and various web borrowings, but works good.. no credit is claimed.. probably should only be used as example.
testeditor.htm : Test the Html Editor Page (replacing index.htm)
<html>
<head>
<title>Test Html Editor</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<H1>Testing an HTML Editor</H1>
<script>
<!--
function document.onreadystatechange() {
if (document.readyState == 'complete') {
editor.SetHTML('<P><STRONG>Sample Default Text</STRONG></P>');
editor.Focus();
}
}
function SubmitEditor() {
alert(editor.GetHTML());
}
// -->
</script>
<p><object id="editor" data="htmleditor.htm" align="baseline" border="0" width="500" height="300" type="text/x-scriptlet"></object></p>
<p><button type=button onclick="SubmitEditor()">Submit HTML</button></p>
</center>
</body>
</html>
htmleditor.htm : the html editor scriptlet (replacing main.htm)
<html>
<head>
<title>HTML Editor</title>
<!-- Styles -->
<style type="text/css">
<!--
SELECT {
BACKGROUND: White; FONT: 8pt verdana,arial,sans-serif
}
TABLE {
POSITION: relative
}
BODY {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 5px
}
.Heading {
BACKGROUND: lightgrey; COLOR: navy
}
.EditBox {
BACKGROUND-COLOR: #ffffff; POSITION: relative
}
.Toolbar {
BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; HEIGHT: 27px; LEFT: 0px; POSITION: relative; TOP: 0px
}
.ButtonNormal {
BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid;
}
.Image {
LEFT: -1px; POSITION: relative; TOP: -1px; WIDTH: 22px
}
.Divider {
BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; FONT-SIZE: 0px; HEIGHT: 22px; POSITION: absolute; TOP: 1px; WIDTH: 1px
}
.List {
FONT: 8pt verdana,arial,sans-serif; POSITION: relative; TOP: 2px
}
.Text {
FONT: 8pt verdana,arial,sans-serif; POSITION: relative; TOP: 2px
}
.ButtonMouseOver {
BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid;
}
.ButtonDisabled {
BACKGROUND-COLOR: buttonface; BORDER-BOTTOM: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; BORDER-TOP: buttonshadow 1px solid;
}
.ButtonPressed {
BACKGROUND-COLOR: gainsboro; BORDER-BOTTOM: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; BORDER-TOP: buttonshadow 1px solid;
}
-->
</style>
</head>
<body STYLE="margin:0pt;padding:2pt">
<SCRIPT>
<!--
function UtilBeginScript()
{
return String.fromCharCode(60, 115, 99, 114, 105, 112, 116, 62);
}
function UtilEndScript()
{
return String.fromCharCode(60, 47, 115, 99, 114, 105, 112, 116, 62);
}
function IDGenerator(nextID)
{
this.nextID = nextID;
this.GenerateID = IDGeneratorGenerateID;
}
function IDGeneratorGenerateID()
{
return this.nextID++;
}
var BUTTON_IMAGE_PREFIX = "buttonImage";
var BUTTON_DIV_PREFIX = "buttonDiv";
var BUTTON_PAD1_PREFIX = "buttonPad1";
var BUTTON_PAD2_PREFIX = "buttonPad2";
var buttonMap = new Object();
function Button
(
idGenerator,
caption,
action,
image
)
{
this.idGenerator = idGenerator;
this.caption = caption;
this.action = action;
this.image = image;
this.enabled = true;
this.Instantiate = ButtonInstantiate;
this.Enable = ButtonEnable;
}
function ButtonInstantiate()
{
this.id = this.idGenerator.GenerateID();
buttonMap[this.id] = this;
var html = "";
html += '<div id="';
html += BUTTON_DIV_PREFIX;
html += this.id;
html += '" class="ButtonNormal"';
html += ' onselectstart="ButtonOnSelectStart()"';
html += ' ondragstart="ButtonOnDragStart()"';
html += ' onmousedown="ButtonOnMouseDown(this)"';
html += ' onmouseup="ButtonOnMouseUp(this)"';
html += ' onmouseout="ButtonOnMouseOut(this)"';
html += ' onmouseover="ButtonOnMouseOver(this)"';
html += ' onclick="ButtonOnClick(this)"';
html += ' ondblclick="ButtonOnDblClick(this)"';
html += '>';
html += '<table cellpadding=0 cellspacing=0 border=0><tr><td><img id="';
html += BUTTON_PAD1_PREFIX;
html += this.id;
html += '" width=2 height=2></td><td></td><td></td></tr><tr><td></td><td>';
html += '<img id="';
html += BUTTON_IMAGE_PREFIX;
html += this.id;
html += '" src="';
html += this.image;
html += '" title="';
html += this.caption;
html += '" class="Image"';
html += '>';
html += '</td><td></td></tr><tr><td></td><td></td><td><img id="';
html += BUTTON_PAD2_PREFIX;
html += this.id;
html += '" width=2 height=2></td></tr></table>';
html += '</div>';
document.write(html);
}
function ButtonEnable(enabled)
{
this.enabled = enabled;
if (this.enabled)
{
document.all[BUTTON_DIV_PREFIX + this.id].className = "ButtonNormal";
}
else
{
document.all[BUTTON_DIV_PREFIX + this.id].className = "ButtonDisabled";
}
}
function ButtonOnSelectStart()
{
window.event.returnValue = false;
}
function ButtonOnDragStart()
{
window.event.returnValue = false;
}
function ButtonOnMouseDown(element)
{
if (event.button == 1)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonPushButton(id);
}
}
}
function ButtonOnMouseUp(element)
{
if (event.button == 1)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonReleaseButton(id);
}
}
}
function ButtonOnMouseOut(element)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonReleaseButton(id);
}
}
function ButtonOnMouseOver(element)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
ButtonReleaseButton(id);
document.all[BUTTON_DIV_PREFIX + id].className = "ButtonMouseOver";
}
}
function ButtonOnClick(element)
{
var id = element.id.substring(BUTTON_DIV_PREFIX.length, element.id.length);
var button = buttonMap[id];
if (button.enabled)
{
eval(button.action);
}
}
function ButtonOnDblClick(element)
{
ButtonOnClick(element);
}
function ButtonPushButton(id)
{
document.all[BUTTON_PAD1_PREFIX + id].width = 3;
document.all[BUTTON_PAD1_PREFIX + id].height = 3;
document.all[BUTTON_PAD2_PREFIX + id].width = 1;
document.all[BUTTON_PAD2_PREFIX + id].height = 1;
document.all[BUTTON_DIV_PREFIX + id].className = "ButtonPressed";
}
function ButtonReleaseButton(id)
{
document.all[BUTTON_PAD1_PREFIX + id].width = 2;
document.all[BUTTON_PAD1_PREFIX + id].height = 2;
document.all[BUTTON_PAD2_PREFIX + id].width = 2;
document.all[BUTTON_PAD2_PREFIX + id].height = 2;
document.all[BUTTON_DIV_PREFIX + id].className = "ButtonNormal";
}
var EDITOR_COMPOSITION_PREFIX = "editorComposition";
var EDITOR_PARAGRAPH_PREFIX = "editorParagraph";
var EDITOR_LIST_AND_INDENT_PREFIX = "editorListAndIndent";
var EDITOR_TOP_TOOLBAR_PREFIX = "editorTopToolbar";
var EDITOR_BOTTOM_TOOLBAR_PREFIX = "editorBottomToolbar";
var editorMap = new Object();
var editorIDGenerator = new IDGenerator(0);
function Editor()
{
this.GetText = EditorGetText;
this.SetText = EditorSetText;
this.GetHTML = EditorGetHTML;
this.SetHTML = EditorSetHTML;
this.GetBrief = EditorGetBrief;
this.SetBrief = EditorSetBrief;
this.Focus = EditorFocus;
this.SetDomain = SetDomain;
this.Instantiate = EditorInstantiate;
this.textMode = false;
this.brief = false;
this.instantiated = false;
this.id = editorIDGenerator.GenerateID();
}
function EditorInstantiate()
{
if (this.instantiated) {
return;
}
editorMap[this.id] = this;
var html = "";
html += "<div id=\"" + EDITOR_TOP_TOOLBAR_PREFIX + this.id + "\" class=\"Toolbar\">";
html += "<table cellpaddin=\"0\" cellspacing=\"0\" border=\"0\">";
html += "<tr>";
html += "<td>";
html += "<span id=\"" + EDITOR_PARAGRAPH_PREFIX + this.id + "\" style=\"display:" + (this.brief ? "none" : "inline") + "\">";
html += "<select class=\"List\" onchange=\"EditorOnParagraph(" + this.id + ", this)\">";
html += "<option class=\"Heading\">Paragraph</option>";
html += "<option value=\"Normal\">Normal</option>";
html += "<option value=\"Heading 1\">Heading 1 <H1></option>";
html += "<option value=\"Heading 2\">Heading 2 <H2></option>";
html += "<option value=\"Heading 3\">Heading 3 <H3></option>";
html += "<option value=\"Heading 4\">Heading 4 <H4></option>";
html += "<option value=\"Heading 5\">Heading 5 <H5></option>";
html += "<option value=\"Heading 6\">Heading 6 <H6></option>";
html += "<option value=\"Address\">Address <ADDR></option>";
html += "<option value=\"Formatted\">Formatted <PRE></option>";
html += "</select>";
html += "</span>";
html += "</td>";
html += "<td>";
html += "<select class=\"List\" onchange=\"EditorOnFont(" + this.id + ", this)\">";
html += "<option class=\"Heading\">Font</option>";
html += "<option value=\"Arial\">Arial</option>";
html += "<option value=\"Arial Black\">Arial Black</option>";
html += "<option value=\"Arial Narrow\">Arial Narrow</option>";
html += "<option value=\"Comic Sans MS\">Comic Sans MS</option>";
html += "<option value=\"Courier New\">Courier New</option>";
html += "<option value=\"System\">System</option>";
html += "<option value=\"Times New Roman\">Times New Roman</option>";
html += "<option value=\"Verdana\">Verdana</option>";
html += "<option value=\"Wingdings\">Wingdings</option>";
html += "</select>";
html += "</td>";
html += "<td>";
html += "<select class=\"List\" onchange=\"EditorOnSize(" + this.id + ", this)\">";
html += "<option class=\"Heading\">Size</option>";
html += "<option value=\"1\">1</option>";
html += "<option value=\"2\">2</option>";
html += "<option value=\"3\">3</option>";
html += "<option value=\"4\">4</option>";
html += "<option value=\"5\">5</option>";
html += "<option value=\"6\">6</option>";
html += "<option value=\"7\">7</option>";
html += "</select>";
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "<td class=\"Text\">";
html += "<input type=\"checkbox\" onclick=\"EditorOnViewHTMLSource(" + this.id + ", this.checked)\">";
html += "View HTML Source";
html += "</td>";
html += "</tr>";
html += "</table>";
html += "</div>";
html += "<div id=\"" + EDITOR_BOTTOM_TOOLBAR_PREFIX + this.id + "\" class=\"Toolbar\">";
html += "<table cellpaddin=\"0\" cellspacing=\"0\" border=\"0\">";
html += "<tr>";
html += "<td>";
html += UtilBeginScript();
html += "var cutButton = new Button(";
html += "editorIDGenerator,";
html += "\"Cut\",";
html += "\"EditorOnCut(" + this.id + ")\",";
html += "\"cut.gif\"";
html += ");";
html += "cutButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var copyButton = new Button(";
html += "editorIDGenerator,";
html += "\"Copy\",";
html += "\"EditorOnCopy(" + this.id + ")\",";
html += "\"copy.gif\"";
html += ");";
html += "copyButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var pasteButton = new Button(";
html += "editorIDGenerator,";
html += "\"Paste\",";
html += "\"EditorOnPaste(" + this.id + ")\",";
html += "\"paste.gif\"";
html += ");";
html += "pasteButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var boldButton = new Button(";
html += "editorIDGenerator,";
html += "\"Bold\",";
html += "\"EditorOnBold(" + this.id + ")\",";
html += "\"bold.gif\"";
html += ");";
html += "boldButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var italicButton = new Button(";
html += "editorIDGenerator,";
html += "\"Italic\",";
html += "\"EditorOnItalic(" + this.id + ")\",";
html += "\"italic.gif\"";
html += ");";
html += "italicButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var underlineButton = new Button(";
html += "editorIDGenerator,";
html += "\"Underline\",";
html += "\"EditorOnUnderline(" + this.id + ")\",";
html += "\"under.gif\"";
html += ");";
html += "underlineButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var foregroundColorButton = new Button(";
html += "editorIDGenerator,";
html += "\"Foreground Color\",";
html += "\"EditorOnForegroundColor(" + this.id + ")\",";
html += "\"tpaint.gif\"";
html += ");";
html += "foregroundColorButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var backgroundColorButton = new Button(";
html += "editorIDGenerator,";
html += "\"Background Color\",";
html += "\"EditorOnBackgroundColor(" + this.id + ")\",";
html += "\"parea.gif\"";
html += ");";
html += "backgroundColorButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var alignLeftButton = new Button(";
html += "editorIDGenerator,";
html += "\"Align Left\",";
html += "\"EditorOnAlignLeft(" + this.id + ")\",";
html += "\"aleft.gif\"";
html += ");";
html += "alignLeftButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var centerButton = new Button(";
html += "editorIDGenerator,";
html += "\"Center\",";
html += "\"EditorOnCenter(" + this.id + ")\",";
html += "\"center.gif\"";
html += ");";
html += "centerButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var alignRightButton = new Button(";
html += "editorIDGenerator,";
html += "\"Align Right\",";
html += "\"EditorOnAlignRight(" + this.id + ")\",";
html += "\"aright.gif\"";
html += ");";
html += "alignRightButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "<td id=\"" + EDITOR_LIST_AND_INDENT_PREFIX + this.id + "\" style=\"display:" + (this.brief ? "none" : "inline") + "\">";
html += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
html += "<tr>";
html += "<td>";
html += UtilBeginScript();
html += "var numberedListButton = new Button(";
html += "editorIDGenerator,";
html += "\"Numbered List\",";
html += "\"EditorOnNumberedList(" + this.id + ")\",";
html += "\"nlist.gif\"";
html += ");";
html += "numberedListButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var bullettedListButton = new Button(";
html += "editorIDGenerator,";
html += "\"Bulletted List\",";
html += "\"EditorOnBullettedList(" + this.id + ")\",";
html += "\"blist.gif\"";
html += ");";
html += "bullettedListButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var decreaseIndentButton = new Button(";
html += "editorIDGenerator,";
html += "\"Decrease Indent\",";
html += "\"EditorOnDecreaseIndent(" + this.id + ")\",";
html += "\"ileft.gif\"";
html += ");";
html += "decreaseIndentButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var increaseIndentButton = new Button(";
html += "editorIDGenerator,";
html += "\"Increase Indent\",";
html += "\"EditorOnIncreaseIndent(" + this.id + ")\",";
html += "\"iright.gif\"";
html += ");";
html += "increaseIndentButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "<td>";
html += "<div class=\"Divider\"></div>";
html += "</td>";
html += "</tr>";
html += "</table>";
html += "</td>";
html += "<td>";
html += UtilBeginScript();
html += "var createHyperlinkButton = new Button(";
html += "editorIDGenerator,";
html += "\"Create Hyperlink\",";
html += "\"EditorOnCreateHyperlink(" + this.id + ")\",";
html += "\"wlink.gif\"";
html += ");";
html += "createHyperlinkButton.Instantiate();";
html += UtilEndScript();
html += "</td>";
html += "</tr>";
html += "</table>";
html += "</div>";
document.write(html); html = "";
var EditBoxHeight = (document.body.offsetHeight - 2) - (document.all[EDITOR_BOTTOM_TOOLBAR_PREFIX + this.id].offsetHeight+document.all[EDITOR_TOP_TOOLBAR_PREFIX + this.id].offsetHeight);
html += "<iframe class=\"EditBox\" id=\"" + EDITOR_COMPOSITION_PREFIX + this.id + "\" width=\"100%\" height=\"" + EditBoxHeight + "\" onblur=\"EditorOnBlur(" + this.id + ")\">";
html += "</iframe>";
document.write(html); html = "";
html += '<body style="font:10pt arial">';
html += '</body>';
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.open();
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.write(html);
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.close();
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.designMode = "on";
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.onclick = new Function("EditorOnClick(" + this.id + ")");
this.instantiated = true;
}
function EditorGetText()
{
return eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerText;
}
function EditorSetText(text)
{
text = text.replace(/\n/g, "<br>");
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerHTML = text;
}
function EditorGetHTML()
{
if (this.textMode) {
return eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerText;
}
return eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerHTML;
}
function EditorSetHTML(html)
{
if (this.textMode) {
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerText = html;
}
else {
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.body.innerHTML = html;
}
}
function EditorGetBrief()
{
return this.brief;
}
function EditorSetBrief(brief)
{
this.brief = brief;
var display = this.brief ? "none" : "inline";
if (this.instantiated) {
eval(EDITOR_PARAGRAPH_PREFIX + this.id).style.display = display;
eval(EDITOR_LIST_AND_INDENT_PREFIX + this.id).style.display = display;
}
}
function EditorFocus()
{
eval(EDITOR_COMPOSITION_PREFIX + this.id).focus();
}
function SetDomain(d)
{
eval(EDITOR_COMPOSITION_PREFIX + this.id).document.domain = d;
}
function EditorOnCut(id)
{
EditorFormat(id, "cut");
}
function EditorOnCopy(id)
{
EditorFormat(id, "copy");
}
function EditorOnPaste(id)
{
EditorFormat(id, "paste");
}
function EditorOnBold(id)
{
EditorFormat(id, "bold");
}
function EditorOnItalic(id)
{
EditorFormat(id, "italic");
}
function EditorOnUnderline(id)
{
EditorFormat(id, "underline");
}
function EditorOnForegroundColor(id)
{
if (!EditorValidateMode(id)) {
return;
}
var color = showModalDialog("colorselect.htm", "", "font-family:Verdana;font-size:12;dialogWidth:28em;dialogHeight:32em");
if (color) {
EditorFormat(id, "forecolor", color);
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
}
}
function EditorOnBackgroundColor(id)
{
if (!EditorValidateMode(id)) {
return;
}
var color = showModalDialog("colorselect.htm", "", "font-family:Verdana;font-size:12;dialogWidth:28em;dialogHeight:32em");
if (color) {
EditorFormat(id, "backcolor", color);
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
}
}
function EditorOnAlignLeft(id)
{
EditorFormat(id, "justifyleft");
}
function EditorOnCenter(id)
{
EditorFormat(id, "justifycenter");
}
function EditorOnAlignRight(id)
{
EditorFormat(id, "justifyright");
}
function EditorOnNumberedList(id)
{
EditorFormat(id, "insertOrderedList");
}
function EditorOnBullettedList(id)
{
EditorFormat(id, "insertUnorderedList");
}
function EditorOnDecreaseIndent(id)
{
EditorFormat(id, "outdent");
}
function EditorOnIncreaseIndent(id)
{
EditorFormat(id, "indent");
}
function EditorOnCreateHyperlink(id)
{
if (!EditorValidateMode(id)) {
return;
}
var anchor = EditorGetElement("A", eval(EDITOR_COMPOSITION_PREFIX + id).document.selection.createRange().parentElement());
var link = prompt("enter link location (eg. http://www.mydomain.com):", anchor ? anchor.href : "http://");
if (link && link != "http://") {
if (eval(EDITOR_COMPOSITION_PREFIX + id).document.selection.type == "None") {
var range = eval(EDITOR_COMPOSITION_PREFIX + id).document.selection.createRange();
range.pasteHTML('<A HREF="' + link + '"></A>');
range.select();
}
else {
EditorFormat(id, "CreateLink", link);
}
}
}
function EditorOnParagraph(id, select)
{
EditorFormat(id, "formatBlock", select[select.selectedIndex].value);
select.selectedIndex = 0;
}
function EditorOnFont(id, select)
{
EditorFormat(id, "fontname", select[select.selectedIndex].value);
select.selectedIndex = 0;
}
function EditorOnSize(id, select)
{
EditorFormat(id, "fontsize", select[select.selectedIndex].value);
select.selectedIndex = 0;
}
function EditorOnViewHTMLSource(id, textMode)
{
var editor = editorMap[id];
editor.textMode = textMode;
if (editor.textMode) {
eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerText = eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerHTML;
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerHTML = eval(EDITOR_COMPOSITION_PREFIX + id).document.body.innerText;
}
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
}
function EditorOnClick(id)
{
}
function EditorOnBlur(id)
{
}
function EditorValidateMode(id)
{
var editor = editorMap[id];
if (!editor.textMode) {
return true;
}
alert("Please uncheck the \"View HTML Source\" checkbox to use the toolbars.");
eval(EDITOR_COMPOSITION_PREFIX + id).focus();
return false;
}
function EditorFormat(id, what, opt)
{
if (!EditorValidateMode(id)) {
return;
}
if (opt == "removeFormat") {
what = opt;
opt = null;
}
if (opt == null) {
eval(EDITOR_COMPOSITION_PREFIX + id).document.execCommand(what);
}
else {
eval(EDITOR_COMPOSITION_PREFIX + id).document.execCommand(what, "", opt);
}
}
function EditorCleanHTML(id)
{
var fonts = eval(EDITOR_COMPOSITION_PREFIX + id).document.body.all.tags("FONT");
for (var i = fonts.length - 1; i >= 0; i--) {
var font = fonts[i];
if (font.style.backgroundColor == "#ffffff") {
font.outerHTML = font.innerHTML;
}
}
}
function EditorGetElement(tagName, start)
{
while (start && start.tagName != tagName) {
start = start.parentElement;
}
return start;
}
public_description=new Editor
public_description.Instantiate();
// -->
</SCRIPT>
</body>
</html>
colorselect.htm : implementing color selection
<html>
<head>
<title>Color Select</title>
<style type="text/css">
body {margin:10; font:arial,helvetica; background:menu}
button {width:5em}
table.CTab {cursor:hand}
.CTab TD {border: solid 2px #ffffff;}
</style>
</head>
<body class="bgd">
<script>
var selected = "c00";
function CTabCLICK()
{
document.all[selected].style.borderColor = "white";
selected = event.srcElement.id;
document.all[selected].style.borderColor = "black";
ShowSelected();
}
function CTabOVER()
{
RGB.innerText = event.srcElement.bgColor;
SAMP.style.backgroundColor = event.srcElement.bgColor;
}
function CTabOUT()
{
ShowSelected();
}
function Done()
{
window.returnValue = SAMP.style.backgroundColor;
window.close();
}
function Cancel()
{
window.close();
}
function ShowSelected()
{
RGB.innerText = document.all[selected].bgColor;
SAMP.style.backgroundColor = document.all[selected].bgColor;
}
</script>
<center>
<table bgcolor=white cellpadding=4 cellspacing=0 border=0>
<tr>
<td>
<center>
<table class="CTab" ID=ColorTable border=0 cellspacing=0 cellpadding=0 onclick="CTabCLICK();" onmouseover="CTabOVER();" onmouseout="CTabOUT();" width=300>
<tr>
<td id=c00 bgcolor="#000000" title="#000000" style="border:solid 2px black;"> </td>
<td id=c01 bgcolor="#111111" title="#111111"> </td>
<td id=c02 bgcolor="#2a2a2a" title="#2a2a2a"> </td>
<td id=c03 bgcolor="#434343" title="#434343"> </td>
<td id=c04 bgcolor="#5b5b5b" title="#5b5b5b"> </td>
<td id=c05 bgcolor="#737373" title="#737373"> </td>
<td id=c06 bgcolor="#8b8b8b" title="#8b8b8b"> </td>
<td id=c07 bgcolor="#a2a2a2" title="#a2a2a2"> </td>
<td id=c08 bgcolor="#b9b9b9" title="#b9b9b9"> </td>
<td id=c09 bgcolor="#d0d0d0" title="#d0d0d0"> </td>
<td id=c0a bgcolor="#e6e6e6" title="#e6e6e6"> </td>
<td id=c0b bgcolor="#ffffff" title="#ffffff"> </td>
</tr>
<tr>
<td id=c10 bgcolor="#7f7f00" title="#7f7f00"> </td>
<td id=c11 bgcolor="#bfbf00" title="#bfbf00"> </td>
<td id=c12 bgcolor="#ffff00" title="#ffff00"> </td>
<td id=c13 bgcolor="#ffff40" title="#ffff40"> </td>
<td id=c14 bgcolor="#ffff80" title="#ffff80"> </td>
<td id=c15 bgcolor="#ffffbf" title="#ffffbf"> </td>
<td id=c16 bgcolor="#525330" title="#525330"> </td>
<td id=c17 bgcolor="#898a49" title="#898a49"> </td>
<td id=c18 bgcolor="#aea945" title="#aea945"> </td>
<td id=c19 bgcolor="#c3be71" title="#c3be71"> </td>
<td id=c1a bgcolor="#e0dcaa" title="#e0dcaa"> </td>
<td id=c1b bgcolor="#fcfae1" title="#fcfae1"> </td>
</tr>
<tr>
<td id=c20 bgcolor="#407f00" title="#407f00"> </td>
<td id=c21 bgcolor="#60bf00" title="#60bf00"> </td>
<td id=c22 bgcolor="#80ff00" title="#80ff00"> </td>
<td id=c23 bgcolor="#a0ff40" title="#a0ff40"> </td>
<td id=c24 bgcolor="#c0ff80" title="#c0ff80"> </td>
<td id=c25 bgcolor="#dfffbf" title="#dfffbf"> </td>
<td id=c26 bgcolor="#3b5738" title="#3b5738"> </td>
<td id=c27 bgcolor="#668f5a" title="#668f5a"> </td>
<td id=c28 bgcolor="#7f9757" title="#7f9757"> </td>
<td id=c29 bgcolor="#8a9b55" title="#8a9b55"> </td>
<td id=c2a bgcolor="#b7c296" title="#b7c296"> </td>
<td id=c2b bgcolor="#e6ebd5" title="#e6ebd5"> </td>
</tr>
<tr>
<td id=c30 bgcolor="#007f40" title="#007f40"> </td>
<td id=c31 bgcolor="#00bf60" title="#00bf60"> </td>
<td id=c32 bgcolor="#00ff80" title="#00ff80"> </td>
<td id=c33 bgcolor="#40ffa0" title="#40ffa0"> </td>
<td id=c34 bgcolor="#80ffc0" title="#80ffc0"> </td>
<td id=c35 bgcolor="#bfffdf" title="#bfffdf"> </td>
<td id=c36 bgcolor="#033d21" title="#033d21"> </td>
<td id=c37 bgcolor="#438059" title="#438059"> </td>
<td id=c38 bgcolor="#7fa37c" title="#7fa37c"> </td>
<td id=c39 bgcolor="#8dae94" title="#8dae94"> </td>
<td id=c3a bgcolor="#acc6b5" title="#acc6b5"> </td>
<td id=c3b bgcolor="#ddebe2" title="#ddebe2"> </td>
</tr>
<tr>
<td id=c40 bgcolor="#007f7f" title="#007f7f"> </td>
<td id=c41 bgcolor="#00bfbf" title="#00bfbf"> </td>
<td id=c42 bgcolor="#00ffff" title="#00ffff"> </td>
<td id=c43 bgcolor="#40ffff" title="#40ffff"> </td>
<td id=c44 bgcolor="#80ffff" title="#80ffff"> </td>
<td id=c45 bgcolor="#bfffff" title="#bfffff"> </td>
<td id=c46 bgcolor="#033d3d" title="#033d3d"> </td>
<td id=c47 bgcolor="#347d7e" title="#347d7e"> </td>
<td id=c48 bgcolor="#609a9f" title="#609a9f"> </td>
<td id=c49 bgcolor="#96bdc4" title="#96bdc4"> </td>
<td id=c4a bgcolor="#b5d1d7" title="#b5d1d7"> </td>
<td id=c4b bgcolor="#e2f1f4" title="#e2f1f4"> </td>
</tr>
<tr>
<td id=c50 bgcolor="#00407f" title="#00407f"> </td>
<td id=c51 bgcolor="#0060bf" title="#0060bf"> </td>
<td id=c52 bgcolor="#0080ff" title="#0080ff"> </td>
<td id=c53 bgcolor="#40a0ff" title="#40a0ff"> </td>
<td id=c54 bgcolor="#80c0ff" title="#80c0ff"> </td>
<td id=c55 bgcolor="#bfdfff" title="#bfdfff"> </td>
<td id=c56 bgcolor="#1b2c48" title="#1b2c48"> </td>
<td id=c57 bgcolor="#385376" title="#385376"> </td>
<td id=c58 bgcolor="#57708f" title="#57708f"> </td>
<td id=c59 bgcolor="#7792ac" title="#7792ac"> </td>
<td id=c5a bgcolor="#a8bed1" title="#a8bed1"> </td>
<td id=c5b bgcolor="#deebf6" title="#deebf6"> </td>
</tr>
<tr>
<td id=c60 bgcolor="#00007f" title="#00007f"> </td>
<td id=c61 bgcolor="#0000bf" title="#0000bf"> </td>
<td id=c62 bgcolor="#0000ff" title="#0000ff"> </td>
<td id=c63 bgcolor="#4040ff" title="#4040ff"> </td>
<td id=c64 bgcolor="#8080ff" title="#8080ff"> </td>
<td id=c65 bgcolor="#bfbfff" title="#bfbfff"> </td>
<td id=c66 bgcolor="#212143" title="#212143"> </td>
<td id=c67 bgcolor="#373e68" title="#373e68"> </td>
<td id=c68 bgcolor="#444f75" title="#444f75"> </td>
<td id=c69 bgcolor="#585e82" title="#585e82"> </td>
<td id=c6a bgcolor="#8687a4" title="#8687a4"> </td>
<td id=c6b bgcolor="#d2d1e1" title="#d2d1e1"> </td>
</tr>
<tr>
<td id=c70 bgcolor="#40007f" title="#40007f"> </td>
<td id=c71 bgcolor="#6000bf" title="#6000bf"> </td>
<td id=c72 bgcolor="#8000ff" title="#8000ff"> </td>
<td id=c73 bgcolor="#a040ff" title="#a040ff"> </td>
<td id=c74 bgcolor="#c080ff" title="#c080ff"> </td>
<td id=c75 bgcolor="#dfbfff" title="#dfbfff"> </td>
<td id=c76 bgcolor="#302449" title="#302449"> </td>
<td id=c77 bgcolor="#54466f" title="#54466f"> </td>
<td id=c78 bgcolor="#655a7f" title="#655a7f"> </td>
<td id=c79 bgcolor="#726284" title="#726284"> </td>
<td id=c7a bgcolor="#9e8fa9" title="#9e8fa9"> </td>
<td id=c7b bgcolor="#dcd1df" title="#dcd1df"> </td>
</tr>
<tr>
<td id=c80 bgcolor="#7f007f" title="#7f007f"> </td>
<td id=c81 bgcolor="#bf00bf" title="#bf00bf"> </td>
<td id=c82 bgcolor="#ff00ff" title="#ff00ff"> </td>
<td id=c83 bgcolor="#ff40ff" title="#ff40ff"> </td>
<td id=c84 bgcolor="#ff80ff" title="#ff80ff"> </td>
<td id=c85 bgcolor="#ffbfff" title="#ffbfff"> </td>
<td id=c86 bgcolor="#4a234a" title="#4a234a"> </td>
<td id=c87 bgcolor="#794a72" title="#794a72"> </td>
<td id=c88 bgcolor="#936386" title="#936386"> </td>
<td id=c89 bgcolor="#9d7292" title="#9d7292"> </td>
<td id=c8a bgcolor="#c0a0b6" title="#c0a0b6"> </td>
<td id=c8b bgcolor="#ecdae5" title="#ecdae5"> </td>
</tr>
<tr>
<td id=c90 bgcolor="#7f003f" title="#7f003f"> </td>
<td id=c91 bgcolor="#bf005f" title="#bf005f"> </td>
<td id=c92 bgcolor="#ff007f" title="#ff007f"> </td>
<td id=c93 bgcolor="#ff409f" title="#ff409f"> </td>
<td id=c94 bgcolor="#ff80bf" title="#ff80bf"> </td>
<td id=c95 bgcolor="#ffbfdf" title="#ffbfdf"> </td>
<td id=c96 bgcolor="#451528" title="#451528"> </td>
<td id=c97 bgcolor="#823857" title="#823857"> </td>
<td id=c98 bgcolor="#a94a76" title="#a94a76"> </td>
<td id=c99 bgcolor="#bc6f95" title="#bc6f95"> </td>
<td id=c9a bgcolor="#d8a5bb" title="#d8a5bb"> </td>
<td id=c9b bgcolor="#f7dde9" title="#f7dde9"> </td>
</tr>
<tr>
<td id=ca0 bgcolor="#800000" title="#800000"> </td>
<td id=ca1 bgcolor="#c00000" title="#c00000"> </td>
<td id=ca2 bgcolor="#ff0000" title="#ff0000"> </td>
<td id=ca3 bgcolor="#ff4040" title="#ff4040"> </td>
<td id=ca4 bgcolor="#ff8080" title="#ff8080"> </td>
<td id=ca5 bgcolor="#ffc0c0" title="#ffc0c0"> </td>
<td id=ca6 bgcolor="#441415" title="#441415"> </td>
<td id=ca7 bgcolor="#82393c" title="#82393c"> </td>
<td id=ca8 bgcolor="#aa4d4e" title="#aa4d4e"> </td>
<td id=ca9 bgcolor="#bc6e6e" title="#bc6e6e"> </td>
<td id=caa bgcolor="#d8a3a4" title="#d8a3a4"> </td>
<td id=cab bgcolor="#f8dddd" title="#f8dddd"> </td>
</tr>
<tr>
<td id=cb0 bgcolor="#7f3f00" title="#7f3f00"> </td>
<td id=cb1 bgcolor="#bf5f00" title="#bf5f00"> </td>
<td id=cb2 bgcolor="#ff7f00" title="#ff7f00"> </td>
<td id=cb3 bgcolor="#ff9f40" title="#ff9f40"> </td>
<td id=cb4 bgcolor="#ffbf80" title="#ffbf80"> </td>
<td id=cb5 bgcolor="#ffdfbf" title="#ffdfbf"> </td>
<td id=cb6 bgcolor="#482c1b" title="#482c1b"> </td>
<td id=cb7 bgcolor="#855a40" title="#855a40"> </td>
<td id=cb8 bgcolor="#b27c51" title="#b27c51"> </td>
<td id=cb9 bgcolor="#c49b71" title="#c49b71"> </td>
<td id=cba bgcolor="#e1c4a8" title="#e1c4a8"> </td>
<td id=cbb bgcolor="#fdeee0" title="#fdeee0"> </td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align=right>
<table>
<tr>
<td id=RGB>#c0ff80</td>
<td><div style="width:24px; height:24px; background-color: #c0ff80; border: solid 1px black;" id="SAMP"> </div></td>
</tr>
</table>
</td>
</tr>
<tr class="bbar">
<td align=center>
<input type="button" class="abutton" onclick="Done()" value=" Done "> <input type="button" class="fbutton" onclick="Cancel()" value="Cancel">
</td>
</tr>
</table>
</center>
</body>
</html>
|
|
|
|
|
Are you kidding me?
That's the worst piece of crap I have ever seen.
|
|
|
|
|
Hi
I copy and paste from Excel sheet with big size in my "IFRAME" and try to send the mail. But I cannot send the email.It says 'internal server error-500'. Can anybody see the pbm? Thanks in advance.
-Gulbarga
|
|
|
|
|
I don't understand what your trying to achieve by using Excel with this html editor.
IE can bring up an Excel worksheet directly, and you can easily write an html page so that IE brings it up as an Excel worksheet. No need to use this html editor..
If you are trying to upload a .pbm worksheet to a server as an email attachment, that is way beyond the scope of this html editor... the problem will be something besides the editor.
If you are trying to copy a group of cells from an Excel spreadsheet in order to paste it into the html editor.. that works just fine in my testing.. the IE control automatically converts Excel and RTF and Doc formats into HTML when pasted.
- Moe.
|
|
|
|
|
hey guys
The scenario for my problem is:
you typed in the text: This is to test and then on the word test you apply paragraph style ...now i want to know how can i get this style when my cursor is on this word i.e. any where on "test"....any help will be highly appreciated...
looking forward to you java script punters...
|
|
|
|
|
var range = eval("IdOfEditorIframe").document.selection.createRange();
var v = range.queryCommandValue("formatBlock");
Where you put this depends on how you plan on using it, and which HTML Editor solution you use (there are two in the article.. the article itself and the rather different zip file example).
I used this kind of code in conjuction with 4 event handlers that I attached to the iframe: onkeydown, onkeyup, onmousedown, onmouseup. (getting the id of the iframe easy if you are in the scriptlet/javascript that defines the iframe). I then use those event handlers to update the list box for paragraph, font, and font size, to depend upon those settings for wherever the cursor is located. Since only key clicks and mouse clicks can do this, but since it may be different between when mouse is pressed and when it is let go (such as highlighting a selection) I do it on all four events.
Doing Bold, Italic, etc.. is similar.. but my buttons need fixing before I can display it properly. when I have the whole thing working, I will post it, if you are interested.
|
|
|
|
|
my page is accessible only through https. every time i connect to the page where the rt-editor is included, an alert message shows up telling me that the page contains not secure objects (where the not secure object is iframe!). How can I get rid of this alert message ? - can anybody help
thanks
raphael
|
|
|
|
|
make the Iframe's src attribute a https: link
|
|
|
|
|
I'm using the code from the "It Works!" post as a base and am using this page to both send the output of the Text Editor and/or populate the editor with information passed in. Both of those work.
My first problem is that although the information is getting into the editor, it is being deleted somehow after it shows - maybe as some sort of refresh. I have a couple of alerts in there that I was using to make sure the editer contents weren't getting wiped out in that part of the code.
The other problem is formatting. I haven't changed anything from the main.htm code, but something is getting wacked with the toolbars. My only guess is something from the rest of my code. Unfortunately, tags and stylesheets are not my forte, though I'm trying to get up to speed on them. The only thing I've changed in the stylesheet that comes with this sample is the width of the toolbars and the editor window.
I've actually got this functionality put together in a Perl CGI, and the code below is the output. The CGI and this code used as straight HTML seem to work the same (both broken)
Any help is appreciated. Thanks.
- Wes
*******************
<title>Sermon Detail Page
Sermon Detail Page
View the sermon list
Sunday | Twenty-fifth Sunday After PentecostTwenty-sixth Sunday After PentecostLast Sunday -Christ the KingFirst Sunday in AdventSecond Sunday in AdventThird Sunday in AdventFourth Sunday in AdventChristmas Eve-2, 3:30, 5Christmas DayFirst Sunday After ChristmasSecond Sunday After ChristmasEpiphanyFirst Sunday After the Epiphany | Location | Easter on the HillEaster by the Lake
| Speaker | Pastor JimPastor ConniePastor KevinPastor Paul
Visiting speaker: | Sermon Title/Theme | | Biblical Text |
(If other than lectionary readings) |
*******************
|
|
|
|
|
My apologies. Apparently my brain is so fried from looking at this so long that I can't even post correctly. :P Isn't there supposed to be a way to update a post? I couldn't find it...
Here are a couple of screenshots
During the alert popup:
http://www.prestonweb.com/wes/images/Picture1.jpg
After the alerts have been closed:
http://www.prestonweb.com/wes/images/Picture2.jpg
And the complete code below.
Thanks,
- Wes
<html>
<head>
<title>Sermon Detail Page</title>
<link rel="stylesheet" type="text/css" href="http://www.easter.org/easter.css">
<link REL="stylesheet" TYPE="text/css" HREF="/Editor1/styles.css?12">
</head>
<body bgcolor="#fffff" onload="bLoad=true" STYLE="margin:0pt;padding:2pt">
<p>Sermon Detail Page</p>
<p><a href="sermon_list2.cgi" target="_self">View the sermon list</a></p>
<center>
<form name="saveform" method="POST" action="sermon_edit2.cgi" onSubmit="savedocument();">
<INPUT TYPE=hidden NAME="mode" value="edit">
<INPUT TYPE=hidden NAME="sermon_id" value="25">
<input type=hidden name="sermon">
<SCRIPT>
<!--
var bLoad=false
var pureText=true
var bodyTag="Lets do a single line then"
var bTextMode=false
public_description=new Editor
function Editor() {
this.put_html=SetHtml;
this.get_html=GetHtml;
this.put_text=SetText;
this.get_text=GetText;
this.CompFocus=GetCompFocus;
}
function GetCompFocus() {
mytext.focus();
}
function GetText() {
return mytext.document.body.innerText;
}
function SetText(text) {
text = text.replace(/\n/g, "<br>")
mytext.document.body.innerHTML=text;
}
function GetHtml() {
if (bTextMode)
return mytext.document.body.innerText;
else {
cleanHtml();
cleanHtml();
return mytext.document.body.innerHTML;
}
}
function SetHtml(sVal) {
if (bTextMode) mytext.document.body.innerText=sVal;
else mytext.document.body.innerHTML=sVal;
}
function savedocument() { // added 16-02-02
if (!isRTextMode()) return;
setMode(1); //switch doc to html mode for save
document.saveform.sermon.value=mytext.document.body.innerText;
setMode(0); //switch doc back to text mode
//document.saveform.submit(); // submit form for save
}
// -->
</script>
<table border="1" cellspacing="1" width="675" height="149">
<tr>
<td width="118" height="18" valign="top">Sunday</td>
<td width="337" height="18" valign="top" align="left">
<select size="1" name="sunday_index" value="0"><option value=0 selected>Twenty-fifth Sunday After Pentecost</option><option value=1>Twenty-sixth Sunday After Pentecost</option><option value=2>Last Sunday -Christ the King</option><option value=3>First Sunday in Advent</option><option value=4>Second Sunday in Advent</option><option value=5>Third Sunday in Advent</option><option value=6>Fourth Sunday in Advent</option><option value=7>Christmas Eve-2, 3:30, 5</option><option value=8>Christmas Day</option><option value=9>First Sunday After Christmas</option><option value=10>Second Sunday After Christmas</option><option value=11>Epiphany</option><option value=12>First Sunday After the Epiphany</option></select></td>
</tr>
<tr>
<td width="118" height="19" valign="top">Location</td>
<td width="337" height="19">
<select size="1" name="location" value="Hill"><option value="Hill" selected>Easter on the Hill</option><option value="Lake">Easter by the Lake</option>
</select></td>
</tr>
<tr>
<td width="118" height="19" valign="top">Speaker</td>
<td width="337" height="19">
<select size="1" name="speaker" value="Pastor Jim"><option selected>Pastor Jim</option><option>Pastor Connie</option><option>Pastor Kevin</option><option>Pastor Paul</option>
</select><br>
Visiting speaker:<input type="text" name="visitor" size="30" value=""></td>
</tr>
<tr>
<td width="118" height="18" valign="top">Sermon Title/Theme</td>
<td width="337" height="18" valign="top" align="left"><input type="text" name="theme" size="40" value=""></td>
</tr>
<tr>
<td width="118" height="18" valign="top">Biblical Text</td>
<td width="337" height="18" valign="top" align="left"><input type="text" name="text" size="40" value="">
<br>(If other than lectionary readings)</td>
</tr>
</table><br>
<div class="yToolbar" ID="FormatToolbar">
<div class="TBHandle"></div>
<div class="Btn" TITLE="Cut" onclick="RunCom('cut')">
<img class="Ico" src="/Editor1/cut.gif">
</div>
<div class="Btn" TITLE="Copy" onclick="RunCom('copy')">
<img class="Ico" src="/Editor1/copy.gif">
</div>
<div class="Btn" TITLE="Paste" onclick="RunCom('paste')">
<img class="Ico" src="/Editor1/paste.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Bold" onclick="RunCom('bold');">
<img class="Ico" src="/Editor1/bold.gif">
</div>
<div class="Btn" TITLE="Italic" onclick="RunCom('italic')">
<img class="Ico" src="/Editor1/italic.gif">
</div>
<div class="Btn" TITLE="Underline" onclick="RunCom('underline')">
<img class="Ico" src="/Editor1/under.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Foreground Color" onclick="foreColor()">
<img class="Ico" src="/Editor1/tpaint.gif">
</div>
<div class="Btn" TITLE="Background Color" onclick="backColor()">
<img class="Ico" src="/Editor1/parea.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Align Left" NAME="Justify" onclick="RunCom('justifyleft')">
<img class="Ico" src="/Editor1/aleft.gif">
</div>
<div class="Btn" TITLE="Center" NAME="Justify" onclick="RunCom('justifycenter')">
<img class="Ico" src="/Editor1/center.gif">
</div>
<div class="Btn" TITLE="Align Right" NAME="Justify" onclick="RunCom('justifyright')">
<img class="Ico" src="/Editor1/aright.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Numbered List" onclick="RunCom('insertorderedlist')">
<img class="Ico" src="/Editor1/nlist.gif">
</div>
<div class="Btn" TITLE="Bulletted List" onclick="RunCom('insertunorderedlist')">
<img class="Ico" src="/Editor1/blist.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Decrease Indent" onclick="RunCom('outdent')">
<img class="Ico" src="/Editor1/ileft.gif">
</div>
<div class="Btn" TITLE="Increase Indent" onclick="RunCom('indent')">
<img class="Ico" src="/Editor1/iright.gif" >
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Hyperlink" onclick="createLink()">
<img class="Ico" src="/Editor1/wlink.gif">
</div>
</div>
<div class="yToolbar" ID="ParaToolbar">
<div class="TBHandle"></div>
<!--Paragraph Style begins -->
<!--
<select ID="ParagraphStyle" class="TBGen" TITLE="Paragraph Format" onchange="RunCom('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
-->
<select ID="ParagraphStyle" class="TBGen" TITLE="Paragraph Format" onchange="RunCom('formatBlock',this[this.selectedIndex].value);">
<option selected>Paragraph
<option value="Normal">Normal
<option value="Heading 1">Heading 1 <H1>
<option value="Heading 2">Heading 2 <H2>
<option value="Heading 3">Heading 3 <H3>
<option value="Heading 4">Heading 4 <H4>
<option value="Heading 5">Heading 5 <H5>
<option value="Heading 6">Heading 6 <H6>
<option value="Address">Address <ADDR>
<option value="Formatted">Formatted <PRE>
<option style="color: darkred" value="removeFormat">Remove Formatting
</select>
<!-- Font name begins, always selectect the select font. -->
<!--
<select ID="FontName" class="TBGen" TITLE="Font Name" onchange="RunCom('fontname',this[this.selectedIndex].value);this.selectedIndex=this[this.selectedIndex].value;alert(FontName[FontName.selectedIndex].value)">
-->
<select ID="FontName" class="TBGen" TITLE="Font Name" onchange="RunCom('fontname',this[this.selectedIndex].value);">
<option selected>Font
<option value="Arial">Arial
<option value="Arial Black">Arial Black
<option value="Arial Narrow">Arial Narrow
<option value="Comic Sans MS">Comic Sans MS
<option value="Courier New">Courier New
<option value="System">System
<option value="Times New Roman">Times New Roman
<option value="Verdana">Verdana
<option value="Wingdings">Wingdings
<option value="Kantipur">Kantipur
</select>
<!-- Font size begins -->
<!--
<select ID="FontSize" class="TBGen" TITLE="Font Size" onchange="RunCom('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
-->
<select ID="FontSize" class="TBGen" TITLE="Font Size" onchange="RunCom('fontsize',this[this.selectedIndex].value);">
<option selected>Size
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="10">10
<option value="12">12
<option value="14">14
</select>
<div class="TBSep"></div>
<div ID="EditMode" class="TBGen" style="width:150" TITLE="Editing Mode">
<input type=checkbox name="switchMode" onclick="setMode(switchMode.checked)">
View source
</div>
</div>
<!-- The box where we type-->
<IFRAME class="mytext" width="675" ID="mytext" height="250">
</IFRAME>
<SCRIPT>
<!--
mytext.document.open();
mytext.document.write(bodyTag);
alert("1");
mytext.document.close();
alert("2");
mytext.document.designMode="On";
// -->
</SCRIPT>
<script SRC="/Editor1/compose.js?169" LANGUAGE="javascript"></script>
<br><br>
<table border="1" cellspacing="1" width="675">
<tr>
<td width="337" valign="top" align="right"><input type="submit" value="Submit" name="submit">
</td>
<td width="338" valign="top" align="left"><input type="reset" value="Reset Fields" name="reset"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
|
|
|
|
|
hi,
a question:
where can i get a tutorial like this about the rich text editor?
can you give me an url?
i have 4 weeks, then i must have a page like this....
thx
(mail: slin@slin-online.de)
|
|
|
|
|