|
|
/**
|
|
|
* Created with JetBrains PhpStorm.
|
|
|
* User: xuheng
|
|
|
* Date: 12-8-8
|
|
|
* Time: 下午2:09
|
|
|
* To change this template use File | Settings | File Templates.
|
|
|
*/
|
|
|
|
|
|
// 创建一个自执行函数，用于封装相关变量和函数，避免全局变量污染，使得这些代码逻辑相对独立，内部定义的变量和函数不会直接暴露在全局作用域下，除非特意通过 `window` 对象进行挂载。
|
|
|
(function () {
|
|
|
// 获取编辑器对象（`editor`），并赋值给变量 `me`，推测 `editor` 是整个应用中与文本编辑相关的核心对象，包含了各种编辑操作的方法、属性等，后续通过它来执行诸如清除文档、应用模板等命令操作。
|
|
|
var me = editor,
|
|
|
// 通过 `$G` 函数（可能是自定义的用于获取页面元素的函数，根据传入的 `ID` 来获取对应的 DOM 元素）获取 `ID` 为 "preview" 的页面元素，并赋值给变量 `preview`，从名称推测这个元素可能用于展示模板的预览内容，比如显示模板对应的 HTML 代码呈现出来的样子。
|
|
|
preview = $G("preview"),
|
|
|
// 同样通过 `$G` 函数获取 `ID` 为 "preitem" 的页面元素，并赋值给变量 `preitem`，推测这个元素可能用于展示模板相关的可选择项，比如模板的缩略图、名称等列表形式的内容，方便用户进行选择操作。
|
|
|
preitem = $G("preitem"),
|
|
|
// 获取之前定义好的 `templates` 数组（应该是存储了多个模板信息的数组，每个元素包含模板的图片、标题、预览 HTML 代码以及完整 HTML 代码等属性），并赋值给变量 `tmps`，后续操作会基于这个数组来处理模板相关的逻辑。
|
|
|
tmps = templates,
|
|
|
// 定义变量 `currentTmp`，用于记录当前选中的模板对象，初始值为 `undefined`，在用户选择模板后会被赋值为具体的模板对象，方便后续在应用模板等操作中使用该模板的相关信息。
|
|
|
currentTmp;
|
|
|
|
|
|
// `initPre` 函数用于初始化模板选择区域的展示内容，通过循环遍历 `templates` 数组，构建每个模板对应的 HTML 代码片段，最终将拼接好的 HTML 代码设置为 `preitem` 元素的 `innerHTML`，实现将所有模板以可视化的形式展示出来供用户选择。
|
|
|
var initPre = function () {
|
|
|
var str = "";
|
|
|
// 循环遍历 `templates` 数组，`i` 从 0 开始自增，每次循环获取当前索引对应的模板对象赋值给 `tmp`，并执行循环体中的代码逻辑。
|
|
|
for (var i = 0, tmp; tmp = tmps[i++]; ) {
|
|
|
// 构建每个模板对应的 HTML 代码片段，创建一个类名为 "preitem" 的 `div` 元素，添加点击事件监听器，点击时调用 `pre` 函数并传入当前模板的索引（`i`），在 `div` 元素内部添加一个 `img` 图片元素，设置其 `src` 属性为模板对应的图片路径（通过拼接 "images/" 和模板对象中的 `pre` 属性获取图片文件名来组成完整路径），
|
|
|
// 如果模板对象有 `title` 属性（即标题），则设置图片的 `alt` 和 `title` 属性为该标题内容，用于图片的提示信息展示以及在图片无法正常显示时的替代文本显示等情况。
|
|
|
str += '<div class="preitem" onclick="pre(' + i + ')"><img src="' + "images/" + tmp.pre + '" ' + (tmp.title? "alt=" + tmp.title + " title=" + tmp.title + "" : "") + '></div>';
|
|
|
}
|
|
|
// 将拼接好的包含所有模板展示项的 HTML 代码设置为 `preitem` 元素的 `innerHTML`，使得这些模板项在页面上显示出来，形成可点击选择的模板列表效果。
|
|
|
preitem.innerHTML = str;
|
|
|
};
|
|
|
|
|
|
// `pre` 函数用于处理模板的选择操作，根据传入的模板索引 `n`，获取对应的模板对象，设置为当前选中的模板（`currentTmp`），清除之前选中模板的样式（通过 `clearItem` 函数），然后设置当前选中模板的展示样式（背景色和边框样式），并将该模板的预览 HTML 代码（`preHtml` 属性）设置到 `preview` 元素中进行展示，让用户看到所选模板的大致样子。
|
|
|
var pre = function (n) {
|
|
|
var tmp = tmps[n - 1];
|
|
|
currentTmp = tmp;
|
|
|
clearItem();
|
|
|
domUtils.setStyles(preitem.childNodes[n - 1], {
|
|
|
"background-color": "lemonChiffon",
|
|
|
"border": "#ccc 1px solid"
|
|
|
});
|
|
|
preview.innerHTML = tmp.preHtml? tmp.preHtml : "";
|
|
|
};
|
|
|
|
|
|
// `clearItem` 函数用于清除所有模板选择项（`preitem` 元素下的子元素，即每个模板对应的展示 `div` 元素）的样式，将它们的背景色设置为空（即恢复默认背景色），边框设置为 1 像素宽的白色实线，用于在切换模板选择时，清除之前选中模板的突出显示样式，保持整体展示的一致性。
|
|
|
var clearItem = function () {
|
|
|
var items = preitem.children;
|
|
|
for (var i = 0, item; item = items[i++]; ) {
|
|
|
domUtils.setStyles(item, {
|
|
|
"background-color": "",
|
|
|
"border": "white 1px solid"
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 为对话框（`dialog`，可能是与模板选择、应用等操作相关的弹出式对话框，用于确认操作、显示提示信息等功能）的 `onok` 事件（通常是用户点击对话框中的确认按钮时触发的事件）添加事件处理函数，在该函数内实现根据用户是否勾选保存选项来决定是否清除文档内容，以及将当前选中模板的完整 HTML 代码应用到编辑器中的逻辑。
|
|
|
dialog.onok = function () {
|
|
|
// 通过 `$G` 函数获取 `ID` 为 "issave" 的复选框元素（推测这个复选框用于控制是否保存当前文档内容等相关操作），判断其是否未被勾选（`!$G("issave").checked`），如果未勾选，则调用 `editor` 对象的 `execCommand` 方法（用于执行编辑器相关的各种命令操作），传入 "cleardoc" 命令，执行清除文档内容的操作，可能是为了在应用新模板前先清空原有内容。
|
|
|
if (!$G("issave").checked) {
|
|
|
me.execCommand("cleardoc");
|
|
|
}
|
|
|
var obj = {
|
|
|
html: currentTmp && currentTmp.html
|
|
|
};
|
|
|
// 调用 `editor` 对象的 `execCommand` 方法，传入 "template" 命令以及包含当前选中模板完整 HTML 代码（通过 `currentTmp.html` 获取，如果 `currentTmp` 有值则取其 `html` 属性，否则为 `undefined`）的对象 `obj`，实现将所选模板的完整内容应用到编辑器中的操作，完成模板的应用功能。
|
|
|
me.execCommand("template", obj);
|
|
|
};
|
|
|
|
|
|
// 调用 `initPre` 函数，初始化模板选择区域的展示内容，使得页面加载时就能看到所有可供选择的模板列表。
|
|
|
initPre();
|
|
|
// 将 `pre` 函数挂载到 `window` 对象上，使其可以在全局作用域下被访问到（虽然不太推荐这样直接暴露函数到全局，但可能是为了方便在页面的 HTML 中通过内联 `onclick` 等方式调用该函数来处理模板选择操作），名称为 `pre`。
|
|
|
window.pre = pre;
|
|
|
// 初始时默认选中索引为 2 的模板（调用 `pre` 函数并传入 2），可能是为了在页面首次加载时展示一个默认的模板示例给用户，具体默认选择哪个模板可以根据实际需求调整此处的参数。
|
|
|
pre(2)
|
|
|
|
|
|
})(); |
