📄 insert_image.html

📁 本程序基于 asp.net 2.0 +sql server 2
💻 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 + -