From 32d1ce6372db81264e3216d8df52602e62ed8414 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E9=92=B6=E9=92=B0?= <1158220572@qq.com> Date: Tue, 17 Dec 2024 10:13:18 +0800 Subject: [PATCH] cky --- public/index.html | 30 +- public2/ueditor/dialogs/anchor/anchor.html | 108 ++++--- .../dialogs/attachment/attachment.html | 38 ++- .../ueditor/dialogs/background/background.css | 292 +++++++++++++----- .../dialogs/background/background.html | 33 +- .../ueditor/dialogs/charts/chart.config.js | 44 ++- public2/ueditor/dialogs/charts/charts.css | 203 ++++++------ public2/ueditor/dialogs/charts/charts.html | 208 ++++++++----- public2/ueditor/dialogs/charts/charts.js | 3 +- public2/ueditor/dialogs/emotion/emotion.css | 188 +++++++++-- public2/ueditor/dialogs/emotion/emotion.html | 108 ++++--- public2/ueditor/dialogs/emotion/emotion.js | 186 ++++++----- public2/ueditor/dialogs/gmap/gmap.html | 119 ++++--- public2/ueditor/dialogs/help/help.css | 68 +++- public2/ueditor/dialogs/help/help.html | 166 +++++----- public2/ueditor/dialogs/help/help.js | 49 +-- public2/ueditor/dialogs/image/image.css | 29 +- public2/ueditor/dialogs/image/image.html | 115 +++++-- public2/ueditor/dialogs/image/image.js | 19 +- .../dialogs/insertframe/insertframe.html | 73 +++-- public2/ueditor/dialogs/internal.js | 104 ++++--- public2/ueditor/dialogs/link/link.html | 227 ++++++++------ 22 files changed, 1627 insertions(+), 783 deletions(-) diff --git a/public/index.html b/public/index.html index fe315e9..f0354ba 100644 --- a/public/index.html +++ b/public/index.html @@ -1,44 +1,58 @@ + + + + + + <%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统 <% if(htmlWebpackPlugin.options.isProd){ %> - + - + - + + + + + + + - + + - + - <% } %> + +
- + - + \ No newline at end of file diff --git a/public2/ueditor/dialogs/anchor/anchor.html b/public2/ueditor/dialogs/anchor/anchor.html index f277847..a285abc 100644 --- a/public2/ueditor/dialogs/anchor/anchor.html +++ b/public2/ueditor/dialogs/anchor/anchor.html @@ -1,40 +1,78 @@ + "http://www.w3.org/TR/html4/loose.dtd"> + - - - - - - -
- -
- - + + - + domUtils.preventDefault(evt) + } + }; + // 为anchorInput（即前面获取的input输入框）添加onkeydown事件监听器，当在输入框中按下键盘按键时触发该函数， + // 首先将传入的事件对象evt进行兼容处理（兼容不同浏览器获取事件对象的方式，在IE中是window.event，在其他标准浏览器中是作为参数传入）， + // 然后判断按下的键的键码是否为13（回车键的键码），如果是，则通过editor对象执行名为'anchor'的命令（具体这个命令做什么取决于editor对象的实现，可能与在编辑器中设置某种锚点相关功能有关），并传入input输入框中的值作为参数， + // 接着关闭dialog（可能是一个弹出对话框相关的对象，用于展示交互界面，关闭表示操作完成后隐藏对话框）， + // 最后通过domUtils对象（同样应该是在'internal.js'等相关文件中定义的工具对象）调用preventDefault方法阻止默认的回车键行为（比如防止页面刷新等默认行为） + + dialog.onok = function () { + editor.execCommand('anchor', anchorInput.value); + dialog.close(); + }; + // 为dialog对象添加onok事件监听器，当点击对话框的确定按钮（假设存在这样的按钮并且触发onok事件）时执行该函数， + // 函数内同样执行editor对象的'anchor'命令并传入input输入框中的值作为参数，然后关闭dialog对象 + + $focus(anchorInput); + // 调用$focus函数（应该是用于聚焦元素的自定义函数，在'internal.js'文件中定义），将焦点设置到anchorInput（即id为'anchorName'的input输入框）上，方便用户直接输入内容 + + \ No newline at end of file diff --git a/public2/ueditor/dialogs/attachment/attachment.html b/public2/ueditor/dialogs/attachment/attachment.html index 2ae9282..c208277 100644 --- a/public2/ueditor/dialogs/attachment/attachment.html +++ b/public2/ueditor/dialogs/attachment/attachment.html @@ -1,60 +1,86 @@ + - ueditor图片对话框 + + ueditor 图片对话框 + - + - + + - + + -
+
+ + +
+
+
+
+
+ 0% + +
+
+
+
+
+
+
+
    +
  • +
+
+
- + \ No newline at end of file diff --git a/public2/ueditor/dialogs/background/background.css b/public2/ueditor/dialogs/background/background.css index 5c41fe9..ae32a8b 100644 --- a/public2/ueditor/dialogs/background/background.css +++ b/public2/ueditor/dialogs/background/background.css @@ -1,94 +1,222 @@ -.wrapper{ width: 424px;margin: 10px auto; zoom:1;position: relative} -.tabbody{height:225px;} -.tabbody .panel { position: absolute;width:100%; height:100%;background: #fff; display: none;} -.tabbody .focus { display: block;} - -body{font-size: 12px;color: #888;overflow: hidden;} -input,label{vertical-align:middle} -.clear{clear: both;} -.pl{padding-left: 18px;padding-left: 23px\9;} - -#imageList {width: 420px;height: 215px;margin-top: 10px;overflow: hidden;overflow-y: auto;} -#imageList div {float: left;width: 100px;height: 95px;margin: 5px 10px;} -#imageList img {cursor: pointer;border: 2px solid white;} - -.bgarea{margin: 10px;padding: 5px;height: 84%;border: 1px solid #A8A297;} -.content div{margin: 10px 0 10px 5px;} -.content .iptradio{margin: 0px 5px 5px 0px;} -.txt{width:280px;} - -.wrapcolor{height: 19px;} -div.color{float: left;margin: 0;} -#colorPicker{width: 17px;height: 17px;border: 1px solid #CCC;display: inline-block;border-radius: 3px;box-shadow: 2px 2px 5px #D3D6DA;margin: 0;float: left;} -div.alignment,#custom{margin-left: 23px;margin-left: 28px\9;} -#custom input{height: 15px;min-height: 15px;width:20px;} -#repeatType{width:100px;} - - -/* 图片管理样式 */ +/* 以下是类名为'wrapper'的元素的样式规则 */ +.wrapper{ + width: 424px; /* 设置元素的宽度为424px */ + margin: 10px auto; /* 上下外边距为10px，左右外边距自动，使元素在父容器中水平居中 */ + zoom:1; /* 触发IE浏览器的hasLayout属性，用于解决一些布局相关的兼容性问题，通常和浮动、定位等布局方式结合使用 */ + position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续子元素基于此进行绝对定位等操作 */ +} + +/* 以下是类名为'tabbody'的元素的样式规则 */ +.tabbody{ + height:225px; /* 设置元素的高度为225px */ +} + +/* 以下是类名为'tabbody'下的类名为'panel'的子元素的样式规则 */ +.tabbody.panel { + position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 body 元素定位 */ + width:100%; /* 宽度占满父元素的宽度 */ + height:100%; /* 高度占满父元素的高度 */ + background: #fff; /* 设置背景颜色为白色 */ + display: none; /* 初始状态下不显示该元素，可通过后续添加类名等方式改变显示状态 */ +} + +/* 以下是类名为'tabbody'下具有'focus'类名的元素的样式规则，可能用于切换显示不同面板等交互场景 */ +.tabbody.focus { + display: block; /* 当元素具有'focus'类名时，显示该元素，覆盖上面'.panel'中设置的'display: none'样式 */ +} + +/* 以下是 body 元素的样式规则，会应用到整个页面文档 */ +body{ + font-size: 12px; /* 设置页面默认的字体大小为12px */ + color: #888; /* 设置页面文本颜色为灰色（#888） */ + overflow: hidden; /* 隐藏页面的滚动条，防止内容超出可视区域时出现滚动条 */ +} + +/* 以下是 input 和 label 元素的样式规则，使它们在垂直方向上居中对齐 */ +input,label{ + vertical-align:middle /* 设置元素在垂直方向上的对齐方式为居中对齐，常用于表单元素等在同一行显示时的布局调整 */ +} + +/* 以下是类名为'clear'的元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */ +.clear{ + clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */ +} + +/* 以下是类名为'pl'的元素的样式规则，通过属性选择器 hack（\9）为IE浏览器单独设置左边距，用于适配不同浏览器下的布局差异 */ +.pl{ + padding-left: 18px; + padding-left: 23px\9; /* 在IE浏览器下，设置左边距为23px，正常浏览器下为18px */ +} + +/* 以下是 id 为'imageList'的元素的样式规则 */ +#imageList { + width: 420px; /* 设置元素的宽度为420px */ + height: 215px; /* 设置元素的高度为215px */ + margin-top: 10px; /* 设置元素的上外边距为10px，使其与上方元素间隔一定距离 */ + overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */ + overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多内容且希望在垂直方向可滚动查看的区域 */ +} + +/* 以下是 id 为'imageList'下的 div 元素的样式规则 */ +#imageList div { + float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */ + width: 100px; /* 设置元素的宽度为100px */ + height: 95px; /* 设置元素的高度为95px */ + margin: 5px 10px; /* 设置元素的外边距，上下外边距为5px，左右外边距为10px，用于控制元素之间的间隔距离 */ +} + +/* 以下是 id 为'imageList'下的 img 元素的样式规则 */ +#imageList img { + cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */ + border: 2px solid white; /* 为图片添加白色的2px边框 */ +} + +/* 以下是类名为'bgarea'的元素的样式规则 */ +.bgarea{ + margin: 10px; /* 设置元素的上下左右外边距均为10px，使其与周围元素间隔一定距离 */ + padding: 5px; /* 设置元素的内边距为5px，在元素内部四周添加间隔空间 */ + height: 84%; /* 设置元素的高度占父元素高度的84%，用于根据父元素高度自适应自身高度 */ + border: 1px solid #A8A297; /* 为元素添加1px的边框，边框颜色为#A8A297 */ +} + +/* 以下是类名为'content'下的 div 元素的样式规则 */ +.content div{ + margin: 10px 0 10px 5px; /* 设置元素的外边距，上外边距和下外边距为10px，左外边距为5px，右外边距为0，用于控制元素在水平和垂直方向的间隔位置 */ +} + +/* 以下是类名为'content'下的类名为'iptradio'的元素的样式规则 */ +.content.iptradio{ + margin: 0px 5px 5px 0px; /* 设置元素的外边距，上外边距为0px，右外边距为5px，下外边距为5px，左外边距为0px，用于控制元素在水平和垂直方向的间隔位置 */ +} + +/* 以下是类名为'txt'的元素的样式规则 */ +.txt{ + width:280px; /* 设置元素的宽度为280px */ +} + +/* 以下是类名为'wrapcolor'的元素的样式规则 */ +.wrapcolor{ + height: 19px; /* 设置元素的高度为19px */ +} + +/* 以下是类名为'color'的 div 元素的样式规则 */ +div.color{ + float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */ + margin: 0; /* 设置元素的外边距为0，使其紧密排列 */ +} + +/* 以下是 id 为'colorPicker'的元素的样式规则 */ +#colorPicker{ + width: 17px; /* 设置元素的宽度为17px */ + height: 17px; /* 设置元素的高度为17px */ + border: 1px solid #CCC; /* 为元素添加1px的边框，边框颜色为#CCC */ + display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */ + border-radius: 3px; /* 设置元素的边框圆角半径为3px，使其边角呈现圆形效果 */ + box-shadow: 2px 2px 5px #D3D6DA; /* 为元素添加阴影效果，水平和垂直方向偏移2px，模糊半径为5px，阴影颜色为#D3D6DA */ + margin: 0; /* 设置元素的外边距为0，使其紧密排列 */ + float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */ +} + +/* 以下是类名为'alignment'的 div 元素以及 id 为'custom'的元素的样式规则，通过属性选择器 hack（\9）为IE浏览器单独设置左边距，用于适配不同浏览器下的布局差异 */ +div.alignment,#custom{ + margin-left: 23px; + margin-left: 28px\9; /* 在IE浏览器下，设置左边距为28px，正常浏览器下为23px */ +} + +/* 以下是 id 为'custom'下的 input 元素的样式规则 */ +#custom input{ + height: 15px; /* 设置元素的高度为15px */ + min-height: 15px; /* 设置元素的最小高度为15px，确保在某些情况下元素高度不会小于此值 */ + width:20px; /* 设置元素的宽度为20px */ +} + +/* 以下是 id 为'repeatType'的元素的样式规则 */ +#repeatType{ + width:100px; /* 设置元素的宽度为100px */ +} + +/* 以下是 id 为'imgManager'的元素的样式规则，用于图片管理相关的区域样式设置 */ #imgManager { - width: 100%; - height: 225px; + width: 100%; /* 宽度占满父元素的宽度 */ + height: 225px; /* 设置元素的高度为225px */ } + +/* 以下是 id 为'imgManager'下的 id 为'imageList'的子元素的样式规则 */ #imgManager #imageList{ - width: 100%; - overflow-x: hidden; - overflow-y: auto; + width: 100%; /* 宽度占满父元素的宽度 */ + overflow-x: hidden; /* 隐藏水平方向的溢出内容 */ + overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多图片且希望在垂直方向可滚动查看的区域 */ } + +/* 以下是 id 为'imgManager'下的 ul 元素的样式规则 */ #imgManager ul { - display: block; - list-style: none; - margin: 0; - padding: 0; + display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */ + list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */ + margin: 0; /* 设置元素的外边距为0，使其紧密排列 */ + padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */ } + +/* 以下是 id 为'imgManager'下的 li 元素的样式规则 */ #imgManager li { - float: left; - display: block; - list-style: none; - padding: 0; - width: 113px; - height: 113px; - margin: 9px 0 0 19px; - background-color: #eee; - overflow: hidden; - cursor: pointer; - position: relative; + float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */ + display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */ + list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */ + padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */ + width: 113px; /* 设置元素的宽度为113px */ + height: 113px; /* 设置元素的高度为113px */ + margin: 9px 0 0 19px; /* 设置元素的外边距，上外边距为9px，右外边距为0，下外边距为0，左外边距为19px，用于控制元素之间的间隔距离 */ + background-color: #eee; /* 设置元素的背景颜色为浅灰色（#eee） */ + overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */ + cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该列表项元素可点击交互 */ + position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续内部绝对定位元素基于此进行定位 */ } + +/* 以下是 id 为'imgManager'下具有'clearFloat'类名的 li 元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */ #imgManager li.clearFloat { - float: none; - clear: both; - display: block; - width:0; - height:0; - margin: 0; - padding: 0; + float: none; /* 取消元素的浮动属性 */ + clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */ + display: block; /* 将元素显示为块级元素，独占一行 */ + width:0; /* 设置元素的宽度为0 */ + height:0; /* 设置元素的高度为0 */ + margin: 0; /* 设置元素的外边距为0 */ + padding: 0; /* 设置元素的内边距为0 */ } + +/* 以下是 id 为'imgManager'下的 li 元素内的 img 元素的样式规则 */ #imgManager li img { - cursor: pointer; -} -#imgManager li .icon { - cursor: pointer; - width: 113px; - height: 113px; - position: absolute; - top: 0; - left: 0; - z-index: 2; - border: 0; - background-repeat: no-repeat; -} -#imgManager li .icon:hover { - width: 107px; - height: 107px; - border: 3px solid #1094fa; -} -#imgManager li.selected .icon { - background-image: url(images/success.png); - background-position: 75px 75px; -} -#imgManager li.selected .icon:hover { - width: 107px; - height: 107px; - border: 3px solid #1094fa; - background-position: 72px 72px; + cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */ +} + +/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素的样式规则 */ +#imgManager li.icon { + cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */ + width: 113px; /* 设置元素的宽度为113px */ + height: 113px; /* 设置元素的高度为113px */ + position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 li 元素定位 */ + top: 0; /* 基于父元素（li 元素）顶部定位，垂直方向距离顶部0px */ + left: 0; /* 基于父元素（li 元素）左侧定位，水平方向距离左侧0px */ + z-index: 2; /* 设置元素的层叠顺序为2，使其在一定程度上可以覆盖其他层叠顺序较低的元素显示 */ + border: 0; /* 设置元素的边框宽度为0，即无边框 */ + background-repeat: no-repeat; /* 设置背景图片不重复平铺 */ +} + +/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素在鼠标悬停时的样式规则 */ +#imgManager li.icon:hover { + width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */ + height: 107px; /* 鼠标悬停时，设置元素的高度为107px */ + border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */ +} + +/* 以下是 id 为'imgManager'下具有'selected'类名的 li 元素内的类名为'icon'的元素的样式规则 */ +#imgManager li.selected.icon { + background-image: url(images/success.png); /* 设置元素的背景图片，用于显示特定的选中标识等视觉效果 */ + background-position: 75px 75px; /* 设置背景图片在元素内的定位位置，水平和垂直方向均距离元素左上角75px */ +} + +/* 以下是 id 为'imgManager'下具有'selected'类名且鼠标悬停的 li 元素内的类名为'icon'的元素的样式规则 */ +#imgManager li.selected.icon:hover { + width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */ + height: 107px; /* 鼠标悬停时，设置元素的高度为107px */ + border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */ + background-position: 72px 72px; /* 设置背景图片在元素内的定位位置，水平和垂直方向均距离元素左上角72px，与未悬停时的背景位置有所变化，用于提供悬停交互的视觉效果变化 */ } \ No newline at end of file diff --git a/public2/ueditor/dialogs/background/background.html b/public2/ueditor/dialogs/background/background.html index 3cc2ac1..6e4f5a1 100644 --- a/public2/ueditor/dialogs/background/background.html +++ b/public2/ueditor/dialogs/background/background.html @@ -1,56 +1,83 @@ + - + + + +
+
+ + +
+
+
+ +
+
+ + +
+
+ : +
+
+
+
:
-
+
:x:px  y:px +
+
+ - + \ No newline at end of file diff --git a/public2/ueditor/dialogs/charts/chart.config.js b/public2/ueditor/dialogs/charts/chart.config.js index 678b00d..ecfec6b 100644 --- a/public2/ueditor/dialogs/charts/chart.config.js +++ b/public2/ueditor/dialogs/charts/chart.config.js @@ -1,9 +1,9 @@ /* * 图表配置文件 - * */ + * 此文件定义了多种不同类型图表的配置信息，可能用于图表绘制库（如 Highcharts、ECharts 等，具体依赖使用场景）来创建具有特定样式和交互功能的图表。 + */ - -//不同类型的配置 +// 定义一个名为 typeConfig 的数组，用于存储不同类型图表的配置对象。每个对象对应一种图表类型的相关配置设置。 var typeConfig = [ { chart: { @@ -15,9 +15,13 @@ var typeConfig = [ enabled: false }, enableMouseTracking: true + // 以下是对内部配置项的解释： + // dataLabels.enabled: 设置是否显示数据标签（例如在折线上每个数据点对应的数值标签），这里设置为 false，表示不显示。 + // enableMouseTracking: 设置是否启用鼠标跟踪功能，当设置为 true 时，鼠标悬停在图表元素（如折线的线段、数据点等）上时可能会触发相应的交互效果（如显示提示信息等）。 } } - }, { + }, + { chart: { type: 'line' }, @@ -27,21 +31,31 @@ var typeConfig = [ enabled: true }, enableMouseTracking: false + // 对于这个配置对象： + // dataLabels.enabled: 设置为 true，表示显示数据标签，会在折线上相应的数据点位置显示对应的数值等信息。 + // enableMouseTracking: 设置为 false，即禁用鼠标跟踪功能，鼠标悬停在图表元素上不会触发额外的交互效果。 } } - }, { + }, + { chart: { type: 'area' } - }, { + // 这个配置对象仅设置了图表类型为 'area'（面积图），可能使用默认的其他配置项（具体取决于使用的图表库的默认配置规则）来绘制面积图，后续如果需要可以继续添加更多如颜色、样式、交互等相关配置在此对象内。 + }, + { chart: { type: 'bar' } - }, { + // 配置图表类型为 'bar'（柱状图），同样可能依赖图表库默认配置来展示柱状图，如需个性化设置（如柱子颜色、宽度、间距等），可在此对象内添加对应配置项。 + }, + { chart: { type: 'column' } - }, { + // 设置图表类型为 'column'（也是柱状图的一种常见表示形式，与 'bar' 在某些图表库中有细微区别，比如方向等，具体看库的实现），可根据需求进一步完善其详细配置内容。 + }, + { chart: { plotBackgroundColor: null, plotBorderWidth: null, @@ -60,6 +74,18 @@ var typeConfig = [ } } } + // 对于此配置对象的详细解释： + // chart 部分的配置： + // plotBackgroundColor: 设置图表绘图区域的背景颜色，这里设置为 null，可能表示使用默认背景颜色（具体由图表库决定）。 + // plotBorderWidth: 设置绘图区域边框宽度，null 值通常也意味着使用默认边框宽度设定（取决于图表库）。 + // plotShadow: 设置绘图区域是否显示阴影效果，false 表示不显示阴影。 + // plotOptions.pie 部分的配置（针对饼图的相关设置）： + // allowPointSelect: 设置是否允许选中饼图中的单个数据点（扇区），true 表示允许，用户可以通过交互（如点击）来选中某个扇区。 + // cursor: 设置鼠标指针在饼图区域上的样式，'pointer' 通常表示鼠标指针变为手型，提示用户此处可进行交互操作。 + // dataLabels.enabled: 设置为 true，表示显示数据标签，即在饼图的每个扇区上显示相应的文字说明。 + // dataLabels.color: 设置数据标签的文字颜色为黑色（'#000000'）。 + // dataLabels.connectorColor: 设置数据标签与扇区之间连接线的颜色为黑色（'#000000'）。 + // dataLabels.formatter: 这是一个函数，用于自定义数据标签的显示内容格式。在这里，它返回的格式是将扇区对应的名称加粗显示，后面跟着该扇区占比的百分比数值（保留两位小数），例如 "类别A: 25.00 %"。 } } -]; +]; \ No newline at end of file diff --git a/public2/ueditor/dialogs/charts/charts.css b/public2/ueditor/dialogs/charts/charts.css index ac3c764..dbe207a 100644 --- a/public2/ueditor/dialogs/charts/charts.css +++ b/public2/ueditor/dialogs/charts/charts.css @@ -1,165 +1,192 @@ +/* 对 html 和 body 元素设置通用样式 */ html, body { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - overflow-x: hidden; + width: 100%; /* 设置元素宽度占满整个视口宽度 */ + height: 100%; /* 设置元素高度占满整个视口高度 */ + margin: 0; /* 清除元素默认的外边距，使页面从边缘开始布局 */ + padding: 0; /* 清除元素默认的内边距 */ + overflow-x: hidden; /* 隐藏水平方向上的滚动条，防止内容超出可视区域时出现水平滚动条 */ } +/* 定义类名为'main'的元素的样式 */ .main { - width: 100%; - overflow: hidden; + width: 100%; /* 宽度占满父元素宽度 */ + overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */ } +/* 定义类名为'table-view'的元素的样式 */ .table-view { - height: 100%; - float: left; - margin: 20px; - width: 40%; + height: 100%; /* 高度占满父元素高度（结合父元素的高度设置情况而定） */ + float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */ + margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */ + width: 40%; /* 设置元素宽度占父元素宽度的 40%，用于划分页面布局中表格部分的宽度占比 */ } -.table-view .table-container { - width: 100%; - margin-bottom: 50px; - overflow: scroll; +/* 定义类名为'table-view'下的类名为'table-container'的子元素的样式 */ +.table-view.table-container { + width: 100%; /* 宽度占满父元素（.table-view）的宽度 */ + margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */ + overflow: scroll; /* 当内容超出元素尺寸范围时，显示滚动条以便查看全部内容 */ } +/* 定义类名为'table-view'下的 th 元素（通常用于表格表头）的样式 */ .table-view th { - padding: 5px 10px; - background-color: #F7F7F7; + padding: 5px 10px; /* 设置元素的内边距，上下内边距为 5px，左右内边距为 10px，用于在表格表头单元格内提供一定的空白空间 */ + background-color: #F7F7F7; /* 设置元素的背景颜色为浅灰色（#F7F7F7），用于区分表头与表体部分 */ } +/* 定义类名为'table-view'下的 td 元素（通常用于表格表体单元格）的样式 */ .table-view td { - width: 50px; - text-align: center; - padding:0; + width: 50px; /* 设置元素的宽度为 50px，统一表格单元格的宽度 */ + text-align: center; /* 设置文本在单元格内居中对齐 */ + padding: 0; /* 清除元素默认的内边距，使内容紧密贴合单元格边缘 */ } +/* 定义类名为'table-container'下的 input 元素的样式 */ .table-container input { - width: 40px; - padding: 5px; - border: none; - outline: none; + width: 40px; /* 设置输入框元素的宽度为 40px */ + padding: 5px; /* 设置输入框元素的内边距为 5px，使输入内容与边框有一定间隔 */ + border: none; /* 清除输入框的边框，使其外观更简洁（可能通过其他方式体现选中或聚焦状态等） */ + outline: none; /* 清除输入框获取焦点时的默认外边框样式，同样是为了外观简洁或自定义聚焦效果 */ } +/* 定义类名为'table-view'下的 caption 元素（通常用于表格标题）的样式 */ .table-view caption { - font-size: 18px; - text-align: left; + font-size: 18px; /* 设置元素的字体大小为 18px，突出显示表格标题 */ + text-align: left; /* 设置文本在标题元素内左对齐 */ } +/* 定义类名为'charts-view'的元素的样式 */ .charts-view { - /*margin-left: 49%!important;*/ - width: 50%; - margin-left: 49%; - height: 400px; + /* margin-left: 49%!important; */ /* 此处被注释掉了，原作用可能是通过强制设置左外边距为父元素宽度的 49%来进行布局定位，但当前未生效，实际以下面的'margin-left'属性为准 */ + width: 50%; /* 设置元素宽度占父元素宽度的 50%，用于划分页面布局中图表部分的宽度占比 */ + margin-left: 49%; /* 设置元素的左外边距为父元素宽度的 49%，将图表部分定位在页面右侧，与左侧的表格部分区分开来 */ + height: 400px; /* 设置元素的高度为 400px，确定图表区域的高度大小 */ } +/* 定义类名为'charts-container'的元素的样式 */ .charts-container { - border-left: 1px solid #c3c3c3; + border-left: 1px solid #c3c3c3; /* 为元素添加左边框，边框宽度为 1px，颜色为灰色（#c3c3c3），可能用于区分图表区域与其他部分 */ } +/* 定义类名为'charts-format'下的 fieldset 元素的样式 */ .charts-format fieldset { - padding-left: 20px; - margin-bottom: 50px; + padding-left: 20px; /* 设置元素的左内边距为 20px，用于在内部提供一定的空白空间 */ + margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */ } +/* 定义类名为'charts-format'下的 legend 元素的样式 */ .charts-format legend { - padding-left: 10px; - padding-right: 10px; + padding-left: 10px; /* 设置元素的左内边距为 10px，在元素内部左侧提供一定空白空间 */ + padding-right: 10px; /* 设置元素的右内边距为 10px，在元素内部右侧提供一定空白空间 */ } +/* 定义类名为'format-item-container'的元素的样式 */ .format-item-container { - padding: 20px; + padding: 20px; /* 设置元素的内边距为 20px，在元素内部四周提供一定的空白空间 */ } +/* 定义类名为'format-item-container'下的 label 元素的样式 */ .format-item-container label { - display: block; - margin: 10px 0; + display: block; /* 将元素显示为块级元素，独占一行，常用于表单标签等元素的布局，方便与对应的输入框等元素进行垂直排列 */ + margin: 10px 0; /* 设置元素的外边距，上下外边距为 10px，左右外边距为 0，用于控制元素在垂直方向的间隔位置 */ } -.charts-format .data-item { - border: 1px solid black; - outline: none; - padding: 2px 3px; +/* 定义类名为'charts-format'下的类名为'data-item'的元素的样式 */ +.charts-format.data-item { + border: 1px solid black; /* 为元素添加边框，边框宽度为 1px，颜色为黑色，用于突出显示该元素 */ + outline: none; /* 清除元素获取焦点时的默认外边框样式，可能是为了外观简洁或自定义聚焦效果 */ + padding: 2px 3px; /* 设置元素的内边距，上下内边距为 2px，左右内边距为 3px，用于在元素内部提供一定的空白空间 */ } -/* 图表类型 */ +/* 以下是图表类型相关的样式定义 */ +/* 定义类名为'charts-type'的元素的样式 */ .charts-type { - margin-top: 50px; - height: 300px; + margin-top: 50px; /* 设置元素的上外边距为 50px，使其与上方元素间隔一定距离 */ + height: 300px; /* 设置元素的高度为 300px，确定图表类型相关区域的高度大小 */ } +/* 定义类名为'scroll-view'的元素的样式 */ .scroll-view { - border: 1px solid #c3c3c3; - border-left: none; - border-right: none; - overflow: hidden; + border: 1px solid #c3c3c3; /* 为元素添加边框，边框宽度为 1px，颜色为灰色（#c3c3c3） */ + border-left: none; /* 清除元素的左边框，使其左边框不显示 */ + border-right: none; /* 清除元素的右边框，使其右边框不显示 */ + overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */ } +/* 定义类名为'scroll-container'的元素的样式 */ .scroll-container { - margin: 20px; - width: 100%; - overflow: hidden; + margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */ + width: 100%; /* 宽度占满父元素宽度 */ + overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */ } +/* 定义类名为'scroll-bed'的元素的样式 */ .scroll-bed { - width: 10000px; - _margin-top: 20px; - -webkit-transition: margin-left .5s ease; - -moz-transition: margin-left .5s ease; - transition: margin-left .5s ease; + width: 10000px; /* 设置元素的宽度为一个较大值，可能用于实现滚动效果时容纳较多的内容（比如多个图表类型的展示元素等） */ + _margin-top: 20px; /* 此处是一个私有属性（前面加下划线，可能是针对特定浏览器的 hack，如 IE 浏览器），设置元素的上外边距为 20px */ + -webkit-transition: margin-left.5s ease; /* 针对webkit 内核浏览器（如 Chrome、Safari 等）设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */ + -moz-transition: margin-left.5s ease; /* 针对 Mozilla Firefox 浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */ + transition: margin-left.5s ease; /* 针对其他现代浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */ } +/* 定义类名为'view-box'的元素的样式 */ .view-box { - display: inline-block; - *display: inline; - *zoom: 1; - margin-right: 20px; - border: 2px solid white; - line-height: 0; - overflow: hidden; - cursor: pointer; + display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */ + *display: inline; /* 此处是针对低版本 IE 浏览器（IE7 及以下）的 hack，使其以行内元素显示，确保兼容性 */ + *zoom: 1; /* 同样是针对低版本 IE 浏览器的 hack，触发 hasLayout 属性，解决一些布局相关的兼容性问题 */ + margin-right: 20px; /* 设置元素的右外边距为 20px，使其与右侧相邻元素间隔一定距离 */ + border: 2px solid white; /* 为元素添加边框，边框宽度为 2px，颜色为白色，用于视觉上区分不同的视图框元素 */ + line-height: 0; /* 设置元素的行高为 0，可能用于去除元素内部默认的垂直间距等情况，具体看元素内部内容结构 */ + overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */ + cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */ } +/* 定义类名为'view-box'下的 img 元素的样式 */ .view-box img { - border: 1px solid #cecece; + border: 1px solid #cecece; /* 为图片元素添加边框，边框宽度为 1px，颜色为浅灰色（#cecece），用于视觉上对图片进行修饰 */ } +/* 定义类名为'view-box'下具有'selected'类名的元素的样式 */ .view-box.selected { - border-color: #7274A7; + border-color: #7274A7; /* 当元素具有'selected'类名时（可能表示被选中状态），改变其边框颜色为特定颜色（#7274A7），用于突出显示被选中的视图框元素 */ } +/* 定义类名为'button-container'的元素的样式 */ .button-container { - margin-bottom: 20px; - text-align: center; + margin-bottom: 20px; /* 设置元素的下外边距为 20px，使其与下方元素间隔一定距离 */ + text-align: center; /* 设置元素内部的子元素在水平方向上居中对齐，常用于按钮组等元素的布局，使其在容器内居中显示 */ } +/* 定义类名为'button-container'下的 a 元素（通常用于链接或按钮样式）的样式 */ .button-container a { - display: inline-block; - width: 100px; - height: 25px; - line-height: 25px; - border: 1px solid #c2ccd1; - margin-right: 30px; - text-decoration: none; - color: black; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; -} - + display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */ + width: 100px; /* 设置元素的宽度为 100px，确定按钮或链接的宽度大小 */ + height: 25px; /* 设置元素的高度为 25px，确定按钮或链接的高度大小 */ + line-height: 25px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */ + border: 1px solid #c2ccd1; /* 为元素添加边框，边框宽度为 1px，颜色为浅灰色（#c2ccd1），用于视觉上修饰按钮或链接元素 */ + margin-right: 30px; /* 设置元素的右外边距为 30px，用于控制按钮或链接之间的间隔距离 */ + text-decoration: none; /* 清除元素默认的文本下划线装饰（对于链接元素而言），使其外观更简洁 */ + color: black; /* 设置元素的文本颜色为黑色 */ + -webkit-border-radius: 2px; /* 针对 webkit 内核浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */ + -moz-border-radius: 2px; /* 针对 Mozilla Firefox 浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */ + border-radius: 2px; /* 针对其他现代浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */ +} + +/* 定义类名为'button-container'下的 a 元素在鼠标悬停时的样式 */ .button-container a:HOVER { - background: #fcfcfc; + background: #fcfcfc; /* 当鼠标悬停在按钮或链接元素上时，改变其背景颜色为浅白色（#fcfcfc），用于提供悬停交互的视觉反馈 */ } +/* 定义类名为'button-container'下的 a 元素在激活（如鼠标按下）时的样式 */ .button-container a:ACTIVE { - border-top-color: #c2ccd1; - box-shadow:inset 0 5px 4px -4px rgba(49, 49, 64, 0.1); + border-top-color: #c2ccd1; /* 当按钮或链接元素处于激活状态时，改变其顶部边框的颜色为浅灰色（#c2ccd1），用于提供点击交互的视觉反馈 */ + box-shadow: inset 0 5px 4px -4px rgba(49, 49, 64, 0.1); /* 为元素添加内阴影效果，水平和垂直方向偏移量、模糊半径等参数设置了阴影的样式，用于增强激活状态的视觉效果 */ } +/* 定义类名为'edui-charts-not-data'的元素的样式 */ .edui-charts-not-data { - height: 100px; - line-height: 100px; - text-align: center; + height: 100px; /* 设置元素的高度为 100px */ + line-height: 100px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */ + text-align: center; /* 设置元素内部的文本在水平方向上居中对齐 */ } \ No newline at end of file diff --git a/public2/ueditor/dialogs/charts/charts.html b/public2/ueditor/dialogs/charts/charts.html index 70e2314..9ae625a 100644 --- a/public2/ueditor/dialogs/charts/charts.html +++ b/public2/ueditor/dialogs/charts/charts.html @@ -1,89 +1,137 @@ + - - chart - - - - - -
-
-

-
-

-
-
-
- -
- - -
-
-
-
- -
- - - - -
-
-
- -
- -

-
-
-
- -
- -

-
-
-
-
-
-
-
-
-

-
-
-
+ + chart + + + + + + + + + +
+ +
+ +

+ +
+ +

+ +
+ +
+ +
+ + + +
+ + + +
+ +
+
+
+ + + +
+ + + + +
+
+
+ + + +
+ +

+
-
- - +
+
+ + + +
+ + +

+
+
+
+
+
+
+ +
+ +
+ +

+ +
+ +
+ +
+ +
+
+ + + + +
- - - - - +
+ + + + + + + + + \ No newline at end of file diff --git a/public2/ueditor/dialogs/charts/charts.js b/public2/ueditor/dialogs/charts/charts.js index 37344fd..9458bd6 100644 --- a/public2/ueditor/dialogs/charts/charts.js +++ b/public2/ueditor/dialogs/charts/charts.js @@ -1,7 +1,7 @@ /* * 图片转换对话框脚本 **/ - +// 定义一个空数组，用于存储表格数据，后续会在脚本执行过程中填充具体的数据值 var tableData = [], //编辑器页面table editorTable = null, @@ -10,6 +10,7 @@ var tableData = [], //初始默认图表类型 currentChartType = 0; +// 当页面加载完成后执行的函数，用于初始化页面中的各种元素和事件绑定等操作 window.onload = function () { editorTable = domUtils.findParentByTagName( editor.selection.getRange().startContainer, 'table', true); diff --git a/public2/ueditor/dialogs/emotion/emotion.css b/public2/ueditor/dialogs/emotion/emotion.css index f801105..6aec179 100644 --- a/public2/ueditor/dialogs/emotion/emotion.css +++ b/public2/ueditor/dialogs/emotion/emotion.css @@ -1,43 +1,185 @@ +/* 选择类名为 'jd' 下的 img 元素，并设置其样式 */ .jd img{ background:transparent url(images/jxface2.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:35px;height:35px;display:block; + /* 设置背景为透明，背景图片为 'images/jxface2.gif'（版本号为 v=1.1，可能用于缓存控制等情况），背景图片不重复显示，并且滚动时背景固定在左上角位置 */ + cursor:pointer; + /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */ + width:35px; + /* 设置元素宽度为 35 像素 */ + height:35px; + /* 设置元素高度为 35 像素 */ + display:block; + /* 将元素显示为块级元素，独占一行，方便进行布局排版等操作 */ } + +/* 选择类名为 'pp' 下的 img 元素，并设置其样式 */ .pp img{ background:transparent url(images/fface.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:25px;height:25px;display:block; + /* 类似上面的背景设置逻辑，只是背景图片路径为 'images/fface.gif'，同样不重复、固定在左上角 */ + cursor:pointer; + width:25px; + /* 设置元素宽度为 25 像素，与上面 'jd' 下的 img 元素宽度不同，体现不同类名下元素样式差异 */ + height:25px; + /* 设置元素高度为 25 像素 */ + display:block; } + +/* 选择类名为 'ldw' 下的 img 元素，并设置其样式 */ .ldw img{ background:transparent url(images/wface.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:35px;height:35px;display:block; + cursor:pointer; + width:35px; + height:35px; + display:block; } + +/* 选择类名为 'tsj' 下的 img 元素，并设置其样式 */ .tsj img{ background:transparent url(images/tface.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:35px;height:35px;display:block; + cursor:pointer; + width:35px; + height:35px; + display:block; } + +/* 选择类名为 'cat' 下的 img 元素，并设置其样式 */ .cat img{ background:transparent url(images/cface.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:35px;height:35px;display:block; + cursor:pointer; + width:35px; + height:35px; + display:block; } + +/* 选择类名为 'bb' 下的 img 元素，并设置其样式 */ .bb img{ background:transparent url(images/bface.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:35px;height:35px;display:block; + cursor:pointer; + width:35px; + height:35px; + display:block; } + +/* 选择类名为 'youa' 下的 img 元素，并设置其样式 */ .youa img{ background:transparent url(images/yface.gif?v=1.1) no-repeat scroll left top; - cursor:pointer;width:35px;height:35px;display:block; -} - -.smileytable td {height: 37px;} -#tabPanel{margin-left:5px;overflow: hidden;} -#tabContent {float:left;background:#FFFFFF;} -#tabContent div{display: none;width:480px;overflow:hidden;} -#tabIconReview.show{left:17px;display:block;} -.menuFocus{background:#ACCD3C;} -.menuDefault{background:#FFFFFF;} -#tabIconReview{position:absolute;left:406px;left:398px \9;top:41px;z-index:65533;width:90px;height:76px;} -img.review{width:90px;height:76px;border:2px solid #9cb945;background:#FFFFFF;background-position:center;background-repeat:no-repeat;} - -.wrapper .tabbody{position:relative;float:left;clear:both;padding:10px;width: 95%;} -.tabbody table{width: 100%;} -.tabbody td{border:1px solid #BAC498;} -.tabbody td span{display: block;zoom:1;padding:0 4px;} \ No newline at end of file + cursor:pointer; + width:35px; + height:35px; + display:block; +} + +/* 选择类名为'smileytable' 下的 td 元素，并设置其样式 */ +.smileytable td { + height: 37px; + /* 设置表格单元格（td）的高度为 37 像素，统一该类表格单元格的高度尺寸 */ +} + +/* 选择 id 为 'tabPanel' 的元素，并设置其样式 */ +#tabPanel{ + margin-left:5px; + /* 设置元素的左外边距为 5 像素，使其与左侧相邻元素间隔一定距离 */ + overflow: hidden; + /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */ +} + +/* 选择 id 为 'tabContent' 的元素，并设置其样式 */ +#tabContent { + float:left; + /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */ + background:#FFFFFF; + /* 设置元素的背景颜色为白色（#FFFFFF） */ +} + +/* 选择 id 为 'tabContent' 下的 div 元素，并设置其样式 */ +#tabContent div{ + display: none; + /* 初始状态下将这些 div 元素隐藏起来，可能通过后续 JavaScript 等操作来控制显示 */ + width:480px; + /* 设置元素宽度为 480 像素 */ + overflow:hidden; + /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */ +} + +/* 选择类名为 '#tabIconReview' 且具有'show' 类名的元素，并设置其样式 */ +#tabIconReview.show{ + left:17px; + /* 设置元素的左定位位置为 17 像素，改变其在页面中的水平位置（基于其定位上下文，此处应该是相对定位或绝对定位的情况） */ + display:block; + /* 将元素显示为块级元素并显示出来，覆盖之前可能的隐藏状态（可能是通过添加或移除'show' 类名来控制显示隐藏切换） */ +} + +/* 选择类名为'menuFocus' 的元素，并设置其样式 */ +.menuFocus{ + background:#ACCD3C; + /* 设置元素的背景颜色为特定的绿色（#ACCD3C），可能用于突出显示处于焦点状态的菜单元素等 */ +} + +/* 选择类名为'menuDefault' 的元素，并设置其样式 */ +.menuDefault{ + background:#FFFFFF; + /* 设置元素的背景颜色为白色（#FFFFFF），可能作为默认的菜单背景颜色，与'menuFocus' 的背景色形成对比，用于区分不同状态 */ +} + +/* 选择 id 为 'tabIconReview' 的元素，并设置其样式 */ +#tabIconReview{ + position:absolute; + /* 将元素设置为绝对定位，使其可以根据 'left'、'top' 等定位属性精确地在页面中定位，脱离文档流 */ + left:406px; + left:398px \9; + /* 设置元素的左定位位置，对于大多数浏览器使用 406px，针对 IE9 及以下版本浏览器（通过 \9 这个 hack）使用 398px，用于解决不同浏览器下的兼容性问题 */ + top:41px; + /* 设置元素的垂直定位位置为 41 像素，确定其在页面中的垂直方向位置 */ + z-index:65533; + /* 设置元素的堆叠顺序（z-index）为一个较大的值 65533，使其在页面中显示时能够覆盖在很多其他元素之上，常用于弹出层、提示框等需要显示在最上层的元素 */ + width:90px; + /* 设置元素宽度为 90 像素 */ + height:76px; + /* 设置元素高度为 76 像素 */ +} + +/* 选择类名为'review' 的 img 元素，并设置其样式 */ +img.review{ + width:90px; + height:76px; + border:2px solid #9cb945; + /* 为元素添加边框，边框宽度为 2 像素，颜色为特定的绿色（#9cb945），用于视觉上突出显示该元素 */ + background:#FFFFFF; + background-position:center; + background-repeat:no-repeat; + /* 设置背景颜色为白色，背景图片在元素内部居中显示且不重复，这里的背景相关设置可能用于显示特定的图片内容，具体看是否有对应的背景图片设置（前面代码中未体现完整背景图片路径部分，可能在其他地方有补充或者通过 JavaScript 动态设置等情况） */ +} + +/* 选择类名为 'wrapper' 下的类名为 'tabbody' 的元素，并设置其样式 */ +.wrapper.tabbody{ + position:relative; + /* 将元素设置为相对定位，为其子元素的绝对定位等操作提供相对的定位上下文，同时相对定位元素本身在文档流中的位置会保留，不会像绝对定位那样完全脱离文档流 */ + float:left; + clear:both; + /* 使元素向左浮动，并且清除两侧的浮动元素影响，确保该元素按照期望的布局排列，常用于解决浮动元素造成的布局混乱问题 */ + padding:10px; + /* 设置元素的内边距为 10 像素，在元素内部四周提供一定的空白空间 */ + width: 95%; + /* 设置元素宽度占父元素宽度的 95%，用于控制该元素在布局中的宽度占比 */ +} + +/* 选择类名为 'tabbody' 下的 table 元素，并设置其样式 */ +.tabbody table{ + width: 100%; + /* 设置表格宽度占满父元素宽度，使其自适应父元素的宽度大小 */ +} + +/* 选择类名为 'tabbody' 下的 td 元素，并设置其样式 */ +.tabbody td{ + border:1px solid #BAC498; + /* 为表格单元格（td）添加边框，边框宽度为 1 像素，颜色为特定的浅灰色（#BAC498），用于区分单元格之间的界限等 */ +} + +/* 选择类名为 'tabbody' 下的 td 元素内的 span 元素，并设置其样式 */ +.tabbody td span{ + display: block; + zoom:1; + /* 将 span 元素显示为块级元素（display: block），并通过 zoom:1 触发 hasLayout 属性（针对低版本 IE 浏览器的兼容性处理，用于解决一些布局相关问题），使其能像块级元素一样正常布局和设置样式 */ + padding:0 4px; + /* 设置元素的内边距，左右内边距为 4 像素，上下内边距为 0，在元素内部水平方向提供一定的空白空间 */ +} \ No newline at end of file diff --git a/public2/ueditor/dialogs/emotion/emotion.html b/public2/ueditor/dialogs/emotion/emotion.html index fca0850..1e59385 100644 --- a/public2/ueditor/dialogs/emotion/emotion.html +++ b/public2/ueditor/dialogs/emotion/emotion.html @@ -1,54 +1,76 @@ - + + + - - + + + + + + + -
-
- - - - - - - +
+ +
+ + + + + + + + + + +
+
+ +
+
+
+
+
+
+
+ +
-
-
-
-
-
-
-
-
+
+ + +
-
-
- -
- - + + + \ No newline at end of file diff --git a/public2/ueditor/dialogs/emotion/emotion.js b/public2/ueditor/dialogs/emotion/emotion.js index 6e158a9..ff3f81c 100644 --- a/public2/ueditor/dialogs/emotion/emotion.js +++ b/public2/ueditor/dialogs/emotion/emotion.js @@ -1,85 +1,107 @@ +// 当页面加载完成后执行的函数，用于初始化页面中与表情相关的各种设置、元素创建以及事件绑定等操作 window.onload = function () { + // 设置编辑器（editor，可能是自定义的富文本编辑器对象）的配置选项，将 'emotionLocalization' 设置为 false，表示表情相关资源的本地化属性为否，具体影响后续表情图片等资源的获取路径 editor.setOpt({ - emotionLocalization:false + emotionLocalization: false }); - emotion.SmileyPath = editor.options.emotionLocalization === true ? 'images/' : "http://img.baidu.com/hi/"; - emotion.SmileyBox = createTabList( emotion.tabNum ); - emotion.tabExist = createArr( emotion.tabNum ); + // 根据编辑器的 'emotionLocalization' 选项值来确定表情图片的路径（SmileyPath），如果为 true，则从本地相对路径 'images/' 获取，否则从指定的网络路径 "http://img.baidu.com/hi/" 获取 + emotion.SmileyPath = editor.options.emotionLocalization === true? 'images/' : "http://img.baidu.com/hi/"; + // 创建一个包含指定数量（emotion.tabNum）的空数组对象，用于存储不同面板（tab）下的相关信息（比如每个面板对应的表情图片文件名等），每个属性名以 'tab' 加数字的形式表示（如 'tab0'、'tab1' 等） + emotion.SmileyBox = createTabList(emotion.tabNum); + // 创建一个包含指定数量（emotion.tabNum）的数组，数组元素初始值都为 0，用于标记每个面板（tab）是否已经创建或存在相关内容，后续根据这个标记来决定是否需要重新创建对应面板的内容 + emotion.tabExist = createArr(emotion.tabNum); + // 初始化表情图片名称相关的数据，比如根据已有的图片前缀名等信息生成完整的图片文件名列表，填充到对应的面板数组（emotion.SmileyBox）中 initImgName(); - initEvtHandler( "tabHeads" ); + // 初始化事件处理函数，为特定 id（此处传入 'tabHeads'）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能 + initEvtHandler("tabHeads"); }; +// 初始化表情图片名称相关数据的函数，用于根据已有的表情图片前缀名（emotion.SmilmgName 中存储的信息）和数量信息，生成完整的表情图片文件名，并填充到对应的面板数组（emotion.SmileyBox）中 function initImgName() { - for ( var pro in emotion.SmilmgName ) { + // 遍历 emotion.SmilmgName 对象的每个属性（pro），每个属性对应一个面板（如 'tab0'、'tab1' 等） + for (var pro in emotion.SmilmgName) { var tempName = emotion.SmilmgName[pro], - tempBox = emotion.SmileyBox[pro], - tempStr = ""; + tempBox = emotion.SmileyBox[pro], + tempStr = ""; - if ( tempBox.length ) return; - for ( var i = 1; i <= tempName[1]; i++ ) { + // 如果当前面板对应的数组（tempBox）已经有元素了（即长度大于 0），则直接返回，不进行重复处理，可能是避免多次初始化同一面板的数据 + if (tempBox.length) return; + // 根据当前面板对应的图片前缀名（tempName[0]）和数量（tempName[1]）信息，循环生成完整的图片文件名，并添加到当前面板对应的数组（tempBox）中 + for (var i = 1; i <= tempName[1]; i++) { tempStr = tempName[0]; - if ( i < 10 ) tempStr = tempStr + '0'; + if (i < 10) tempStr = tempStr + '0'; tempStr = tempStr + i + '.gif'; - tempBox.push( tempStr ); + tempBox.push(tempStr); } } } -function initEvtHandler( conId ) { - var tabHeads = $G( conId ); - for ( var i = 0, j = 0; i < tabHeads.childNodes.length; i++ ) { +// 初始化事件处理函数，用于为指定 id（conId）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能 +function initEvtHandler(conId) { + // 通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取指定 id（conId）对应的元素，此处应该是获取页面中用于切换面板的头部元素集合（如包含各个面板标题的 span 元素的父元素） + var tabHeads = $G(conId); + // 遍历头部元素集合的每个子节点（childNodes），为符合条件的元素绑定点击事件监听器 + for (var i = 0, j = 0; i < tabHeads.childNodes.length; i++) { var tabObj = tabHeads.childNodes[i]; - if ( tabObj.nodeType == 1 ) { - domUtils.on( tabObj, "click", (function ( index ) { + // 只对节点类型为元素节点（nodeType == 1）的子节点进行操作，过滤掉文本节点、注释节点等非元素类型的节点 + if (tabObj.nodeType == 1) { + // 使用 domUtils.on 函数（可能是自定义的事件绑定工具函数）为当前元素（tabObj）绑定点击事件监听器，点击时执行一个立即执行函数返回的函数，这个函数会调用 switchTab 函数，并传入当前面板的索引（j）作为参数，实现点击切换对应面板的功能，同时 j 自增，用于记录下一个面板的索引 + domUtils.on(tabObj, "click", (function (index) { return function () { - switchTab( index ); + switchTab(index); }; - })( j ) ); + })(j)); j++; } } - switchTab( 0 ); - $G( "tabIconReview" ).style.display = 'none'; + // 初始时默认切换到第一个面板（索引为 0），调用 switchTab 函数显示第一个面板的内容 + switchTab(0); + // 将用于显示表情预览的元素（id 为 'tabIconReview'）隐藏起来，初始状态下不显示预览内容 + $G("tabIconReview").style.display = 'none'; } -function InsertSmiley( url, evt ) { +// 插入表情图片到编辑器中的函数，根据传入的图片 URL（url）以及触发的事件对象（evt），创建一个包含图片源地址（src）等信息的对象（obj），然后通过编辑器的命令（execCommand）插入图片，并且如果不是按下 Ctrl 键触发的操作，则隐藏相关的弹出对话框（popup.hide） +function InsertSmiley(url, evt) { var obj = { - src:editor.options.emotionLocalization ? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url + src: editor.options.emotionLocalization? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url }; obj._src = obj.src; - editor.execCommand( 'insertimage', obj ); - if ( !evt.ctrlKey ) { + editor.execCommand('insertimage', obj); + if (!evt.ctrlKey) { dialog.popup.hide(); } } -function switchTab( index ) { - - autoHeight( index ); - if ( emotion.tabExist[index] == 0 ) { +// 切换面板显示的函数，根据传入的面板索引（index），执行调整面板高度（autoHeight）、创建面板内容（如果不存在）以及切换显示对应面板内容和隐藏其他面板内容等操作 +function switchTab(index) { + // 根据传入的面板索引调整对应面板的高度相关样式，比如设置 iframe 和其父元素的高度值，确保合适的显示布局 + autoHeight(index); + // 如果当前面板还不存在（对应 emotion.tabExist 数组中该索引位置的值为 0），则标记该面板已存在（设置为 1），并调用 createTab 函数创建该面板的具体内容（如添加表情图片表格等元素） + if (emotion.tabExist[index] == 0) { emotion.tabExist[index] = 1; - createTab( 'tab' + index ); + createTab('tab' + index); } - //获取呈现元素句柄数组 - var tabHeads = $G( "tabHeads" ).getElementsByTagName( "span" ), - tabBodys = $G( "tabBodys" ).getElementsByTagName( "div" ), - i = 0, L = tabHeads.length; - //隐藏所有呈现元素 - for ( ; i < L; i++ ) { + // 获取用于切换面板的头部元素集合（包含各个面板标题的 span 元素）和主体元素集合（包含各个面板具体内容的 div 元素） + var tabHeads = $G("tabHeads").getElementsByTagName("span"), + tabBodys = $G("tabBodys").getElementsByTagName("div"), + i = 0, L = tabHeads.length; + // 循环遍历头部和主体元素集合，将所有元素的样式设置为初始状态，即隐藏主体元素（display="none"），清除头部元素的类名（className=""），用于清除之前可能设置的选中类名等样式 + for (; i < L; i++) { tabHeads[i].className = ""; tabBodys[i].style.display = "none"; } - //显示对应呈现元素 + // 将当前要显示的面板对应的头部元素添加特定的类名（可能用于设置选中样式，如背景色等变化），并显示其对应的主体元素内容 tabHeads[index].className = "focus"; tabBodys[index].style.display = "block"; } -function autoHeight( index ) { - var iframe = dialog.getDom( "iframe" ), - parent = iframe.parentNode.parentNode; - switch ( index ) { +// 根据传入的面板索引（index）调整对应面板的高度相关样式的函数，通过设置 iframe 及其父元素的高度值，为不同面板设置不同的合适高度，确保良好的显示布局效果 +function autoHeight(index) { + var iframe = dialog.getDom("iframe"), + parent = iframe.parentNode.parentNode; + switch (index) { case 0: iframe.style.height = "380px"; parent.style.height = "392px"; @@ -113,74 +135,78 @@ function autoHeight( index ) { } } - -function createTab( tabName ) { +// 创建特定面板（tabName）内容的函数，主要用于生成包含表情图片、相关提示信息以及鼠标交互事件绑定的表格元素，并添加到对应的面板 div 元素中，实现表情图片的展示和交互功能 +function createTab(tabName) { var faceVersion = "?v=1.1", //版本号 - tab = $G( tabName ), //获取将要生成的Div句柄 - imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径 - positionLine = 11 / 2, //中间数 - iWidth = iHeight = 35, //图片长宽 - iColWidth = 3, //表格剩余空间的显示比例 - tableCss = emotion.imageCss[tabName], - cssOffset = emotion.imageCssOffset[tabName], - textHTML = [''], - i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage, - sUrl, realUrl, posflag, offset, infor; - - for ( ; i < imgNum; ) { - textHTML.push( '' ); - for ( var j = 0; j < imgColNum; j++, i++ ) { + tab = $G(tabName), //获取将要生成的 Div 句柄，即对应面板的 div 元素对象，用于后续往里面添加生成的表格内容 + imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径，通过拼接表情图片的基础路径（SmileyPath）和当前面板对应的文件夹路径（imageFolders[tabName]）得到完整路径 + positionLine = 11 / 2, //中间数，可能用于判断图片在表格中的位置（比如用于控制背景图片的定位等情况，结合后续代码看与鼠标悬停显示预览相关逻辑有关） + iWidth = iHeight = 35, //图片长宽，设置表情图片在页面上显示的宽度和高度均为 35 像素 + iColWidth = 3, //表格剩余空间的显示比例，可能用于设置表格单元格的宽度占比等布局相关参数，影响表情图片在表格中的排列方式 + tableCss = emotion.imageCss[tabName], + cssOffset = emotion.imageCssOffset[tabName], + textHTML = ['
'], + i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage, + sUrl, realUrl, posflag, offset, infor; + + // 循环遍历当前面板对应的表情图片数量（imgNum），生成表格的行（tr）和列（td）元素，将表情图片、相关提示信息以及鼠标交互事件绑定添加到表格中 + for (; i < imgNum;) { + textHTML.push(''); + for (var j = 0; j < imgColNum; j++, i++) { faceImage = emotion.SmileyBox[tabName][i]; - if ( faceImage ) { + if (faceImage) { sUrl = imagePath + faceImage + faceVersion; realUrl = imagePath + faceImage; - posflag = j < positionLine ? 0 : 1; + posflag = j < positionLine? 0 : 1; offset = cssOffset * i * (-1) - 1; infor = emotion.SmileyInfor[tabName][i]; - textHTML.push( '' ); + textHTML.push(''); } - textHTML.push( '' ); + textHTML.push(''); } - textHTML.push( '
' ); - textHTML.push( '' ); - textHTML.push( '' ); - textHTML.push( '' ); + textHTML.push(''); + textHTML.push(''); + textHTML.push(''); + textHTML.push(''); } else { - textHTML.push( '' ); + textHTML.push(''); } - textHTML.push( '
' ); - textHTML = textHTML.join( "" ); + textHTML.push(''); + textHTML = textHTML.join(""); tab.innerHTML = textHTML; } -function over( td, srcPath, posFlag ) { +// 鼠标悬停在表情图片所在单元格（td）上时执行的函数，用于改变单元格背景色、显示表情预览图片以及显示表情预览元素（tabIconReview）等操作，实现鼠标悬停时的交互效果 +function over(td, srcPath, posFlag) { td.style.backgroundColor = "#ACCD3C"; - $G( 'faceReview' ).style.backgroundImage = "url(" + srcPath + ")"; - if ( posFlag == 1 ) $G( "tabIconReview" ).className = "show"; - $G( "tabIconReview" ).style.display = 'block'; + $G('faceReview').style.backgroundImage = "url(" + srcPath + ")"; + if (posFlag == 1) $G("tabIconReview").className = "show"; + $G("tabIconReview").style.display = 'block'; } -function out( td ) { +// 鼠标移出表情图片所在单元格（td）时执行的函数，用于恢复单元格背景色为透明、隐藏表情预览元素（tabIconReview）以及清除其相关类名等操作，还原到初始状态 +function out(td) { td.style.backgroundColor = "transparent"; - var tabIconRevew = $G( "tabIconReview" ); + var tabIconRevew = $G("tabIconReview"); tabIconRevew.className = ""; tabIconRevew.style.display = 'none'; } -function createTabList( tabNum ) { +// 创建一个包含指定数量（tabNum）的空数组对象的函数，每个属性名以 'tab' 加数字的形式表示（如 'tab0'、'tab1' 等），用于后续存储不同面板相关的信息，初始时每个数组都是空的 +function createTabList(tabNum) { var obj = {}; - for ( var i = 0; i < tabNum; i++ ) { + for (var i = 0; i < tabNum; i++) { obj["tab" + i] = []; } return obj; } -function createArr( tabNum ) { +// 创建一个包含指定数量（tabNum）的数组，数组元素初始值都为 0 的函数，用于标记每个面板（tab）是否已经创建或存在相关内容，后续根据这个标记来决定是否需要重新创建对应面板的内容 +function createArr(tabNum) { var arr = []; - for ( var i = 0; i < tabNum; i++ ) { + for (var i = 0; i < tabNum; i++) { arr[i] = 0; } return arr; -} - +} \ No newline at end of file diff --git a/public2/ueditor/dialogs/gmap/gmap.html b/public2/ueditor/dialogs/gmap/gmap.html index c4cbfe6..c120e86 100644 --- a/public2/ueditor/dialogs/gmap/gmap.html +++ b/public2/ueditor/dialogs/gmap/gmap.html @@ -1,89 +1,136 @@ + "http://www.w3.org/TR/html4/loose.dtd"> + + + + + -
- - - - - - -
-
-
- + \ No newline at end of file diff --git a/public2/ueditor/dialogs/help/help.css b/public2/ueditor/dialogs/help/help.css index 4478475..61ba8a2 100644 --- a/public2/ueditor/dialogs/help/help.css +++ b/public2/ueditor/dialogs/help/help.css @@ -1,7 +1,61 @@ -.wrapper{width: 370px;margin: 10px auto;zoom: 1;} -.tabbody{height: 360px;} -.tabbody .panel{width:100%;height: 360px;position: absolute;background: #fff;} -.tabbody .panel h1{font-size:26px;margin: 5px 0 0 5px;} -.tabbody .panel p{font-size:12px;margin: 5px 0 0 5px;} -.tabbody table{width:90%;line-height: 20px;margin: 5px 0 0 5px;;} -.tabbody table thead{font-weight: bold;line-height: 25px;} \ No newline at end of file +/* 选择类名为 'wrapper' 的元素，并设置其样式 */ +.wrapper{ + width: 370px; + /* 设置元素的宽度为 370 像素，用于控制该元素在页面中的水平尺寸大小 */ + margin: 10px auto; + /* 设置元素的上下外边距为 10 像素，左右外边距自动（auto），使元素在水平方向上自动居中，常用于将某个模块在页面中水平居中显示 */ + zoom: 1; + /* 通过设置 zoom 属性为 1，触发元素的 hasLayout 属性（主要针对低版本 IE 浏览器的兼容性处理），以解决一些布局相关的问题，确保元素能按照预期的样式和布局规则进行显示 */ +} + +/* 选择类名为 'tabbody' 的元素，并设置其样式 */ +.tabbody{ + height: 360px; + /* 设置元素的高度为 360 像素，用于限定该元素在页面中的垂直尺寸大小 */ +} + +/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素，并设置其样式 */ +.tabbody.panel{ + width:100%; + /* 设置元素的宽度占满其父元素的宽度，使其自适应父元素的宽度大小，常用于实现布局上的全屏或全宽效果 */ + height: 360px; + /* 设置元素的高度为 360 像素，与父元素（.tabbody）的高度保持一致，可能用于创建具有固定高度的面板区域 */ + position: absolute; + /* 将元素设置为绝对定位，使其可以根据 'left'、'top' 等定位属性精确地在页面中定位，脱离文档流，方便进行层叠布局以及与其他元素的位置重叠等效果实现 */ + background: #fff; + /* 设置元素的背景颜色为白色（#fff），用于提供一个清晰的背景视觉效果 */ +} + +/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素内部的 h1 标题元素，并设置其样式 */ +.tabbody.panel h1{ + font-size:26px; + /* 设置 h1 标题元素的字体大小为 26 像素，用于控制标题的文字大小，使其更加醒目突出 */ + margin: 5px 0 0 5px; + /* 设置元素的上、左外边距为 5 像素，下、右外边距为 0，使标题在面板内有一定的内边距间隔，呈现出合适的排版位置 */ +} + +/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素内部的 p 段落元素，并设置其样式 */ +.tabbody.panel p{ + font-size:12px; + /* 设置 p 段落元素的字体大小为 12 像素，通常用于正文内容的文字大小设置，使其与标题等元素区分开来，保持合适的层次结构 */ + margin: 5px 0 0 5px; + /* 同样设置元素的上、左外边距为 5 像素，下、右外边距为 0，让段落文字在面板内有合适的排版间隔 */ +} + +/* 选择类名为 'tabbody' 下的 table 表格元素，并设置其样式 */ +.tabbody table{ + width:90%; + /* 设置表格的宽度占其父元素宽度的 90%，使其在父元素内按一定比例自适应宽度，而不是占满整个父元素宽度，提供一定的布局灵活性 */ + line-height: 20px; + /* 设置表格内行高为 20 像素，用于控制表格内文字行与行之间的垂直间距，影响文字的排版效果和可读性 */ + margin: 5px 0 0 5px; + /* 设置表格的上、左外边距为 5 像素，下、右外边距为 0，让表格在父元素内有一定的间隔位置，呈现出合适的布局效果 */ +} + +/* 选择类名为 'tabbody' 下的 table 表格元素内部的 thead 表头元素，并设置其样式 */ +.tabbody table thead{ + font-weight: bold; + /* 设置表头元素内文字的字体粗细为粗体（bold），使其在视觉上与表格主体内容区分开来，更突出表头的重要性和标识作用 */ + line-height: 25px; + /* 设置表头行的行高为 25 像素，通常表头可能需要更大一点的行高来保证文字显示效果和美观性，与表格主体行高（前面设置的 20 像素）有所区别 */ +} \ No newline at end of file diff --git a/public2/ueditor/dialogs/help/help.html b/public2/ueditor/dialogs/help/help.html index 9e50060..818bfc6 100644 --- a/public2/ueditor/dialogs/help/help.html +++ b/public2/ueditor/dialogs/help/help.html @@ -1,82 +1,110 @@ + "http://www.w3.org/TR/html4/loose.dtd"> + 帮助 - + + + + + -
-
- - -
-
-
-

UEditor

-

-

+
+ +
+ + + + +
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ctrl+b
ctrl+c
ctrl+x
ctrl+v
ctrl+y
ctrl+z
ctrl+i
ctrl+u
ctrl+a
shift+enter
alt+z
+
+ +
+ +

UEditor

+ +

+ +

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ctrl+b
ctrl+c
ctrl+x
ctrl+v
ctrl+y
ctrl+z
ctrl+i
ctrl+u
ctrl+a
shift+enter
alt+z
+
-
- + + \ No newline at end of file diff --git a/public2/ueditor/dialogs/help/help.js b/public2/ueditor/dialogs/help/help.js index 9a2272e..31ead54 100644 --- a/public2/ueditor/dialogs/help/help.js +++ b/public2/ueditor/dialogs/help/help.js @@ -5,52 +5,65 @@ * Time: 下午1:06 * To change this template use File | Settings | File Templates. */ -/** - * tab点击处理事件 - * @param tabHeads - * @param tabBodys - * @param obj - */ -function clickHandler( tabHeads,tabBodys,obj ) { +// 以上部分是代码的创建相关信息注释，说明了代码是使用 JetBrains PhpStorm 创建，以及作者、创建日期和时间等信息，对代码本身功能无实质影响。 + +// 定义一个名为 'clickHandler' 的函数，用于处理 tab 点击相关的操作，比如改变头部元素的样式以及控制对应主体内容的显示隐藏和层级关系等。 +// @param tabHeads ：传入的参数，表示 tab 头部元素的集合（通常是一组用于切换不同 tab 的按钮或链接等元素组成的数组）。 +// @param tabBodys ：传入的参数，表示 tab 主体内容的集合（通常是一组对应不同 tab 的详细内容展示区域的元素组成的数组）。 +// @param obj ：传入的参数，代表当前被点击的 tab 头部元素对象，用于针对该特定元素进行样式等相关操作。 +function clickHandler( tabHeads, tabBodys, obj ) { //head样式更改 + // 循环遍历 tab 头部元素集合（tabHeads），将每个元素的类名（className）设置为空字符串，目的是清除之前可能存在的任何样式类，用于后续重新设置样式。 for ( var k = 0, len = tabHeads.length; k < len; k++ ) { tabHeads[k].className = ""; } + // 将当前被点击的 tab 头部元素（obj）的类名设置为 "focus"，可能在 CSS 中有对应的样式定义，用于突出显示当前选中的 tab 头部，比如改变背景色、字体颜色等样式来体现选中状态。 obj.className = "focus"; + //body显隐 + // 获取当前被点击的 tab 头部元素（obj）上自定义的 'tabSrc' 属性值，该值可能对应着某个 tab 主体内容的唯一标识（比如 id），用于后续查找并显示对应的主体内容。 var tabSrc = obj.getAttribute( "tabSrc" ); + // 循环遍历 tab 主体内容集合（tabBodys），对每个主体内容元素进行相关操作。 for ( var j = 0, length = tabBodys.length; j < length; j++ ) { var body = tabBodys[j], id = body.getAttribute( "id" ); - body.onclick = function(){ + // 为每个主体内容元素（body）绑定点击事件监听器，当点击主体内容元素时，执行一个匿名函数，函数内将该元素的 'zoom' 属性设置为 1，可能是用于触发某些浏览器特定的布局相关行为（比如在低版本 IE 中用于解决一些布局问题等），具体功能依赖于页面的 CSS 和整体布局设置。 + body.onclick = function () { this.style.zoom = 1; }; - if ( id != tabSrc ) { + // 判断当前主体内容元素的 id 是否与通过 tab 头部元素获取的 'tabSrc' 值不相等，如果不相等，表示不是当前选中 tab 对应的主体内容。 + if ( id!= tabSrc ) { + // 将该主体内容元素的 z-index 属性设置为 1，用于控制元素在页面中的堆叠层级，值为 1 表示较低的层级，可能使其在页面中显示在其他元素下方或者隐藏起来（结合其他 CSS 样式），实现非当前选中 tab 主体内容的隐藏或后置效果。 body.style.zIndex = 1; } else { + // 如果当前主体内容元素的 id 与 'tabSrc' 值相等，即表示是当前选中 tab 对应的主体内容，则将其 z-index 属性设置为 200，设置较高的层级值，使其能够显示在其他元素之上，保证当前选中 tab 的主体内容处于可见且突出显示的状态。 body.style.zIndex = 200; } } - } -/** - * TAB切换 - * @param tabParentId tab的父节点ID或者对象本身 - */ +// 定义一个名为'switchTab' 的函数，用于实现整体的 TAB 切换功能，主要是遍历 tab 元素，为每个 tab 头部元素绑定点击事件监听器，点击时调用 'clickHandler' 函数来处理相应的样式改变和主体内容切换显示等操作。 +// @param tabParentId ：传入的参数，代表 tab 的父节点 ID 或者传入 tab 所在的父元素对象本身，用于基于此查找 tab 头部和主体元素等相关子元素进行操作。 function switchTab( tabParentId ) { + // 通过 $G 函数（可能是自定义的获取 DOM 元素的函数），根据传入的 tabParentId 获取对应的元素对象，然后获取其所有子元素（children），这些子元素包含了 tab 的头部和主体相关元素集合等信息。 var tabElements = $G( tabParentId ).children, tabHeads = tabElements[0].children, tabBodys = tabElements[1].children; + // 循环遍历 tab 头部元素集合（tabHeads），对每个头部元素进行相关操作。 for ( var i = 0, length = tabHeads.length; i < length; i++ ) { var head = tabHeads[i]; - if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head ); + // 判断当前头部元素的类名是否为 "focus"，如果是，表示当前元素已经处于选中状态，直接调用 'clickHandler' 函数传入相应参数进行相关样式和显示处理（可能是页面加载时默认选中某个 tab 的情况需要进行初始化处理）。 + if ( head.className === "focus" ) clickHandler( tabHeads, tabBodys, head ); + // 为每个 tab 头部元素绑定点击事件监听器，当点击头部元素时，执行一个匿名函数，函数内调用 'clickHandler' 函数并传入 tab 头部元素集合（tabHeads）、tab 主体内容集合（tabBodys）以及当前被点击的头部元素对象（this）作为参数，实现点击切换 tab 时的样式改变和主体内容切换显示等操作。 head.onclick = function () { - clickHandler(tabHeads,tabBodys,this); + clickHandler( tabHeads, tabBodys, this ); } } } -switchTab("helptab"); -document.getElementById('version').innerHTML = parent.UE.version; \ No newline at end of file +// 调用'switchTab' 函数，并传入 "helptab" 作为参数，启动整个 TAB 切换功能，"helptab" 可能是页面中包含 tab 结构的某个父元素的 id，通过这个调用使得页面加载后就能对相应的 tab 进行切换操作了。 +switchTab( "helptab" ); + +// 获取页面中 id 为 'version' 的元素（可能是一个用于显示版本信息的 HTML 元素，比如段落元素等），然后将其内部 HTML 内容（innerHTML）设置为 'parent.UE.version' 的值，这里的 'parent' 可能是指父窗口或者某个包含版本信息的上级对象，通过访问其 'UE' 属性下的'version' 值来获取并显示具体的版本号信息，用于在页面上展示相关软件或工具的版本情况。 +document.getElementById( 'version' ).innerHTML = parent.UE.version; \ No newline at end of file diff --git a/public2/ueditor/dialogs/image/image.css b/public2/ueditor/dialogs/image/image.css index 52c2295..b584c9d 100644 --- a/public2/ueditor/dialogs/image/image.css +++ b/public2/ueditor/dialogs/image/image.css @@ -1,40 +1,61 @@ @charset "utf-8"; +/* 定义该 CSS 文件的字符编码为 UTF-8，确保能够正确解析和显示各种字符，如中文、特殊符号等 */ /* dialog样式 */ .wrapper { zoom: 1; + /* 通过设置 zoom 属性为 1，触发元素的 hasLayout 属性（主要针对低版本 IE 浏览器的兼容性处理），避免一些布局相关的问题，保证元素按预期布局显示 */ width: 630px; + /* 设置元素的宽度为 630 像素，用于控制该元素在页面中的水平尺寸大小 */ *width: 626px; + /* 针对特定浏览器（可能是低版本 IE 浏览器）的 hack 写法，为其设置另一个宽度值 626px，用于解决该浏览器下可能出现的样式差异问题 */ height: 380px; + /* 设置元素的高度为 380 像素，用于限定该元素在页面中的垂直尺寸大小 */ margin: 0 auto; + /* 设置元素的上下外边距为 0，左右外边距自动（auto），使元素在水平方向上自动居中，常用于将某个模块在页面中水平居中显示 */ padding: 10px; + /* 为元素内部添加 10 像素的内边距，在元素内容与边框之间留出一定空间，使内容显示更美观、布局更合理 */ position: relative; + /* 将元素设置为相对定位，方便基于其自身原始位置进行子元素的定位等操作，且不会脱离文档流，对其他元素的布局影响相对较小 */ font-family: sans-serif; + /* 设置元素内文本的字体为无衬线字体（sans-serif），提供一种简洁清晰的字体外观风格 */ } -/*tab样式框大小*/ + +/* tab样式框大小 */ .tabhead { - float:left; + float: left; + /* 将元素向左浮动，使其脱离文档流并按照从左到右的顺序排列，常用于实现多栏布局等效果，与其他浮动元素或非浮动元素相互配合来构建页面布局 */ } .tabbody { width: 100%; + /* 设置元素的宽度占满其父元素的宽度，使其自适应父元素的宽度大小，确保能占满可用空间 */ height: 346px; + /* 设置元素的高度为 346 像素，用于限定该元素在页面中的垂直尺寸大小 */ position: relative; + /* 将元素设置为相对定位，同样方便基于其自身原始位置进行内部元素的定位等操作，不脱离文档流 */ clear: both; + /* 清除左右两侧的浮动元素影响，确保该元素在垂直方向上不会与之前的浮动元素产生布局上的重叠等问题，重新开启新的一行布局 */ } -.tabbody .panel { +.tabbody.panel { position: absolute; + /* 将元素设置为绝对定位，使其脱离文档流，可以根据 'left'、'top' 等定位属性精确地在页面中定位，常用于实现层叠、覆盖等布局效果 */ width: 0; height: 0; + /* 初始时将宽度和高度设置为 0，可能是先隐藏该元素或者通过后续的交互（如选中对应的 tab 时）来动态改变其尺寸以显示内容 */ background: #fff; + /* 设置元素的背景颜色为白色（#fff），提供一个清晰的背景视觉效果 */ overflow: hidden; + /* 当元素内容超出其设定的宽度和高度范围时，隐藏超出部分的内容，防止内容溢出显示造成布局混乱 */ display: none; + /* 初始状态下将元素隐藏，不显示在页面中，等待相应的触发条件（比如对应的 tab 被选中）来显示该元素 */ } -.tabbody .panel.focus { +.tabbody.panel.focus { width: 100%; height: 346px; display: block; + /* 当元素具有 'focus' 类名时（可能通过 JavaScript 动态添加该类名来表示当前选中的 tab 对应的面板），设置其宽度占满父元素宽度，高度恢复为 346 像素，并将 display 属性设置为 'block'，使其显示出来，展示对应的 tab 内容 */ } /* 图片对齐方式 */ diff --git a/public2/ueditor/dialogs/image/image.html b/public2/ueditor/dialogs/image/image.html index 08ca022..949604c 100644 --- a/public2/ueditor/dialogs/image/image.html +++ b/public2/ueditor/dialogs/image/image.html @@ -2,119 +2,168 @@ + ueditor图片对话框 + - + - + - + +
+
+ + + + +
+ - - - - - - - + + + + + + + + + +
- +
+
+
+ - + + +
+
-   px -   px + +   px + +   px + +
- px + + px +
- px + + px +
- + + +
+
+
+
+
+ 0% + +
+
+
+
+
+
+
+
    +
  • +
+
+
+ + + +
+
    +
    -
    -
    - +
    +
    + - - \ No newline at end of file + + diff --git a/public2/ueditor/dialogs/image/image.js b/public2/ueditor/dialogs/image/image.js index 068e0bc..f9607f4 100644 --- a/public2/ueditor/dialogs/image/image.js +++ b/public2/ueditor/dialogs/image/image.js @@ -3,30 +3,36 @@ * Date: 14-04-08 * Time: 下午16:34 * 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片 + * 以上部分是代码头部的注释信息，说明了代码的作者、创建日期和时间，以及简要介绍了代码的功能是用于处理上传图片对话框相关的逻辑，涵盖了不同功能的选项卡（tab）操作等内容。 */ (function () { + // 创建一个立即执行的函数表达式（IIFE），用于创建一个独立的作用域，避免变量污染全局作用域，使得内部定义的变量和函数只能在这个闭包内部访问和使用，保证代码的模块化和独立性。 var remoteImage, uploadImage, onlineImage, searchImage; + // 声明四个变量，分别用于存储不同类型图片相关的实例对象（后续可能会根据不同的 tab 操作创建对应的实例，比如远程图片实例、上传图片实例等），初始值都为 undefined，它们的具体实例化会在相应的逻辑中根据用户操作和条件进行。 window.onload = function () { initTabs(); initAlign(); initButtons(); }; + // 当页面加载完成（window.onload 事件触发）时，执行一个匿名函数，在这个匿名函数内依次调用三个函数：initTabs()、initAlign() 和 initButtons()，分别用于初始化选项卡（tab）相关操作、图片对齐相关操作以及按钮相关的操作，这几个函数的具体定义在后续代码中，整体实现了在页面加载后对上传图片对话框各功能模块的初始化设置。 /* 初始化tab标签 */ function initTabs() { var tabs = $G('tabhead').children; + // 通过调用 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'tabhead' 的元素，并获取其所有子元素（children），这些子元素就是各个 tab 标签对应的 DOM 节点，将它们存储在 tabs 变量中，用于后续遍历操作。 for (var i = 0; i < tabs.length; i++) { domUtils.on(tabs[i], "click", function (e) { var target = e.target || e.srcElement; setTabFocus(target.getAttribute('data-content-id')); }); } + // 循环遍历 tabs 数组中的每个 tab 标签元素，使用 domUtils.on 函数（可能是自定义的事件绑定工具函数）为每个 tab 标签元素绑定 'click' 点击事件监听器，当点击某个 tab 标签时，会执行一个匿名函数。在这个匿名函数内，首先获取当前点击的目标元素（e.target 或 e.srcElement，兼容不同浏览器获取事件触发元素的方式），然后调用 setTabFocus 函数，并传入当前点击的 tab 标签元素上自定义的 'data-content-id' 属性值作为参数，这个属性值可能对应着不同的功能板块（如 '远程图片'、'上传图片' 等），通过调用 setTabFocus 函数来实现切换显示对应功能板块的操作。 var img = editor.selection.getRange().getClosedNode(); if (img && img.tagName && img.tagName.toLowerCase() == 'img') { @@ -34,11 +40,13 @@ } else { setTabFocus('upload'); } + // 获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()，可能是获取选区对应的 HTML 元素节点），判断如果该节点存在（img）并且节点的标签名（tagName）存在且转换为小写后是 'img'（即当前选区是一个图片元素），则调用 setTabFocus 函数并传入'remote' 参数，可能是默认显示远程图片相关功能板块；如果不符合上述条件（即选区不是图片元素或者不存在选区等情况），则调用 setTabFocus 函数并传入 'upload' 参数，默认显示上传图片相关功能板块，这部分代码实现了根据初始页面状态来决定默认显示哪个功能板块的逻辑。 } /* 初始化tabbody */ function setTabFocus(id) { - if(!id) return; + if (!id) return; + // 如果传入的参数 id 为空（即没有传递有效的标识来确定要操作的功能板块），则直接从函数中返回，不执行后续操作，起到一个简单的参数校验作用。 var i, bodyId, tabs = $G('tabhead').children; for (i = 0; i < tabs.length; i++) { bodyId = tabs[i].getAttribute('data-content-id'); @@ -50,8 +58,10 @@ domUtils.removeClasses($G(bodyId), 'focus'); } } + // 首先通过 $G 函数获取页面中 id 为 'tabhead' 的元素的所有子元素（也就是各个 tab 标签元素），然后循环遍历这些 tab 标签元素，获取每个 tab 标签元素上自定义的 'data-content-id' 属性值（存储在 bodyId 变量中），用于和传入的参数 id 进行比较。如果某个 tab 标签元素的 'data-content-id' 值与传入的 id 相等，表示当前这个 tab 对应的功能板块需要被设置为选中状态，通过 domUtils.addClass 函数（可能是自定义的添加 CSS 类名的工具函数）为该 tab 标签元素和对应的功能板块（通过 $G(bodyId) 获取对应的 DOM 元素）添加 'focus' 类名（可能在 CSS 中有对应的样式定义，用于突出显示选中状态，比如改变背景色、字体颜色等样式）；如果不相等，表示不是当前要选中的功能板块，则通过 domUtils.removeClasses 函数（可能是自定义的移除 CSS 类名的工具函数）移除它们的 'focus' 类名，实现切换不同功能板块的选中状态以及对应的显示隐藏等样式改变操作。 + switch (id) { - case 'remote': + case'remote': remoteImage = remoteImage || new RemoteImage(); break; case 'upload': @@ -63,13 +73,14 @@ onlineImage = onlineImage || new OnlineImage('imageList'); onlineImage.reset(); break; - case 'search': + case'search': setAlign(editor.getOpt('imageManagerInsertAlign')); searchImage = searchImage || new SearchImage(); break; } + // 根据传入的参数 id 的不同值（对应不同的功能板块标识），执行不同的操作来初始化相应的图片相关实例对象或者进行其他设置。例如，当 id 为'remote' 时，如果 remoteImage 变量还未实例化（通过 || 短路运算符判断），则创建一个 RemoteImage 类（可能是自定义的用于处理远程图片相关逻辑的类）的实例赋值给 remoteImage 变量；同理，对于 'upload'、'online' 和'search' 等不同情况，分别进行相应的实例化操作、调用 setAlign 函数（用于设置图片对齐方式，具体功能看其函数定义）以及调用对应类的特定方法（如 OnlineImage 类的 reset 方法）等操作，整体实现了根据当前选中的功能板块来初始化相应的数据和实例对象，为后续各功能板块的具体操作做准备。 } - +})(); /* 初始化onok事件 */ function initButtons() { diff --git a/public2/ueditor/dialogs/insertframe/insertframe.html b/public2/ueditor/dialogs/insertframe/insertframe.html index 7f1f3e9..a78220d 100644 --- a/public2/ueditor/dialogs/insertframe/insertframe.html +++ b/public2/ueditor/dialogs/insertframe/insertframe.html @@ -46,52 +46,71 @@
    diff --git a/public2/ueditor/dialogs/internal.js b/public2/ueditor/dialogs/internal.js index 44dc17f..2ab09f3 100644 --- a/public2/ueditor/dialogs/internal.js +++ b/public2/ueditor/dialogs/internal.js @@ -1,81 +1,109 @@ (function () { + // 获取 `window.parent` 对象，通常在页面通过 `iframe` 嵌套的情况下，`window.parent` 指向包含当前 `iframe` 的父页面的 `window` 对象，后续可能会基于这个父页面的环境获取一些全局可用的对象、变量等资源，用于当前 `iframe` 页面内的功能实现。 var parent = window.parent; - //dialog对象 - dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )]; - //当前打开dialog的编辑器实例 + + // 获取 `dialog` 对象，通过父页面（`parent`）的 `$EDITORUI` 对象（从命名推测可能是编辑器相关的 UI 管理对象，存储了与编辑器界面相关的各种组件、元素等信息，具体结构和功能依赖整体应用的设计），根据当前 `iframe` 的 `id`（通过 `window.frameElement.id` 获取 `iframe` 的 `id`，并使用正则表达式替换掉末尾的 `_iframe` 字符串）来获取对应的 `dialog` 对象，这个 `dialog` 对象可能用于弹出对话框、交互提示等相关功能，在编辑器相关操作中起到与用户交互的作用。 + dialog = parent.$EDITORUI[window.frameElement.id.replace(/_iframe$/, '')]; + + // 获取当前打开 `dialog` 的编辑器实例对象，将 `dialog` 对象的 `editor` 属性值赋给 `editor` 变量，这个 `editor` 对象可能包含了各种文本编辑相关的方法、属性，用于操作编辑器中的内容，比如插入文本、图片，执行各种编辑命令等功能，是整个编辑器功能实现的核心对象之一。 editor = dialog.editor; UE = parent.UE; + // 获取父页面中的 `UE` 对象，从命名推测 `UE` 可能是整个应用（可能是一个富文本编辑器应用）的全局核心对象，包含了众多功能模块相关的属性、方法，比如 `dom`（用于操作 DOM 元素相关功能）、`utils`（工具函数集合）、`browser`（用于检测浏览器相关信息）等，后续通过它来获取其他细分功能的对象引用。 domUtils = UE.dom.domUtils; + // 从 `UE` 对象的 `dom` 属性（可能是与 DOM 元素操作相关的子对象）下获取 `domUtils` 对象，这个对象通常包含了一系列用于操作 DOM 元素的工具函数，比如创建元素、添加删除类名、获取计算样式等功能相关的函数，方便在代码中对页面元素进行各种操作。 utils = UE.utils; + // 获取 `UE` 对象的 `utils` 对象，它可能是一个工具函数集合，包含了诸如加载文件、对象扩展、字符串处理等各种通用的工具函数，用于辅助其他功能模块实现一些常见的操作逻辑。 browser = UE.browser; + // 获取 `UE` 对象的 `browser` 对象，这个对象可能用于检测浏览器的相关信息，比如浏览器类型（是 `IE`、`Chrome`、`Firefox` 等）、浏览器版本号等，以便在代码中针对不同浏览器进行兼容性处理或者执行特定于某些浏览器的功能逻辑。 ajax = UE.ajax; + // 获取 `UE` 对象的 `ajax` 对象，它可能是用于实现异步 HTTP 请求（如 `XMLHttpRequest` 相关功能）的对象，通过它可以向服务器发送请求获取数据、提交表单等操作，在与服务器端交互获取或更新编辑器相关内容等场景中会用到。 - $G = function ( id ) { - return document.getElementById( id ) + $G = function (id) { + return document.getElementById(id) }; - //focus元素 - $focus = function ( node ) { - setTimeout( function () { - if ( browser.ie ) { + // 定义一个名为 `$G` 的函数，它是对 `document.getElementById` 方法的简单封装，用于根据传入的元素 `id` 获取对应的页面 DOM 元素，方便在代码中更简洁地获取元素引用，后续代码中会多次使用这个函数来获取特定 `id` 的元素进行操作。 + + // `$focus` 函数用于设置页面元素的焦点，通过传入一个节点元素（`node`），根据浏览器类型（判断是否为 `IE` 浏览器）来采用不同的方式设置焦点。如果是 `IE` 浏览器，使用 `createTextRange` 方法创建一个文本范围对象（`r`），调用 `collapse` 方法将光标移动到文本末尾（`false` 参数表示移动到末尾，`true` 表示移动到开头），然后调用 `select` 方法选中该文本范围，实现设置焦点的效果；如果不是 `IE` 浏览器，则直接调用节点元素的 `focus` 方法来设置焦点，通过 `setTimeout` 函数在下次事件循环开始时（延迟时间为 0）执行这个设置焦点的操作，确保操作在合适的时机执行。 + $focus = function (node) { + setTimeout(function () { + if (browser.ie) { var r = node.createTextRange(); - r.collapse( false ); + r.collapse(false); r.select(); } else { node.focus() } - }, 0 ) + }, 0) }; - utils.loadFile(document,{ - href:editor.options.themePath + editor.options.theme + "/dialogbase.css?cache="+Math.random(), - tag:"link", - type:"text/css", - rel:"stylesheet" + + // 使用 `utils` 对象的 `loadFile` 函数（具体功能依赖其内部实现，但从命名推测是用于加载文件资源到页面中）向页面中加载一个样式表文件。传入 `document` 对象（表示当前页面的文档对象）以及一个配置对象，配置对象中指定了要加载的文件的 `href`（文件路径，通过获取编辑器的 `options` 对象中的 `themePath`（主题路径相关配置）、`theme`（当前主题名称）以及添加一个随机数作为缓存破坏参数，拼接成完整的样式表文件路径）、`tag`（设置为 `"link"`，表示通过 `` 标签的方式加载样式表文件）、`type`（设置为 `"text/css"`，表明文件类型为 CSS 样式表）、`rel`（设置为 `"stylesheet"`，表示是样式表的关联关系）等属性，实现动态加载特定的样式表文件到页面，用于应用相应的样式规则，可能是根据当前编辑器的主题来加载对应的样式表。 + utils.loadFile(document, { + href: editor.options.themePath + editor.options.theme + "/dialogbase.css?cache=" + Math.random(), + tag: "link", + type: "text/css", + rel: "stylesheet" }); - lang = editor.getLang(dialog.className.split( "-" )[2]); - if(lang){ - domUtils.on(window,'load',function () { + + lang = editor.getLang(dialog.className.split("-")[2]); + // 通过 `editor` 对象的 `getLang` 方法（可能是根据传入的参数获取对应的语言相关配置对象，用于实现多语言功能，根据不同语言环境展示不同的文本内容等），传入 `dialog.className`（`dialog` 对象的类名）通过字符串分割（以 `-` 为分隔符）获取第三个元素（从索引为 2 的位置获取，推测可能是与语言标识相关的部分，具体格式依赖整体应用的命名约定）作为参数，获取对应的语言配置对象，并赋值给 `lang` 变量，后续会根据这个 `lang` 对象来更新页面中的静态资源相关元素的文本、样式等内容，实现多语言展示效果。 + + if (lang) { + domUtils.on(window, 'load', function () { + // 使用 `domUtils` 对象的 `on` 函数（可能是用于添加事件监听器的函数，类似于原生的 `addEventListener` 方法，但可能有更多自定义的逻辑处理）为 `window` 对象的 `load` 事件（该事件在页面所有资源加载完成后触发）添加事件处理函数，在页面加载完成后执行以下操作，用于根据语言配置更新页面中的静态资源相关元素内容。 var langImgPath = editor.options.langPath + editor.options.lang + "/images/"; - //针对静态资源 - for ( var i in lang["static"] ) { - var dom = $G( i ); - if(!dom) continue; + // 构建一个 `langImgPath` 变量，通过获取编辑器的 `options` 对象中的 `langPath`（语言相关的路径前缀）和 `lang`（当前语言标识）以及固定的 `"/images/"` 拼接而成，这个路径用于后续查找和替换与语言相关的图片资源路径等操作，确保在不同语言环境下能正确加载对应的图片资源。 + + // 遍历 `lang` 对象的 `static` 属性（从命名推测可能是存储了各种静态资源相关配置信息的对象，比如页面中固定的文本内容、图片引用、元素样式等与语言相关的配置，每个属性对应一个页面元素的相关配置）中的所有属性（通过 `for...in` 循环遍历对象的可枚举属性），获取每个属性对应的配置信息，并根据配置内容和元素类型进行相应的更新操作。 + for (var i in lang["static"]) { + var dom = $G(i); + if (!dom) continue; + // 通过 `$G` 函数获取 `id` 为当前循环属性名（`i`）的页面元素，赋值给 `dom` 变量，如果获取到的元素不存在（返回 `null`），则直接跳过本次循环，继续下一个属性的处理，确保只对存在的页面元素进行操作。 var tagName = dom.tagName, content = lang["static"][i]; - if(content.src){ + // 获取元素的标签名（通过 `tagName` 属性），以及对应的 `lang["static"][i]` 配置对象（包含了该元素根据语言配置的文本内容、样式、属性等信息），用于后续根据元素类型和配置内容进行不同的更新操作。 + + if (content.src) { + // 如果配置对象中存在 `src` 属性（通常表示图片元素的资源路径相关属性，意味着该元素是图片相关元素或者引用了外部资源等情况），则执行以下操作。 //clone - content = utils.extend({},content,false); + content = utils.extend({}, content, false); + // 使用 `utils.extend` 函数（可能是自定义的用于合并对象属性的函数，将第一个对象的属性复制到第二个对象上，如果有同名属性则覆盖，这里将 `content` 对象复制一份，避免直接修改原始配置对象，可能影响其他地方的使用）创建一个新的 `content` 对象副本，传入 `false` 参数可能是控制合并的方式（具体作用依赖 `utils.extend` 函数内部实现），然后对副本进行操作。 content.src = langImgPath + content.src; + // 将新的 `content` 对象副本的 `src` 属性值更新为 `langImgPath`（前面构建的语言相关图片资源路径前缀）与原始 `src` 属性值（图片文件名等）拼接后的字符串，实现根据语言环境替换图片资源路径的效果，确保在不同语言下能正确加载对应的图片。 } - if(content.style){ - content = utils.extend({},content,false); - content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath) + if (content.style) { + content = utils.extend({}, content, false); + content.style = content.style.replace(/url\s*\(/g, "url(" + langImgPath) + // 如果配置对象中存在 `style` 属性（表示元素的样式相关配置信息），同样先复制一份 `content` 对象，然后使用字符串替换方法 `replace`，将样式字符串中所有出现的 `url(`（匹配 `url` 后面跟着空格和左括号的情况，用于处理样式中引用图片资源的路径部分，确保能准确替换）替换为 `url(` 加上 `langImgPath`（语言相关图片资源路径前缀），实现将样式中引用的图片资源路径替换为对应语言环境下的正确路径，使样式中的图片能正确显示。 } - switch ( tagName.toLowerCase() ) { + switch (tagName.toLowerCase()) { case "var": - dom.parentNode.replaceChild( document.createTextNode( content ), dom ); + dom.parentNode.replaceChild(document.createTextNode(content), dom); break; + // 根据元素的标签名（转换为小写后进行判断）来执行不同的更新操作。如果元素标签名是 `"var"`（可能是用于显示特定文本内容的占位元素，比如用于显示多语言相关的变量文本等情况），则通过 `dom.parentNode.replaceChild` 方法（在元素的父节点上，用一个新创建的文本节点（使用 `document.createTextNode` 方法创建，内容为 `content`，即语言配置中的对应文本内容）替换当前元素，实现更新元素显示文本内容的效果。 case "select": var ops = dom.options; - for ( var j = 0, oj; oj = ops[j]; ) { + for (var j = 0, oj; oj = ops[j]; ) { oj.innerHTML = content.options[j++]; } - for ( var p in content ) { - p != "options" && dom.setAttribute( p, content[p] ); + for (var p in content) { + p!= "options" && dom.setAttribute(p, content[p]); } break; - default : - domUtils.setAttributes( dom, content); + // 如果元素标签名是 `"select"`（下拉选择框元素），先获取其所有的 `