?? insert_image.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>圖像地址</title>
<script defer>
//如果捕捉到ESC鍵，則關閉窗口
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
/*
what is textrange?
使用textrange對象可以在元素中檢索和修改文字，在文本中根據指定的字符串定位，然后執行相應的命令
使用creatTextRange方法在一個元素上創建一個textrange對象，然后是哦也能夠moveToElementText方法
modify文本。*/
//Moves the text range so that the start and end positions of the range encompass the text in the given element.
//Creates a TextRange object for the element.
function _getTextRange(elm) {
var r = elm.parentTextEdit.createTextRange();
r.moveToElementText(elm);
return r;
}
//窗口的錯誤捕捉由HandelError函數完成
window.onerror = HandleError
//處理錯誤，用彈出窗口顯示出錯的信息和所在的行，然后關閉 inserimage 窗口
function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + "\n\n"
+ "Error: " + line + "\n" + message;
alert(str);
window.close();
return true;
}
//初始化函數
function Init() {
var elmSelectedImage;
var htmlSelectionControl = "Control";
//dialogArguments是接收從父窗口傳遞過來的參數，也就是上個頁面中showModalDialog中的第二個參數
// Retrieves the variable or array of variables passed into the modal dialog window.
var globalDoc = window.dialogArguments;
//Represents the active selection, which is a highlighted block of text,
//and/or other elements in the document on which a user or a script can carry out some action.
var grngMaster = globalDoc.selection.createRange();
// event handlers
//當用戶按下鍵盤時關聯事件到_CloseOnEsc;
document.body.onkeypress = _CloseOnEsc;
//確定按鈕關聯道btnOKClick事件
btnOK.onclick = new Function("btnOKClick()");
txtFileName.fImageLoaded = false; //如果txtFileName中已填入圖片名，則為true
txtFileName.intImageWidth = 0;
txtFileName.intImageHeight = 0;
//如果父頁的當前選擇是一個Control，且只選中了一個控件(length==1)來決定的
if (globalDoc.selection.type == htmlSelectionControl) {
if (grngMaster.length == 1) {
elmSelectedImage = grngMaster.item(0);//取得當前選定的control
//如果在父頁中當前的選擇是一副圖片，也就是tagName是IMG，則給彈出窗口中的各框賦值
if (elmSelectedImage.tagName == "IMG") {
txtFileName.fImageLoaded = true;
if (elmSelectedImage.src) {
txtFileName.value = elmSelectedImage.src.replace(/^[^*]*(\*\*\*)/, "$1"); // fix placeholder src values that editor converted to abs paths
txtFileName.intImageHeight = elmSelectedImage.height;
txtFileName.intImageWidth = elmSelectedImage.width;
txtVertical.value = elmSelectedImage.vspace;
txtHorizontal.value = elmSelectedImage.hspace;
txtBorder.value = elmSelectedImage.border;
txtAltText.value = elmSelectedImage.alt;
selAlignment.value = elmSelectedImage.align;
}
}
//賦值完畢
}
}
//給txtFileName賦值，并取得焦點
txtFileName.value = txtFileName.value || "http://";
txtFileName.focus();
}
//檢測textbox中輸入的是否有效的數字
function _isValidNumber(txtBox) {
var val = parseInt(txtBox);
if (isNaN(val) || val < 0 || val > 999) { return false; }
return true;
}
//按下確定后執行的函數
function btnOKClick() {
var elmImage;
var intAlignment;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.createRange();
//錯誤檢查，檢查txtFileName中是否有內容，檢查水平、豎直、邊框中是否為數字
//如果有錯誤，則彈出alert后退出
if (!txtFileName.value || txtFileName.value == "http://") {
alert("Image URL must be specified.");
txtFileName.focus();
return;
}
if (txtHorizontal.value && !_isValidNumber(txtHorizontal.value)) {
alert("Horizontal spacing must be a number between 0 and 999.");
txtHorizontal.focus();
return;
}
if (txtBorder.value && !_isValidNumber(txtBorder.value)) {
alert("Border thickness must be a number between 0 and 999.");
txtBorder.focus();
return;
}
if (txtVertical.value && !_isValidNumber(txtVertical.value)) {
alert("Vertical spacing must be a number between 0 and 999.");
txtVertical.focus();
return;
}
// 刪除選定的內容，替換為圖片
if (globalDoc.selection.type == htmlSelectionControl && !txtFileName.fImageLoaded) {
grngMaster.execCommand('Delete');
grngMaster = globalDoc.selection.createRange();
}
idstr = "\" id=\"556e"; // new image creation ID
if (!txtFileName.fImageLoaded)
{
grngMaster.execCommand("InsertImage", false, idstr);
elmImage = globalDoc.all['556e'];
elmImage.removeAttribute("id");
elmImage.removeAttribute("src");
grngMaster.moveStart("character", -1);
}
else
{
elmImage = grngMaster.item(0);
if (elmImage.src != txtFileName.value) {
grngMaster.execCommand('Delete');
grngMaster = globalDoc.selection.createRange();
grngMaster.execCommand("InsertImage", false, idstr);
elmImage = globalDoc.all['556e'];
elmImage.removeAttribute("id");
elmImage.removeAttribute("src");
grngMaster.moveStart("character", -1);
txtFileName.fImageLoaded = false;
}
grngMaster = _getTextRange(elmImage);
}
if (txtFileName.fImageLoaded) {
elmImage.style.width = txtFileName.intImageWidth;
elmImage.style.height = txtFileName.intImageHeight;
}
if (txtFileName.value.length > 2040) {
txtFileName.value = txtFileName.value.substring(0,2040);
}
//圖像的源地址就是txtFileName中的文本
elmImage.src = txtFileName.value;
//水平、豎直方向、邊框線 這三個的值，先parseInt為整形 ,取得alt 圖片說明文字，取得align對齊方式
//parese----IntParses the string parameter and converts it to an integer value.
if (txtHorizontal.value != "") { elmImage.hspace = parseInt(txtHorizontal.value); }
else { elmImage.hspace = 0; }
if (txtVertical.value != "") { elmImage.vspace = parseInt(txtVertical.value); }
else { elmImage.vspace = 0; }
elmImage.alt = txtAltText.value;
if (txtBorder.value != "") { elmImage.border = parseInt(txtBorder.value); }
else { elmImage.border = 0; }
elmImage.align = selAlignment.value;
//移動插入點到當前選擇范圍的開始或者末尾，false為末尾
grngMaster.collapse(false);
grngMaster.select();
window.close();
}
</script>
</head>
<body id="bdy" onload="Init()" style="background-position: 0% 0%; color: windowtext; background-image:none; background-repeat:repeat; background-attachment:scroll" scroll="no">
<div id="divFileName" style="left: 0.98em; width: 7em; top: 1.21em; height: 1.21em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
圖像地址:</div>
<input id="txtFileName" style="left: 8.54em; width: 21.5em; top: 1.06em; height: 2.12em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" onfocus="select()" tabindex="10" name="T1" size="20"/>
<div id="divAltText" style="left: 0.98em; width: 6.58em; top: 4.1em; height: 1.21em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
說明:</div>
<input id="txtAltText" style="left: 8.54em; width: 21.5em; top: 3.8em; height: 2.12em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" onfocus="select()" tabindex="15" name="T2" size="20"/>
<fieldset id="fldLayout" style="left: 10px; width: 188px; position: absolute; top: 78px; height: 86px; font-family: MS Shell Dlg; font-size: 8pt">
<legend id="lgdLayout">布局</legend>
</fieldset>
<fieldset id="fldSpacing" style="left: 208; width: 205px; top: 77; height: 87px; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
<legend id="lgdSpacing">Spacing</legend>
</fieldset>
<div id="divAlign" style="left: 3.13em; width: 4.76em; top: 9.21em; height: 1.21em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
對齊:</div>
<select id="selAlignment" style="left: 10.36em; width: 6.72em; top: 8.82em; height: 1.21em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" tabindex="20" size="1" name="D1">
<option id="optNotSet" value="">未設置</option>
<option id="optLeft" value="left">左對齊</option>
<option id="optRight" value="right">右對齊</option>
<option id="optTexttop" value="textTop">文本上方</option>
<option id="optAbsMiddle" value="absMiddle">絕對居中</option>
<option id="optBaseline" value="baseline" selected>基線</option>
<option id="optAbsBottom" value="absBottom">絕對底部</option>
<option id="optBottom" value="bottom">底</option>
<option id="optMiddle" value="middle">中</option>
<option id="optTop" value="top">頂</option>
</select>
<div id="divHoriz" style="left: 219px; width: 61px; top: 100px; height: 19px; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
<span style="font-size: 9pt">
水平方向</span></div>
<input id="txtHorizontal" style="left: 286px; ime-mode: disabled; width: 109px; top: 97; height: 2.12em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" onfocus="select()" tabindex="25" maxlength="3" size="3" name="T3"/>
<div id="divBorder" style="left: 1.82em; width: 8.12em; top: 12.01em; height: 1.21em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
邊框線粗細:</div>
<input id="txtBorder" style="left: 10.36em; ime-mode: disabled; width: 6.72em; top: 11.55em; height: 2.12em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" onfocus="select()" tabindex="21" maxlength="3" size="3" name="T4"/>
<div id="divVert" style="left: 20.11em; width: 5.34em; top: 12.2em; height: 1.33em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute">
<span style="font-size: 9pt">
豎直方向</span></div>
<input id="txtVertical" style="left: 286px; ime-mode: disabled; width: 110px; top: 127; height: 23px; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" onfocus="select()" tabindex="30" maxlength="3" size="3" name="T5"/>
<button id="btnOK" style="left: 31.36em; width: 7em; top: 1.06em; height: 2.2em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" tabindex="40" type="submit">
確定</button>
<button id="btnCancel" style="left: 31.36em; width: 7em; top: 3.65em; height: 2.2em; font-family: MS Shell Dlg; font-size: 8pt; position: absolute" onclick="window.close();" tabindex="45" type="reset">取消</button>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -