|
|
<!DOCTYPE html>
|
|
|
<!-- 文档类型声明，表明这是一个遵循HTML相关标准规范的HTML文档 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<!-- 页面标题，目前为空，后续可根据实际需求设置具体显示的标题内容 -->
|
|
|
<title></title>
|
|
|
<!-- 引入外部的JavaScript文件，路径为相对路径的../internal.js，通常这个文件包含了页面通用的一些脚本逻辑 -->
|
|
|
<script type="text/javascript" src="../internal.js"></script>
|
|
|
<style type="text/css">
|
|
|
/* 定义名为.section的类选择器样式，用于设置应用了该类的元素的样式 */
|
|
|
.section {
|
|
|
/* 设置元素内文本水平居中对齐 */
|
|
|
text-align: center;
|
|
|
/* 设置元素的上外边距为10px，拉开与上方元素的距离 */
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
/* 对应用了.section类下的input元素设置样式 */
|
|
|
.section input {
|
|
|
/* 设置元素的左外边距为5px，拉开与左边元素的距离 */
|
|
|
margin-left: 5px;
|
|
|
/* 设置元素的宽度为70px，限定输入框等这类元素的宽度 */
|
|
|
width: 70px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 创建一个应用了.section类的div元素，作为页面中的一个内容区域，用于放置相关元素 -->
|
|
|
<div class="section">
|
|
|
<!-- 创建一个span元素，其内部文本内容通过id为lang_tdBkColor的变量来动态设置（一般会通过脚本在运行时替换成实际文本），可能用于提示相关功能等 -->
|
|
|
<span><var id="lang_tdBkColor"></var></span>
|
|
|
<!-- 创建一个文本框类型的input元素，id为J_tone，可能用于输入或显示与表格单元格背景颜色相关的值等 -->
|
|
|
<input type="text" id="J_tone" />
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
// 获取页面中id为J_tone的元素，通常用于后续操作中对这个特定的输入框元素进行交互逻辑处理
|
|
|
var tone = $G("J_tone"),
|
|
|
// 创建一个UE.ui.ColorPicker实例，用于弹出颜色选择器，传入编辑器对象（这里的editor应该是外部定义好的编辑器相关对象），方便用户选择颜色
|
|
|
colorPiker = new UE.ui.ColorPicker({
|
|
|
editor: editor
|
|
|
}),
|
|
|
// 创建一个UE.ui.Popup实例，用于弹出一个包含颜色选择器的浮窗之类的界面，传入编辑器对象，并将前面创建的颜色选择器作为其内容部分
|
|
|
colorPop = new UE.ui.Popup({
|
|
|
editor: editor,
|
|
|
content: colorPiker
|
|
|
});
|
|
|
// 给tone元素（也就是id为J_tone的输入框）绑定点击事件处理函数，当点击该元素时，显示颜色选择器的弹出浮窗，并定位到该输入框位置
|
|
|
domUtils.on(tone, "click", function () {
|
|
|
colorPop.showAnchor(tone);
|
|
|
});
|
|
|
// 给document文档对象绑定鼠标按下事件处理函数，当在页面任意位置点击鼠标时，隐藏颜色选择器的弹出浮窗，避免其一直显示影响操作
|
|
|
domUtils.on(document, 'mousedown', function () {
|
|
|
colorPop.hide();
|
|
|
});
|
|
|
// 给颜色选择器添加"pickcolor"事件的监听器，当用户在颜色选择器中选择了颜色后，将选择的颜色值设置到tone元素（输入框）的value属性中，也就是显示选择的颜色，并隐藏颜色选择器弹出浮窗
|
|
|
colorPiker.addListener("pickcolor", function () {
|
|
|
tone.value = arguments[1];
|
|
|
colorPop.hide();
|
|
|
});
|
|
|
// 给颜色选择器添加"picknocolor"事件的监听器，当用户在颜色选择器中取消选择颜色（比如点击了取消按钮之类的操作）时，将tone元素（输入框）的value属性设置为空字符串，也就是清除显示的颜色，并隐藏颜色选择器弹出浮窗
|
|
|
colorPiker.addListener("picknocolor", function () {
|
|
|
tone.value = "";
|
|
|
colorPop.hide();
|
|
|
});
|
|
|
// 给dialog对象（可能是对话框相关对象）的onok属性设置一个函数，当点击对话框的确定按钮时，执行编辑器（editor对象）的"edittd"命令，传入tone元素（输入框）当前的值作为参数，可能用于将设置的颜色应用到相关表格单元格等操作中
|
|
|
dialog.onok = function () {
|
|
|
editor.execCommand("edittd", tone.value);
|
|
|
};
|
|
|
|
|
|
// 获取编辑器（editor对象）中当前选择内容的起始位置（这里的具体实现依赖于编辑器相关的API，这个start值后续用于查找所在的单元格等）
|
|
|
var start = editor.selection.getStart(),
|
|
|
// 通过查找起始位置所在的父元素，按照指定的标签名（["td", "th"]表示查找td或th标签），并设置一些查找条件（true可能表示严格查找等相关条件，具体依赖domUtils相关函数的实现），获取所在的单元格元素（如果存在的话），可能是用于获取当前选中的表格单元格，后续可以获取其样式等信息
|
|
|
cell = start && domUtils.findParentByTagName(start, ["td", "th"], true);
|
|
|
// 如果找到了对应的单元格元素（cell不为空）
|
|
|
if (cell) {
|
|
|
// 获取该单元格的背景颜色样式值，通过调用domUtils的相关函数，传入单元格元素和要获取的样式属性名（'background-color'表示背景颜色）来获取
|
|
|
var color = domUtils.getComputedStyle(cell, 'background-color');
|
|
|
// 通过正则表达式判断获取到的颜色值是否是以'#'开头（通常HTML中颜色值以'#'开头表示十六进制颜色代码等格式），如果是则执行下面的操作
|
|
|
if (/^#/.test(color)) {
|
|
|
// 将获取到的颜色值设置到tone元素（输入框）的value属性中，也就是将单元格当前的背景颜色显示在输入框中，方便用户查看或基于此进行修改等操作
|
|
|
tone.value = color
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
