Windows/Windows-classic-samples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Windows-classic-samples/Samples/Win7Samples/web/ie6/htmleditor/HTML_editor.hta
Raten 12d6772ad2 new
2025-11-28 00:35:46 +09:00

516 lines
16 KiB
HTML
Raw Blame History

<HTML xmlns:mytb
xmlns:mymenu
xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<?IMPORT namespace="mytb" implementation="toolbar.htc">
<?IMPORT namespace="mymenu" implementation="menu.htc">
<?IMPORT namespace="t" implementation="#default#time2">
<style>
.time { behavior: url(#default#time2) }
</style>
<TITLE>HTML Editor</TITLE>
<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="HTML Editor"
BORDER="thick"
BORDERSTYLE="raised"
CAPTION="yes"
ICON="netpad.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
VERSION="1.0"
WINDOWSTATE="normal"/>
<script>
window.onload=doInit
//sInitColor is a global variable. It holds the value of the selected color in the color dialog box when it displays
var sInitColor = null;
//sPersistValue holds the value of the saved innerHTML
var sPersistValue
function doInit(){
for (i=0; i<document.all.length; i++)
//ensure that all document elements except the content editable DIV are unselectable
document.all(i).unselectable = "on";
oDiv.unselectable = "off";
//clear any text in the Document window and set the focus
oDiv.innerHTML="";
oDiv.focus();
//call routines to populate the drop-down list boxes on the toolbar
getSystemFonts();
getBlockFormats();
window.resizeTo(730,560);
goContext();
}
//This function works for all of the command identifiers used in this page
function callFormatting(sFormatString){
document.execCommand(sFormatString);
}
//Fonts routines
//getSystemFonts uses the dialog helper object to return an array of all of the fonts on the user's system, then populates a drop-down listbox in the toolbar with the array elements
function getSystemFonts(){
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oDropDown = oToolBar.createDropDownListAt("4");
oDropDown.setAttribute("id","FontNameList");
for (i = 1;i < dlgHelper.fonts.count;i++){
fArray[i] = dlgHelper.fonts(i);
var aOptions = oDropDown.getOptions();
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray[i];
oOption.Value = i;
}
//attaching the onchange event is necessary in order to detect when a user changes the value in the drop-down listbox
oDropDown.setAttribute("onchange",ChangeFont);
}
//changeFontSize detects the value of the item in the drop-down listbox and applies the value to the font of the selected text
function changeFontSize(){
var sSelected=oToolBar.getItem(6).getOptions().item(oToolBar.getItem(6).getAttribute("selectedIndex"));
document.execCommand("FontSize", false, sSelected.value);
}
//changeFont detects the value of the item in the drop-down listbox and applies the value to the font of the selected text
function ChangeFont(){
var sSelected=oToolBar.getItem(4).getOptions().item(oToolBar.getItem(4).getAttribute("selectedIndex"));
document.execCommand("FontName", false, sSelected.text);
}
//BlockFormats routines
//getBlockFormats uses the dialog helper object to return an array of all of the block formats on the user's system, then populates a drop-down listbox in the toolbar with the array elements
function getBlockFormats(){
var a=dlgHelper.blockFormats.count;
var fArray = new Array();
var oDropDown = oToolBar.createDropDownListAt("5");
oDropDown.setAttribute("id","FormatList");
for (i = 1;i < dlgHelper.blockFormats.count;i++)
{
fArray[i] = dlgHelper.blockFormats(i);
var aOptions = oDropDown.getOptions();
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray[i];
oOption.Value = i;
}
//attach the onchange event
oDropDown.setAttribute("onchange",ChangeFormat);
}
//ChangeFormat detects the value of the item in the drop-down listbox and applies the value to the font of the selected text
function ChangeFormat(){
var sSelected=oToolBar.getItem(5).getOptions().item(oToolBar.getItem(5).getAttribute("selectedIndex"));
document.execCommand("FormatBlock", false, sSelected.text);
}
//callColorDlg uses the dialog helper object's ChooseColorDlg method to open the color dialog box, then changes the font or back color of the selected text
function callColorDlg(sColorType){
if (sInitColor == null)
//display color dialog box
var sColor = dlgHelper.ChooseColorDlg();
else
var sColor = dlgHelper.ChooseColorDlg(sInitColor);
//change decimal to hex
sColor = sColor.toString(16);
//add extra zeroes if hex number is less than 6 digits
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
//change color of the selected text
document.execCommand(sColorType, false, sColor);
sInitColor = sColor;
oDiv.focus();
}
//VerticalMode changes the orientation of the text from left to right to top to bottom
function VerticalMode(){
if (oDiv.style.writingMode == 'tb-rl')
oDiv.style.writingMode = 'lr-tb';
else
oDiv.style.writingMode = 'tb-rl';
}
//SaveDocument uses the common dialog box object to display the save as dialog, then writes a textstream object from the value of the div's innerHTML property
function SaveDocument(){
//Setting CancelError to true and using try/catch allows the user to click cancel on the save as dialog without causing a script error
cDialog.CancelError=true;
try{
cDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt"
cDialog.ShowSave();
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.CreateTextFile(cDialog.filename, true);
f.write(oDiv.innerHTML);
f.Close();
sPersistValue=oDiv.innerHTML;}
catch(e){
var sCancel="true";
return sCancel;}
oDiv.focus();
}
//LoadDocument uses the common dialog box object to display the open dialog box, then reads the file and displays its contents in the div
function LoadDocument(){
//Setting CancelError to true and using try/catch allows the user to click cancel on the save as dialog without causing a script error
cDialog.CancelError=true;
try{
var answer = checkForSave();
//The user has clicked yes in the modal dialog box called in the checkForSave function
if (answer) {var sCancel = SaveDocument();
//The user has clicked cancel in the save as dialog box; exit function
if (sCancel) return;
cDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt"
cDialog.ShowOpen();
var ForReading = 1;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(cDialog.filename, ForReading);
var r = f.ReadAll();
f.close();
oDiv.innerHTML=r;
//This variable is used in the checkForSave function to see if there is new content in the div
sPersistValue=oDiv.innerHTML;
}
//The user has clicked no in the modal dialog box called in the checkForSave function
if (answer==false)
{cDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt"
cDialog.ShowOpen();
var ForReading = 1;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(cDialog.filename, ForReading);
var r = f.ReadAll();
f.close();
oDiv.innerHTML=r;
sPersistValue=oDiv.innerHTML;
}
oDiv.focus();
}
catch(e){
var sCancel="true";
return sCancel;}
}
//NewDocument creates a new "document" by clearing the content of the div. If there is any new content in the div, the user is asked whether or not to save
function NewDocument(){
var answer = checkForSave();
if (answer) {var sCancel = SaveDocument();
if (sCancel) return;
oDiv.innerHTML="";}
if (answer==false)
oDiv.innerHTML="";
oDiv.focus();
}
//This function checks to see if the div has new text, then displays a modal dialog box if appropriate
function checkForSave()
{
if ((oDiv.innerHTML!=sPersistValue)&&(oDiv.innerHTML !=""))
var checkSave=showModalDialog('dcheckForSave.htm','','dialogHeight:125px;dialogWidth:250px;scroll:off');
else
var checkSave=false;
return checkSave;
}
//this function is used to call other functions when the user clicks on a menu item. These are the same functions that are called by the toolbar buttons.
function CallMenuFunction(){
var menuChoice = event.result;
switch(menuChoice){
case "open":
LoadDocument();
break;
case "new":
NewDocument();
break;
case "save":
SaveDocument();
break;
case "exit":
window.close();
break;
case "cut":
callFormatting('Cut');
break;
case "copy":
callFormatting('Copy');
break;
case "paste":
callFormatting('Paste');
break;
case "bold":
callFormatting('Bold');
break;
case "underline":
callFormatting('Underline');
break;
case "italic":
callFormatting('Italic');
break;
case "fontColor":
callColorDlg('ForeColor');
break;
case "highlight":
callColorDlg('BackColor');
break;
case "about":
goContext();
break;
default:
break;
}
}
//These functions create and display the splash screen and are used when the application is launched (called by onInit function) as well as when the user clicks help/about on the menu
var oPopup = window.createPopup()
function goContext()
{
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = oContext.innerHTML;
oPopup.show(175, 125, 400, 300, document.body);
document.body.onmousedown = oPopup.hide;
}
</script>
</HEAD>
<BODY STYLE="overflow:hidden; margin:0px" >
<!--Create the Dialog Helper Object-->
<OBJECT ID=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" WIDTH="0px" HEIGHT="0px"></OBJECT>
<!-- Create the licensing object for the common dialog activex control -->
<OBJECT CLASSID="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
<PARAM NAME="LPKPath" VALUE="comdlg.lpk">
</OBJECT>
<!--Create the Common Dialog Box activex control-->
<OBJECT ID="cDialog" WIDTH="0px" HEIGHT="0px"
CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB"
CODEBASE="http://activex.microsoft.com/controls/vb5/comdlg32.cab">
</OBJECT>
<t:animate dur="5" onend="oPopup.hide();"/>
<DIV ID="oContext" STYLE="display:none">
<DIV STYLE="position:absolute; top:0; left:0; width:400px; height:300px; border:1px solid black; background:#eeeeee; ">
<DIV STYLE="padding:20px; background:white; border-bottom:5px solid #cccccc">
<img src="htmledlogo.gif" align="absmiddle"></div>
<DIV STYLE="padding:20px; font-size:8pt; line-height:1.5em; font-family:verdana; color:black;">This HTML Editor is created entirely with DHTML technologies and is provided as an example for developers using Internet Explorer 6.
<br>
<br>
<br>
<br><center>
&#169;2001 Microsoft Corporation. All rights reserved. </center>
</DIV>
</DIV>
</DIV>
<DIV ID="oContainer" STYLE="background-color:threedface; border:1px solid #cccccc; position:relative; height:100%; top:0;">
<mymenu:menu id="File" backcolor="threedface" onsubmenu_click="CallMenuFunction();">File
<mymenu:menu id="new" backcolor="threedface">New</mymenu:menu>
<mymenu:menu id="open" backcolor="threedface">Open</mymenu:menu>
<mymenu:menu id="save" backcolor="threedface">Save</mymenu:menu>
<mymenu:menu id="exit" backcolor="threedface">Exit</mymenu:menu>
</mymenu:menu>
<mymenu:menu id="Edit" backcolor="threedface" onsubmenu_click="CallMenuFunction();">Edit
<mymenu:menu id="cut" backcolor="threedface">Cut Ctrl+X</mymenu:menu>
<mymenu:menu id="copy" backcolor="threedface">Copy Ctrl+C</mymenu:menu>
<mymenu:menu id="paste" backcolor="threedface">Paste Ctrl+V</mymenu:menu>
</mymenu:menu>
<mymenu:menu id="Format" backcolor="threedface" onsubmenu_click="CallMenuFunction();">Format
<mymenu:menu id="bold" backcolor="threedface">Bold</mymenu:menu>
<mymenu:menu id="italic" backcolor="threedface">Italic</mymenu:menu>
<mymenu:menu id="underline" backcolor="threedface">Underline</mymenu:menu>
<mymenu:menu id="fontColor" backcolor="threedface">Font Color</mymenu:menu>
<mymenu:menu id="highlight" backcolor="threedface">HighLight</mymenu:menu>
</mymenu:menu>
<mymenu:menu id="Help" backcolor="threedface" onsubmenu_click="CallMenuFunction();">Help
<mymenu:menu id="about" backcolor="threedface">About</mymenu:menu>
</mymenu:menu>
<nobr>
<mytb:TOOLBAR STYLE="display:inline; width:100%" ID="oToolBar"
>
<!--New document button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_new.gif"
title="New Document"
onclick="NewDocument();"/>
<!--Open document button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_open.gif"
title="Open Document"
onclick="LoadDocument();" />
<!--Save document button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_save.gif"
title="Save Document"
onclick="SaveDocument();"/>
<mytb:TOOLBARSEPARATOR />
<!-- Font size list-->
<mytb:TOOLBARDROPDOWNLIST id="oFontSize" onchange="changeFontSize();">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4 selected>4
<option value=5 >5
<option value=6>6
<option value=7>7
</mytb:TOOLBARDROPDOWNLIST>
<mytb:TOOLBARSEPARATOR/>
<!--Bold button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_bold.gif"
title="Bold"
onclick="callFormatting('Bold');"/>
<!--Italic button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_italic.gif"
title="Italic"
onclick="callFormatting('Italic');"/>
<!--Underline button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_underline.gif"
title="Underline"
onclick="callFormatting('Underline');"/>
<!--Strikethrough button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_form-strike.gif"
title="StrikeThrough"
onclick="callFormatting('StrikeThrough');"/>
<mytb:TOOLBARSEPARATOR/>
<!--Superscript button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_superscript.gif"
title="SuperScript"
onclick="callFormatting('SuperScript');"/>
<!--Subscript button -->
<mytb:TOOLBARBUTTON IMAGEURL="UI_subscript.gif"
title="SubScript"
onclick="callFormatting('SubScript');"/>
</mytb:TOOLBAR>
</nobr>
<nobr>
<mytb:TOOLBAR STYLE="display:inline; width:100%" ID="oToolBar2"
>
<!--Cut button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_tool-cut.gif"
title="Cut"
onclick="callFormatting('Cut');"/>
<!--Copy button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_form-copy.gif"
title="Copy"
onclick="callFormatting('Copy');"/>
<!--Paste button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_paste.gif"
title="Paste"
onclick="callFormatting('Paste');"/>
<mytb:TOOLBARSEPARATOR/>
<!--Undo button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_undo.gif"
title="Undo"
onclick="callFormatting('Undo');"/>
<!--Redo button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_redo.gif"
title="Redo"
onclick="callFormatting('Redo');"/>
<mytb:TOOLBARSEPARATOR/>
<!--Numbered list button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_numberlist.gif"
title="InsertOrderedList"
onclick="callFormatting('InsertOrderedList');"/>
<!--Bulleted list button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_bulletlist.gif"
title="InsertUnorderedList"
onclick="callFormatting('InsertUnorderedList');"/>
<!--Outdent button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_outdent.gif"
title="Outdent"
onclick="callFormatting('Outdent');"/>
<!--Indent button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_indent.gif"
title="Indent"
onclick="callFormatting('Indent');"/>
<mytb:TOOLBARSEPARATOR/>
<!--Left alignment button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_leftalign.gif"
title="JustifyLeft"
onclick="callFormatting('JustifyLeft');"/>
<!--Center alignment button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_centeralign.gif"
title="JustifyCenter"
onclick="callFormatting('JustifyCenter');"/>
<!--Right alignment button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_rightalign.gif"
title="JustifyRight"
onclick="callFormatting('JustifyRight');"/>
<mytb:TOOLBARSEPARATOR/>
<!--Vertical alignment button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_tool_vertical.gif"
title="Vertical Alignment"
onclick="VerticalMode();"/>
<mytb:TOOLBARSEPARATOR/>
<!--Font Color button-->
<mytb:TOOLBARBUTTON IMAGEURL="UI_fontcolor.gif"
title="Font Color"
onclick="callColorDlg('ForeColor');"/>
<!--Background color button -->
<mytb:TOOLBARBUTTON IMAGEURL="UI_backcolor.gif"
title="HighLight"
onclick="callColorDlg('BackColor');"/>
</mytb:TOOLBAR>
</nobr>
<!--The content editable div-->
<DIV
ID=oDiv
CONTENTEDITABLE
STYLE="height:80%;background-color:white; overflow:auto; width:100%;">
</DIV>
</DIV>
</BODY>
</HTML>
Reference in New Issue View Git Blame Copy Permalink