|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
|
<title></title>
|
|
|
<script type="text/javascript" src="../internal.js"></script>
|
|
|
<style type="text/css">
|
|
|
.warp {width: 320px;height: 153px;margin-left:5px;padding: 20px 0 0 15px;position: relative;}
|
|
|
#url {width: 290px; margin-bottom: 2px; margin-left: -6px; margin-left: -2px\9;*margin-left:0;_margin-left:0; }
|
|
|
.format span{display: inline-block; width: 58px;text-align: center; zoom:1;}
|
|
|
table td{padding:5px 0;}
|
|
|
#align{width: 65px;height: 23px;line-height: 22px;}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="warp">
|
|
|
<table width="300" cellpadding="0" cellspacing="0">
|
|
|
<tr>
|
|
|
<td colspan="2" class="format">
|
|
|
<span><var id="lang_input_address"></var></span>
|
|
|
<input style="width:200px" id="url" type="text" value=""/>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2" class="format"><span><var id="lang_input_width"></var></span><input style="width:200px" type="text" id="width"/> px</td>
|
|
|
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2" class="format"><span><var id="lang_input_height"></var></span><input style="width:200px" type="text" id="height"/> px</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><span><var id="lang_input_isScroll"></var></span><input type="checkbox" id="scroll"/> </td>
|
|
|
<td><span><var id="lang_input_frameborder"></var></span><input type="checkbox" id="frameborder"/> </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td colspan="2"><span><var id="lang_input_alignMode"></var></span>
|
|
|
<select id="align">
|
|
|
<option value=""></option>
|
|
|
<option value="left"></option>
|
|
|
<option value="right"></option>
|
|
|
</select>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
var iframe = editor._iframe;
|
|
|
// 获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）中的 _iframe 属性值，存储在 iframe 变量中，这个 iframe 变量可能代表页面中的某个 iframe 元素，后续会基于它进行相关属性的获取和操作。
|
|
|
if (iframe) {
|
|
|
$G("url").value = iframe.getAttribute("src") || "";
|
|
|
// 如果 iframe 元素存在，通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'url' 的输入框元素，并将其 value 属性（文本框的值）设置为 iframe 元素的'src' 属性值（如果'src' 属性存在），如果'src' 属性不存在则设置为空字符串，目的是将 iframe 元素已有的链接地址显示在输入框中，方便用户查看或修改。
|
|
|
$G("width").value = iframe.getAttribute("width") || iframe.style.width.replace("px", "") || "";
|
|
|
// 同样获取 id 为 'width' 的输入框元素，将其 value 属性设置为 iframe 元素的 'width' 属性值（如果存在），如果不存在则尝试获取其样式（style）中的 'width' 属性值，并去除单位 'px'（通过 replace 方法）后作为输入框的值，如果都不存在则设置为空字符串，用于将 iframe 元素的宽度值显示在输入框中供用户操作。
|
|
|
$G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px", "") || "";
|
|
|
// 与设置宽度值类似，获取 id 为 'height' 的输入框元素，设置其 value 属性为 iframe 元素的 'height' 属性值（若有）或去除样式中 'height' 属性值的 'px' 单位后的内容（若样式中有），若都没有则为空字符串，将 iframe 元素的高度值显示在输入框中。
|
|
|
$G("scroll").checked = (iframe.getAttribute("scrolling") == "yes") ? true : false;
|
|
|
// 获取 id 为'scroll' 的复选框元素，根据 iframe 元素的'scrolling' 属性值是否为 'yes' 来设置复选框的选中状态（checked 属性），如果'scrolling' 属性值是 'yes' 则复选框选中（设置为 true），否则不选中（设置为 false），用于同步显示 iframe 元素滚动相关属性到复选框的选中状态。
|
|
|
$G("frameborder").checked = (iframe.getAttribute("frameborder") == "1") ? true : false;
|
|
|
// 获取 id 为 'frameborder' 的复选框元素，根据 iframe 元素的 'frameborder' 属性值是否为 '1' 来设置复选框的选中状态，若为 '1' 则选中（设置为 true），否则不选中（设置为 false），同步 iframe 元素边框相关属性到复选框的选中状态。
|
|
|
$G("align").value = iframe.align ? iframe.align : "";
|
|
|
// 获取 id 为 'align' 的元素（可能是下拉列表等用于选择对齐方式的元素），将其 value 属性设置为 iframe 元素的 'align' 属性值（如果存在），若不存在则设置为空字符串，同步 iframe 元素的对齐方式属性到对应的页面元素上。
|
|
|
}
|
|
|
function queding() {
|
|
|
var url = $G("url").value.replace(/^\s*|\s*$/ig, ""),
|
|
|
width = $G("width").value,
|
|
|
height = $G("height").value,
|
|
|
scroll = $G("scroll"),
|
|
|
frameborder = $G("frameborder"),
|
|
|
float = $G("align").value,
|
|
|
newIframe = editor.document.createElement("iframe"),
|
|
|
div;
|
|
|
// 定义一个名为 'queding'（可能表示确定操作的函数）的函数，在函数内部首先获取页面中各个相关元素的值或状态，如获取 id 为 'url' 的输入框去除首尾空白字符后的文本值（通过正则表达式替换空白字符），获取 id 为 'width' 和 'height' 的输入框的值，获取 id 为'scroll' 和 'frameborder' 的复选框元素本身（后续用于判断选中状态），获取 id 为 'align' 的元素的值（用于对齐方式相关操作），然后创建一个新的 iframe 元素（通过编辑器的 document 对象的 createElement 方法创建，editor 可能是富文本编辑器相关对象），并声明一个 div 变量（初始值为 undefined，后续会根据情况使用）。
|
|
|
if (!url) {
|
|
|
alert(lang.enterAddress);
|
|
|
return false;
|
|
|
}
|
|
|
// 如果获取到的 url 值为空（即用户没有输入相关地址），则弹出一个提示框（alert），提示内容为 lang.enterAddress（可能是通过语言包获取的提示用户输入地址的文本信息，具体依赖代码中 lang 对象的定义），并返回 false，阻止后续操作执行，起到输入合法性校验的作用。
|
|
|
newIframe.setAttribute("src", /http:\/\/|https:\/\//ig.test(url) ? url : "http://" + url);
|
|
|
// 为新创建的 iframe 元素设置'src' 属性值，如果输入的 url 值通过正则表达式检测（判断是否以 'http://' 或 'https://' 开头）符合网址格式则直接使用该 url 值作为'src' 属性值，否则在 url 前面拼接 'http://' 后作为'src' 属性值，确保设置的网址格式正确。
|
|
|
/^[1-9]+[.]?\d*$/g.test(width) ? newIframe.setAttribute("width", width) : "";
|
|
|
// 通过正则表达式判断输入的 width 值是否符合数字格式（以非 0 数字开头，后面可跟小数点和数字），如果符合则为新的 iframe 元素设置 'width' 属性值为该 width 值，否则不进行任何操作（通过三元表达式的短路特性实现），用于设置 iframe 元素的宽度属性，保证设置的值是合理的数字格式。
|
|
|
/^[1-9]+[.]?\d*$/g.test(height) ? newIframe.setAttribute("height", height) : "";
|
|
|
// 与设置宽度属性类似，通过正则表达式验证 height 值是否符合数字格式，符合则为新 iframe 元素设置 'height' 属性值为该 height 值，否则不操作，用于设置 iframe 元素的高度属性。
|
|
|
scroll.checked ? newIframe.setAttribute("scrolling", "yes") : newIframe.setAttribute("scrolling", "no");
|
|
|
// 根据 id 为'scroll' 的复选框的选中状态（checked 属性）来为新 iframe 元素设置'scrolling' 属性值，如果复选框选中则设置为 'yes'，表示开启滚动，否则设置为 'no'，表示关闭滚动。
|
|
|
frameborder.checked ? newIframe.setAttribute("frameborder", "1", 0) : newIframe.setAttribute("frameborder", "0", 0);
|
|
|
// 根据 id 为 'frameborder' 的复选框的选中状态来为新 iframe 元素设置 'frameborder' 属性值，如果选中则设置为 '1'（可能表示显示边框），否则设置为 '0'（可能表示不显示边框），这里后面两个参数 '0' 的具体作用可能依赖于 setAttribute 函数的具体实现（可能是一些浏览器兼容性相关的额外参数等情况）。
|
|
|
float ? newIframe.setAttribute("align", float) : newIframe.setAttribute("align", "");
|
|
|
// 如果获取到的 float 值（即对齐方式相关的值）存在（不为空字符串等情况），则为新 iframe 元素设置 'align' 属性值为该 float 值，用于设置对齐方式，否则设置为空字符串，表示不设置特定的对齐方式。
|
|
|
if (iframe) {
|
|
|
iframe.parentNode.insertBefore(newIframe, iframe);
|
|
|
domUtils.remove(iframe);
|
|
|
} else {
|
|
|
div = editor.document.createElement("div");
|
|
|
div.appendChild(newIframe);
|
|
|
editor.execCommand("inserthtml", div.innerHTML);
|
|
|
}
|
|
|
// 如果原来的 iframe 元素（之前获取的那个）存在，则通过其父节点（parentNode）的 insertBefore 方法将新创建的 iframe 元素插入到原来 iframe 元素的前面，然后通过 domUtils.remove 函数（可能是自定义的移除 DOM 元素的函数）移除原来的 iframe 元素，实现替换原来的 iframe 元素的操作；如果原来的 iframe 元素不存在，则创建一个新的 div 元素，将新创建的 iframe 元素添加到 div 元素内部（通过 appendChild 方法），然后通过编辑器的 execCommand 方法（可能是执行特定编辑命令的方法）将 div 元素的 innerHTML（包含新 iframe 元素的 HTML 代码）插入到编辑器内容中，实现添加新 iframe 元素的操作。
|
|
|
editor._iframe = null;
|
|
|
dialog.close();
|
|
|
// 将编辑器的 _iframe 属性设置为 null（可能是表示当前没有正在操作的 iframe 元素了等相关业务逻辑），然后关闭对话框（dialog，可能是页面上弹出的用于操作的对话框，具体关闭操作依赖 dialog 对象的实现），完成整个操作流程并关闭相关界面。
|
|
|
}
|
|
|
dialog.onok = queding;
|
|
|
// 将对话框（dialog）的 'onok' 事件（可能表示用户点击确定按钮的事件）绑定到 'queding' 函数上，当用户在对话框中点击确定按钮时，就会执行 'queding' 函数内的一系列操作，实现相应的功能逻辑。
|
|
|
$G("url").onkeydown = function (evt) {
|
|
|
evt = evt || event;
|
|
|
if (evt.keyCode == 13) {
|
|
|
queding();
|
|
|
}
|
|
|
};
|
|
|
// 为页面中 id 为 'url' 的输入框元素绑定 'onkeydown' 键盘按下事件监听器，当有键盘按键按下时，首先处理不同浏览器获取事件对象的兼容性问题（evt = evt || event，兼容 IE 和其他标准浏览器获取事件对象的方式），然后判断按下的按键的键码（keyCode）是否为 13（回车键的键码），如果是回车键按下，则调用 'queding' 函数，实现用户在输入框中按下回车键时等同于点击确定按钮的功能，方便用户操作。
|
|
|
$focus($G("url"));
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
