Reapply "cky"

This reverts commit 2f820a6497.

modules/Logistics.js

@@ -1,54 +1,68 @@
-// 导入 request 模块
+// 导入 request 模块，该模块常用于在 Node.js 中发起 HTTP 请求，方便与其他网络服务进行交互
-const request = require('request')
+const request = require('request');
 
 // 自动匹配运单号所属的物流公司
 function autoComNumber(orderno) {
-  const url = `https://www.kuaidi100.com/autonumber/autoComNum?resultv2=1&text=${orderno}`
+    // 构造请求的 URL，向快递100的接口发送请求，尝试自动匹配运单号对应的物流公司
-  return new Promise(function(resolve, reject) {
+    // 将运单号拼接到 URL 参数中，resultv2=1 可能是用于指定返回结果的某种格式或版本相关参数
-    request(url, (err, response, body) => {
+    const url = `https://www.kuaidi100.com/autonumber/autoComNum?resultv2=1&text=${orderno}`;
-      if (err) return reject({ status: 500, msg: err.message })
+    // 返回一个 Promise 对象，用于处理异步操作，使得外部可以使用 async/await 语法来等待该函数执行完成
-      // resolve(body)
+    return new Promise(function (resolve, reject) {
-      // console.log(body.num)
+        // 使用 request 模块发起 GET 请求，传入 URL 和回调函数，回调函数接收请求过程中的错误、响应对象以及响应体内容作为参数
-      body = JSON.parse(body)
+        request(url, (err, response, body) => {
-      if (body.auto.length <= 0) return reject({ status: 501, msg: '无对应的物流公司' })
+            // 如果请求过程中出现错误，调用 reject 函数拒绝这个 Promise，并返回包含状态码 500 和错误信息的对象
-      resolve({ status: 200, msg: body.auto[0], comCode: body.auto[0].comCode })
+            if (err) return reject({ status: 500, msg: err.message });
-    })
+            // 将响应体内容（通常是 JSON 字符串格式）解析为 JavaScript 对象，方便后续提取数据
-  })
+            body = JSON.parse(body);
+            // 如果解析后的 body.auto 数组长度小于等于 0，意味着没有匹配到对应的物流公司，同样调用 reject 函数拒绝 Promise，并返回相应的错误信息对象
+            if (body.auto.length <= 0) return reject({ status: 501, msg: '无对应的物流公司' });
+            // 如果匹配到了物流公司，调用 resolve 函数成功解决这个 Promise，返回包含状态码 200、物流公司信息以及对应的公司编码的对象
+            resolve({ status: 200, msg: body.auto[0], comCode: body.auto[0].comCode });
+        });
+    });
 }
 
+// 定义一个异步函数，用于获取物流信息，接收 Express 框架的请求（req）和响应（res）对象作为参数（从函数名和使用方式推测可能在 Express 应用中使用）
 async function getLogisticsInfo(req, res) {
-  const result = await autoComNumber(req.params.orderno)
+    // 调用 autoComNumber 函数，传入请求参数中的运单号（req.params.orderno），并使用 await 等待该异步操作完成，获取匹配物流公司后的结果
+    const result = await autoComNumber(req.params.orderno);
 
-  if (result.status !== 200) {
+    // 如果返回结果的状态码不是 200，说明匹配物流公司出现问题，直接返回一个包含错误状态和相应错误消息的对象给客户端
-    return {
+    if (result.status!== 200) {
-      meta: {
+        return {
-        status: 500,
+            meta: {
-        message: '获取物流信息失败！'
+                status: 500,
-      }
+                message: '获取物流信息失败！'
+            }
+        };
     }
-  }
 
-  const dataUrl = `https://www.kuaidi100.com/query?type=${result.comCode}&postid=${req.params.orderno}&temp=0.2595247267684455`
+    // 根据匹配到的物流公司编码和运单号构造查询物流信息的 URL，向快递100的另一个接口发送请求以获取详细物流信息
-  request(dataUrl, (err, response, body) => {
+    const dataUrl = `https://www.kuaidi100.com/query?type=${result.comCode}&postid=${req.params.orderno}&temp=0.2595247267684455`;
-    if (err) {
+    // 使用 request 模块发起请求，传入构造好的 URL 和回调函数，处理获取物流信息过程中的各种情况
-      return res.send({
+    request(dataUrl, (err, response, body) => {
-        meta: {
+        // 如果请求过程中出现错误，使用 Express 的 res.send 方法向客户端发送包含错误状态和相应错误消息的对象，表示获取物流信息失败
-          status: 501,
+        if (err) {
-          message: '获取物流信息失败！'
+            return res.send({
+                meta: {
+                    status: 501,
+                    message: '获取物流信息失败！'
+                }
+            });
         }
-      })
+        // 如果请求成功，解析响应体内容（假设为 JSON 格式），提取其中的物流信息数据（.data 属性，具体格式取决于快递100接口返回的数据结构），
-    }
+        // 然后使用 Express 的 res.send 方法向客户端发送包含成功状态、相应消息以及物流信息数据的对象，表示获取物流信息成功
-    // 获取物流信息成功
+        return res.send({
-    return res.send({
+            meta: {
-      meta: {
+                status: 200,
-        status: 200,
+                message: '获取物流信息成功！'
-        message: '获取物流信息成功！'
+            },
-      },
+            data: (JSON.parse(body)).data
-      data: (JSON.parse(body)).data
+        });
-    })
+    });
-  })
 }
 
+// 将 getLogisticsInfo 函数作为模块的属性导出，方便其他模块引入并使用这个函数来获取物流信息
 module.exports = {
-  getLogisticsInfo
+    getLogisticsInfo
-}
+};

modules/authorization.js

@@ -1,74 +1,91 @@
+// 引入Node.js的path模块，用于处理文件路径相关操作
 var path = require('path');
+// 原本要引入的roles控制器模块，此处被注释掉了，可能后续会按需启用
 // var roles_controller = require("../controllers/roles");
 
+// 再次引入path模块，前面的引入语句重复了，但在Node.js中不会有实质影响，可考虑优化掉重复引入的情况
 var path = require("path");
 
+// 创建一个全局对象service_caches，用于缓存服务相关的模块或数据，初始为空对象
 global.service_caches = {};
 
-// 存储全局验证函数
+// 创建一个全局变量service_auth_fn，用于存储全局验证函数，初始值为null
 global.service_auth_fn = null;
 
 /**
- * 构造回调对象格式
+ * Invocation函数用于构造一个回调对象格式，主要用于在调用服务的具体方法时进行权限验证等相关操作。
  * 
- * @param {[type]} serviceName   服务名称
+ * @param {[type]} serviceName   服务名称，用于标识具体是哪个服务。
- * @param {[type]} actionName    动作名称（方法名）
+ * @param {[type]} actionName    动作名称（方法名），对应服务模块里具体的函数名称。
- * @param {[type]} serviceModule 服务模块
+ * @param {[type]} serviceModule 服务模块，即通过require加载进来的包含具体业务逻辑函数的模块对象。
- * @param {[type]} origFunc      原始方法
+ * @param {[type]} origFunc      原始方法，也就是服务模块里未经包装的原始业务逻辑函数。
  */
-function Invocation(serviceName,actionName,serviceModule,origFunc) {
+function Invocation(serviceName, actionName, serviceModule, origFunc) {
-	return function() {
+    // 返回一个新的函数，这个函数会接收一些参数（此处未在形参中体现，在调用时会传入），并返回另一个函数作为真正的回调函数
-		var origArguments = arguments;
+    return function () {
-		return function(req,res,next) {
+        var origArguments = arguments;
-			if(global.service_auth_fn) {
+        return function (req, res, next) {
-				global.service_auth_fn(req,res,next,serviceName,actionName,function(pass) {
+            // 判断全局验证函数是否存在，如果存在则进行权限验证流程
-					if(pass) {
+            if (global.service_auth_fn) {
-						origFunc.apply(serviceModule,origArguments);
+                global.service_auth_fn(req, res, next, serviceName, actionName, function (pass) {
-					} else {
+                    // 如果权限验证通过（pass为true），则执行原始的业务逻辑函数
-						res.sendResult(null,401,"权限验证失败");
+                    if (pass) {
-					}
+                        origFunc.apply(serviceModule, origArguments);
-				});
+                    } else {
-			} else {
+                        // 如果权限验证失败，向客户端返回相应的错误信息，状态码为401表示未授权
-				res.sendResult(null,401,"权限验证失败");
+                        res.sendResult(null, 401, "权限验证失败");
-			}
+                    }
-		}
+                });
-	}
+            } else {
+                // 如果全局验证函数不存在，直接返回权限验证失败的错误信息给客户端
+                res.sendResult(null, 401, "权限验证失败");
+            }
+        }
+    }
 }
 
-// 获取服务对象
+// 定义一个函数用于获取服务对象，它是模块对外暴露的接口之一
-module.exports.getService = function(serviceName) {
+module.exports.getService = function (serviceName) {
+    // 先检查全局缓存中是否已经存在指定名称的服务对象，如果存在则直接返回缓存中的服务对象
+    if (global.service_caches[serviceName]) {
+        return global.service_caches[serviceName];
+    }
 
-	if(global.service_caches[serviceName]) {
+    // 构建服务模块的文件路径，通过拼接当前工作目录、"services"文件夹以及服务名称来确定具体路径
-		return global.service_caches[serviceName];
+    var servicePath = path.join(process.cwd(), "services", serviceName);
-	}
 
-	var servicePath = path.join(process.cwd(),"services",serviceName);
+    // 通过require加载对应的服务模块，如果模块不存在则返回null并在控制台打印提示信息
-	
+    var serviceModule = require(servicePath);
-	var serviceModule = require(servicePath);
+    if (!serviceModule) {
-	if(!serviceModule) {
+        console.log("模块没有被发现");
-		console.log("模块没有被发现");
+        return null;
-		return null;
+    }
-	}
-	global.service_caches[serviceName] = {};
 
-	console.log("*****************************************");
+    // 在全局缓存对象中为当前服务名称创建一个空对象，用于后续存储该服务的具体方法相关的回调对象等信息
-	console.log("拦截服务 => %s",serviceName);
+    global.service_caches[serviceName] = {};
-	console.log("*****************************************");
-	for(actionName in serviceModule) {
 
-		if(serviceModule && serviceModule[actionName] && typeof(serviceModule[actionName]) == "function") {
+    // 打印一些提示信息，表明正在拦截指定名称的服务，方便调试和查看流程
-			var origFunc = serviceModule[actionName];
+    console.log("*****************************************");
-			global.service_caches[serviceName][actionName] = Invocation(serviceName,actionName,serviceModule,origFunc);
+    console.log("拦截服务 => %s", serviceName);
-			console.log("action => %s",actionName);
+    console.log("*****************************************");
-		}
-	}
-	// console.log(global.service_caches);
-	console.log("*****************************************\n");
-	return global.service_caches[serviceName];
-}
 
-// 设置全局验证函数
+    // 遍历服务模块里的所有属性（通常是方法）
-module.exports.setAuthFn = function(authFn) {
+    for (actionName in serviceModule) {
-	global.service_auth_fn = authFn;
+        // 检查属性对应的是否是一个函数（即服务模块里有效的业务逻辑函数）
+        if (serviceModule && serviceModule[actionName] && typeof (serviceModule[actionName]) == "function") {
+            var origFunc = serviceModule[actionName];
+            // 使用Invocation函数构造该方法对应的回调对象，并将其存储到全局缓存对象中对应的服务和方法名下
+            global.service_caches[serviceName][actionName] = Invocation(serviceName, actionName, serviceModule, origFunc);
+            console.log("action => %s", actionName);
+        }
+    }
+    // 打印一些分割线和空行，用于在控制台输出中更清晰地区分不同服务的处理情况，此处注释掉了打印全局缓存对象的语句
+    // console.log(global.service_caches);
+    console.log("*****************************************\n");
+    return global.service_caches[serviceName];
 }
 
+// 定义一个函数用于设置全局验证函数，它也是模块对外暴露的接口，供外部传入具体的验证函数
+module.exports.setAuthFn = function (authFn) {
+    global.service_auth_fn = authFn;
+}

modules/database.js

@@ -1,77 +1,95 @@
+// 引入Node.js的mysql模块，用于与MySQL数据库进行交互（虽然此处只是引入，后续具体使用情况暂未明确体现）
 require('mysql');
+// 引入Node.js的文件系统模块fs，用于对文件进行读写等操作
 var fs = require("fs");
+// 引入orm模块，可能用于对象关系映射（Object Relational Mapping）相关操作，方便在Node.js中操作数据库
 var orm = require("orm");
+// 引入bluebird模块，用于提供更强大的Promise功能，便于处理异步操作
 var Promise = require("bluebird");
+// 引入path模块，用于处理文件路径相关的操作
 var path = require("path");
 
 /*
-	app: 应用程序环境
+ * initialize函数用于初始化数据库相关的配置以及加载ORM（对象关系映射）模型，
-	config: 数据库配置
+ * 它接收应用程序环境对象、回调函数作为参数，通过一系列操作完成数据库连接和模型加载，
-	callback: 回调
+ * 并在操作完成后通过回调函数返回相应结果。
-*/
+ * 
-function initialize(app,callback) {
+ * @param {Object} app - 应用程序环境对象，通常包含了应用的一些全局配置和上下文信息，可用于挂载数据库实例、模型等相关对象。
+ * @param {Function} callback - 回调函数，在数据库初始化及模型加载完成（成功或失败）后被调用，用于传递操作结果等信息。
+ */
+function initialize(app, callback) {
+    // 加载配置文件，通过config模块（这里应该是自定义的配置管理模块）获取名为"db_config"的配置信息
+    var config = require('config').get("db_config");
 
-	// 加载配置文件
+    // 从配置信息中提取数据库相关的配置参数，构建一个包含协议、主机、数据库名称、端口、用户名、密码以及查询相关配置（启用连接池、开启调试模式）的对象opts
-	var config = require('config').get("db_config");
+    var opts = {
-	
+        protocol: config.get("protocol"),
-	// 从配置中获取数据库配置
+        host: config.get("host"),
-	var opts = {
+        database: config.get("database"),
-		protocol : config.get("protocol"),
+        port: config.get("port"),
-		host : config.get("host"),
+        user: config.get("user"),
-		database : config.get("database"),
+        password: config.get("password"),
-		port : config.get("port"),
+        query: { pool: true, debug: true }
-		user : config.get("user"),
+    };
-		password : config.get("password"),
-		query : {pool: true,debug: true}
-	};
 
-	
+    // 在控制台打印数据库连接参数，将opts对象转换为JSON字符串格式输出，方便查看配置情况
-	console.log("数据库连接参数 %s",JSON.stringify(opts));
+    console.log("数据库连接参数 %s", JSON.stringify(opts));
 
-	// 初始化ORM模型
+    // 使用orm模块的express方法初始化ORM模型，将数据库配置参数opts以及一个包含define函数的对象作为参数传入
-	app.use(orm.express(opts, {
+    app.use(orm.express(opts, {
-		define: function (db, models, next) {
+        define: function (db, models, next) {
+            // 将数据库实例db挂载到应用程序环境对象app上，方便在其他地方访问数据库实例
+            app.db = db;
+            // 同时也将数据库实例挂载到全局对象global上，命名为database，不过使用全局变量需要谨慎，避免命名冲突等问题
+            global.database = db;
 
-			app.db = db;
+            // 获取映射文件的路径，通过拼接当前工作目录和"/models"来确定模型文件所在的文件夹路径
-			global.database = db;
+            var modelsPath = path.join(process.cwd(), "/models");
 
-			// 获取映射文件路径
+            // 使用文件系统模块的readdir方法读取指定路径下的所有文件（即模型文件），读取完成后会调用回调函数处理结果
-			var modelsPath = path.join(process.cwd(),"/models");
+            fs.readdir(modelsPath, function (err, files) {
-			
+                // 创建一个数组，用于存放所有加载模型的异步函数，每个元素对应一个模型文件的加载操作
-			// 读取所有模型文件
+                var loadModelAsynFns = new Array();
-			fs.readdir(modelsPath,function(err, files) {
+                // 以下循环遍历读取到的所有文件，准备加载每个模型文件对应的模型定义（通过db.loadAsync方法异步加载）
-				// 存放所有的加载模型函数
+                // console.log("开始加载 ORM 模型层文件 ");
-				var loadModelAsynFns = new Array();
+                for (var i = 0; i < files.length; i++) {
-				// console.log("开始加载 ORM 模型层文件 ");
+                    var modelPath = modelsPath + "/" + files[i];
-				for (var i = 0; i < files.length; i++) {
+                    // console.log("加载模型 %s", modelPath);
-					var modelPath = modelsPath + "/" +files[i];
+                    // 将每个模型文件的异步加载函数存入数组中，后续会统一处理这些异步加载操作
-					// console.log("加载模型 %s",modelPath);
+                    loadModelAsynFns[i] = db.loadAsync(modelPath);
-					loadModelAsynFns[i] = db.loadAsync(modelPath);
+                }
-				}
-				
-				Promise.all(loadModelAsynFns)
-				.then(function(){
-					// console.log("ORM 模型加载完成");
-					// 挂载模型集合
 
-					for(var modelName in db.models){
+                // 使用Promise.all方法来并行处理所有模型文件的加载操作，当所有加载操作都成功完成后，执行then回调函数
-						models[modelName] = db.models[modelName];
+                Promise.all(loadModelAsynFns)
-					}
+                   .then(function () {
-					app.models = models;
+                        // console.log("ORM 模型加载完成");
-					callback(null);
+                        // 遍历数据库实例中已加载的所有模型，将每个模型挂载到models对象上，方便统一管理和访问
-					next();
+                        for (var modelName in db.models) {
-				})
+                            models[modelName] = db.models[modelName];
-				.catch(function(error){
+                        }
-					console.error('加载模块出错 error: ' + err);
+                        // 将包含所有模型的models对象挂载到应用程序环境对象app上，方便在应用中使用模型进行数据库操作
-					callback(error);
+                        app.models = models;
-					next();
+                        // 调用传入的回调函数，传递null表示操作成功完成，无错误信息
-				});
+                        callback(null);
-			});
+                        // 执行next函数，用于告知orm模块相关操作已完成，可继续后续流程（具体取决于orm模块的设计和使用方式）
-		}
+                        next();
-	}));	
+                    })
+                   .catch(function (error) {
+                        // 如果在加载模型过程中出现错误，在控制台打印错误信息，同时调用回调函数并传递错误对象，告知调用者操作失败
+                        console.error('加载模块出错 error: ' + err);
+                        callback(error);
+                        // 同样执行next函数，告知orm模块相关流程结束（即便出现错误）
+                        next();
+                    });
+            });
+        }
+    }));
 }
 
+// 将initialize函数作为模块的一个属性暴露出去，方便其他模块引入并调用该函数进行数据库初始化操作
 module.exports.initialize = initialize;
-module.exports.getDatabase = function() {
+
-	return  global.database;
+// 定义一个函数用于获取全局的数据库实例对象，通过返回global对象上挂载的database属性（在initialize函数中进行挂载的）来实现
+module.exports.getDatabase = function () {
+    return global.database;
 }

modules/logger.js

@@ -1,20 +1,44 @@
+// 引入log4js模块，它是一个用于在Node.js应用中进行日志记录的常用库，能够方便地实现不同级别的日志输出以及日志的格式化、存储等功能
 var log4js = require('log4js');
 
+// 使用log4js的configure方法进行日志配置，配置项以对象形式传入
 log4js.configure({
-  appenders: { cheese: { type: 'file', filename: 'cheese.log' } },
+    // 配置日志的输出目标（appenders），这里定义了一个名为'cheese'的输出配置
-  categories: { default: { appenders: ['cheese'], level: 'error' } }
+    appenders: {
+        // 'type'指定了输出类型为'file'，即输出到文件
+        // 'filename'指定了输出的文件名是'cheese.log'，意味着日志信息将会被记录到该文件中
+        cheese: { type: 'file', filename: 'cheese.log' }
+    },
+    // 配置日志的分类（categories），用于将不同的日志记录器划分到不同的类别，并指定每个类别的相关属性
+    categories: {
+        // 'default'表示默认的日志类别
+        default: {
+            // 'appenders'数组指定了该类别使用的日志输出目标，这里只使用了前面定义的'cheese'输出目标
+            appenders: ['cheese'],
+            // 'level'指定了该类别日志记录的级别，这里设置为'error'，表示只有错误级别及以上的日志才会被记录到对应的输出目标中
+            level: 'error'
+        }
+    }
 });
 
+// 将一个名为'logger'的函数作为模块的属性导出，用于获取日志记录器实例
 exports.logger = function (level) {
+    // 通过log4js的getLogger方法获取名为'cheese'的日志记录器实例，后续可以使用这个实例来记录相应的日志信息
     var logger = log4js.getLogger("cheese");
+    // 设置该日志记录器的日志级别为'debug'，这意味着从调试级别（最低级别）开始的所有日志都会被记录，覆盖了之前配置中'default'类别里设置的'error'级别（此处修改可能根据实际需求而定）
     logger.level = 'debug';
+    // 返回配置好的日志记录器实例，外部模块可以调用该函数获取实例后进行日志记录操作
     return logger;
 };
 
-// 配合 express 使用的方法
+// 以下是一段被注释掉的代码，从函数名和使用方式来看，它原本是用于配合Express框架使用的方法，用于在Express应用中集成log4js日志记录功能
 // exports.use = function (app, level) {
+//     // 在Express应用中使用log4js的connectLogger中间件来记录请求相关的日志信息
+//     // 首先通过log4js的getLogger方法获取名为'logInfo'的日志记录器实例（这里假设'logInfo'是之前定义好的某个日志记录器名称，实际可能需要准确配置）
 //     app.use(log4js.connectLogger(log4js.getLogger('logInfo'), {
+//         // 设置日志记录的级别，它会尝试从传入的'level'参数获取对应级别，如果没有则使用默认的'debug'级别（这里的'levels'变量未在提供的代码中定义，可能是一个定义了不同日志级别映射关系的对象，实际应用中需要准确处理）
 //         level: levels[level] || levels['debug'],
+//         // 定义日志记录的格式，这里使用了简单的格式字符串，指定记录请求的方法、URL以及响应状态等信息，方便后续查看请求相关的日志详情
 //         format: ':method :url :status'
 //     }));
 // };

modules/passport.js

@@ -1,86 +1,123 @@
+// 引入Passport模块，它是Node.js中用于处理用户认证的常用中间件，可方便地集成多种认证策略
 const passport = require('passport');
+// 引入Passport的本地策略（LocalStrategy），通常用于基于用户名和密码的认证方式，比如常见的表单登录验证
 const LocalStrategy = require('passport-local').Strategy;
+// 引入Passport的HTTP Bearer策略（Strategy），常用于基于令牌（Token）的认证，比如JSON Web Tokens（JWT）认证场景
 const Strategy = require('passport-http-bearer').Strategy;
 
+// 引入jsonwebtoken模块，用于处理JSON Web Tokens（JWT）的生成、验证等操作
 var jwt = require("jsonwebtoken");
-
+// 引入Lodash库，它提供了很多实用的工具函数，用于处理数据、对象等，此处虽未明确体现具体使用的功能，但可能用于辅助数据操作等
 var _ = require('lodash');
-
+// 引入配置模块（config），并获取名为"jwt_config"的配置项，通常用于获取与JWT相关的配置信息，如密钥、过期时间等
 var jwt_config = require("config").get("jwt_config");
 
 // 通过登录函数初始化
 /**
- * 初始化 passport 框架
+ * 初始化passport框架
+ * 此函数的主要作用是配置Passport的不同认证策略，并将Passport初始化到给定的应用程序（app）中，
+ * 同时提供回调机制，方便在初始化完成后执行额外的操作。
  * 
- * @param  {[type]}   app       全局应用程序
+ * @param {[type]} app       全局应用程序，通常是Express等Web框架创建的应用实例，用于挂载中间件等操作。
- * @param  {[type]}   loginFunc 登录函数
+ * @param {[type]} loginFunc 登录函数，用于执行具体的用户名和密码验证逻辑，比如查询数据库验证用户输入的用户名和密码是否匹配等操作。
- * @param  {Function} callback  回调函数
+ * @param {Function} callback 回调函数，在Passport初始化及相关策略配置完成后被调用，可用于执行后续自定义的初始化步骤等操作（可选参数）。
  */
-module.exports.setup = function(app,loginFunc,callback) {
+module.exports.setup = function (app, loginFunc, callback) {
-	// 用户名密码 登录策略
+    // 用户名密码 登录策略
-	passport.use(new LocalStrategy(
+    // 使用Passport的LocalStrategy配置基于用户名和密码的认证策略
-		function(username, password, done) {
+    passport.use(new LocalStrategy(
-			if(!loginFunc) return done("登录验证函数未设置");
+        // 定义验证逻辑函数，接收用户名、密码以及回调函数（done）作为参数
+        function (username, password, done) {
+            // 如果没有传入登录验证函数（loginFunc），则直接通过回调函数（done）返回错误信息，表示登录验证函数未设置
+            if (!loginFunc) return done("登录验证函数未设置");
 
-			loginFunc(username,password,function(err,user) {
+            // 调用传入的登录验证函数（loginFunc），传入用户名和密码进行验证，验证完成后会在回调函数中返回结果
-				if(err) return done(err);
+            loginFunc(username, password, function (err, user) {
-				return done(null, user);
+                // 如果验证过程中出现错误，通过回调函数（done）返回错误信息给Passport，告知认证失败原因
-			});
+                if (err) return done(err);
-		})
+                // 如果验证成功，通过回调函数（done）返回用户信息（通常是包含用户相关数据的对象）给Passport，表示认证成功
-	);
+                return done(null, user);
+            });
+        }
+    ));
 
-	// token 验证策略
+    // token验证策略
-	passport.use(new Strategy(
+    // 使用Passport的HTTP Bearer策略配置基于令牌（Token）的认证策略
-		function(token, done) {
+    passport.use(new Strategy(
-			jwt.verify(token, jwt_config.get("secretKey"), function (err, decode) {
+        // 定义验证逻辑函数，接收令牌（token）以及回调函数（done）作为参数
-				if (err) { return done("验证错误"); }
+        function (token, done) {
-				return done(null, decode);
+            // 使用jsonwebtoken模块的verify方法验证传入的令牌（token）是否有效，
-			});
+            // 传入令牌、配置中的密钥（jwt_config.get("secretKey")）以及验证回调函数，验证回调函数接收验证结果（err）和解析后的令牌数据（decode）作为参数
-		}
+            jwt.verify(token, jwt_config.get("secretKey"), function (err, decode) {
- 	));
+                // 如果验证过程中出现错误，通过回调函数（done）返回错误信息给Passport，表示令牌验证失败
+                if (err) { return done("验证错误"); }
+                // 如果验证成功，通过回调函数（done）返回解析后的令牌数据（decode）给Passport，表示令牌验证通过
+                return done(null, decode);
+            });
+        }
+    ));
 
-	// 初始化passport模块
+    // 初始化passport模块
-	app.use(passport.initialize());
+    // 将Passport中间件初始化到应用程序（app）中，使其能够在后续的请求处理流程中生效，用于处理各种认证相关的操作
+    app.use(passport.initialize());
 
-	if(callback) callback();
+    // 如果传入了回调函数（callback），则执行该回调函数，用于在初始化完成后执行额外的自定义操作
+    if (callback) callback();
 };
 
 /**
  * 登录验证逻辑
+ * 此函数主要用于处理基于用户名和密码的登录请求验证逻辑，通过调用Passport的认证中间件进行验证，
+ * 根据验证结果生成相应的响应信息返回给客户端，包括在验证成功时生成并返回JWT令牌等操作。
  * 
- * @param  {[type]}   req  请求
+ * @param {[type]} req  请求对象，包含了客户端发送的请求相关信息，如请求头、请求体等内容，常用于获取用户名、密码等登录信息。
- * @param  {[type]}   res  响应
+ * @param {[type]} res  响应对象，用于向客户端发送响应信息，如返回登录成功或失败的消息、生成的令牌等内容。
- * @param  {Function} next [description]
+ * @param {Function} next 传递事件函数，用于将请求传递给下一个中间件继续处理（在Express等框架的中间件链机制中使用），此处未明确体现后续传递逻辑，但遵循中间件规范保留该参数。
  */
-module.exports.login = function(req,res,next) {
+module.exports.login = function (req, res, next) {
+    // 使用Passport的authenticate方法，传入'local'表示采用之前配置的基于用户名和密码的本地认证策略进行认证，
+    // 同时传入一个回调函数用于处理认证结果，该回调函数接收认证过程中的错误（err）、认证通过后的用户信息（user）以及额外的提示信息（info）作为参数
+    passport.authenticate('local', function (err, user, info) {
+        // 如果认证过程中出现错误，使用响应对象（res）的sendResult方法（这里假设是自定义的用于统一返回响应格式的方法）向客户端发送包含错误状态码（400表示请求错误）和错误信息的响应
+        if (err) return res.sendResult(null, 400, err);
+        // 如果没有获取到用户信息（即认证失败，未找到匹配的用户），同样使用响应对象的sendResult方法向客户端发送包含错误状态码和相应错误提示信息的响应
+        if (!user) return res.sendResult(null, 400, "参数错误");
 
-	passport.authenticate('local', function(err, user, info) {
+        // 获取角色信息
-		
+        // 使用jsonwebtoken模块的sign方法生成JWT令牌，传入包含用户ID（uid）和角色ID（rid）的对象、配置中的密钥以及令牌过期时间等配置信息，生成一个有效的JWT令牌
-		if(err) return res.sendResult(null,400,err);
+        var token = jwt.sign({"uid": user.id, "rid": user.rid}, jwt_config.get("secretKey"), {"expiresIn": jwt_config.get("expiresIn")});
-		if(!user) return res.sendResult(null,400,"参数错误");
+        // 将生成的令牌添加到用户对象中，并添加"Bearer "前缀，符合Bearer Token的规范格式，方便后续在请求头中传递和验证
-
+        user.token = "Bearer " + token;
-		// 获取角色信息
+        // 使用响应对象的sendResult方法向客户端发送包含用户信息、成功状态码（200）以及登录成功消息的响应，表示登录操作成功完成，并返回相关用户数据和令牌
-		var token = jwt.sign({"uid":user.id,"rid":user.rid}, jwt_config.get("secretKey"), {"expiresIn": jwt_config.get("expiresIn")});
+        return res.sendResult(user, 200, '登录成功');
-		user.token = "Bearer " + token;
+    })(req, res, next);
-		return res.sendResult(user,200,'登录成功');
+};
-	})(req, res, next);
-	
-}
 
 /**
  * token验证函数
+ * 此函数用于处理基于令牌（Token）的验证逻辑，通过调用Passport的相应认证中间件验证传入的令牌是否有效，
+ * 根据验证结果设置请求对象（req）中的用户信息，并决定是否将请求传递给下一个中间件继续处理。
  * 
- * @param  {[type]}   req  请求对象
+ * @param {[type]} req  请求对象，包含了客户端发送的请求相关信息以及在验证通过后可用于存储用户相关数据等内容，方便后续中间件使用验证后的用户信息进行业务逻辑处理。
- * @param  {[type]}   res  响应对象
+ * @param {[type]} res  响应对象，用于向客户端发送响应信息，如在令牌验证失败时返回相应的错误消息等内容。
- * @param  {Function} next 传递事件函数
+ * @param {Function} next 传递事件函数，用于将请求传递给下一个中间件继续处理，在令牌验证通过后会调用该函数将请求传递下去，让后续中间件继续执行相应的业务逻辑。
  */
-module.exports.tokenAuth = function(req,res,next) {
+module.exports.tokenAuth = function (req, res, next) {
-	passport.authenticate('bearer', { session: false },function(err,tokenData) {
+    // 使用Passport的authenticate方法，传入'bearer'表示采用之前配置的基于HTTP Bearer的认证策略进行令牌验证，
-		if(err) return res.sendResult(null,400,'无效token');
+    // 同时传入{ session: false }表示不依赖会话（Session）进行验证（常用于无状态的API认证场景，如基于JWT的认证），
-		if(!tokenData) return res.sendResult(null,400,'无效token');
+    // 并传入一个回调函数用于处理验证结果，该回调函数接收验证过程中的错误（err）以及验证通过后的令牌数据（tokenData）作为参数
-		req.userInfo = {};
+    passport.authenticate('bearer', { session: false }, function (err, tokenData) {
-		req.userInfo.uid = tokenData["uid"];
+        // 如果验证过程中出现错误，使用响应对象（res）的sendResult方法向客户端发送包含错误状态码（400表示请求错误）和相应错误提示信息（无效token）的响应
-		req.userInfo.rid = tokenData["rid"];
+        if (err) return res.sendResult(null, 400, '无效token');
-		next();
+        // 如果没有获取到有效的令牌数据（即令牌验证失败），同样使用响应对象的sendResult方法向客户端发送包含错误状态码和相应错误提示信息的响应
-	})(req, res, next);
+        if (!tokenData) return res.sendResult(null, 400, '无效token');
-}
+        // 如果令牌验证通过，在请求对象（req）中创建一个空的用户信息对象（userInfo），用于存储从令牌中解析出的相关用户信息，方便后续中间件使用
+        req.userInfo = {};
+        // 将从令牌数据（tokenData）中解析出的用户ID（uid）存储到请求对象的用户信息对象中
+        req.userInfo.uid = tokenData["uid"];
+        // 将从令牌数据（tokenData）中解析出的角色ID（rid）存储到请求对象的用户信息对象中
+        req.userInfo.rid = tokenData["rid"];
+        // 调用传递事件函数（next），将请求传递给下一个中间件继续处理，表示令牌验证通过，后续中间件可以基于请求对象中的用户信息进行相应的业务逻辑操作
+        next();
+    })(req, res, next);
+}

modules/resextra.js

@@ -1,17 +1,29 @@
 // 添加统一的返回结果方法
-module.exports = function(req, res, next){
+// 此代码将一个函数作为模块的导出内容，该函数很可能作为中间件在 Express 等 Node.js 的 Web 框架中使用，
-	res.sendResult = function(data,code,message) {
+// 目的是为响应对象（res）添加一个自定义的 `sendResult` 方法，用于统一格式化返回给客户端的结果数据。
-		var fmt = req.query.fmt ? req.query.fmt : "rest";
+module.exports = function (req, res, next) {
-		if(fmt == "rest") {
+    // 为响应对象（res）添加 `sendResult` 方法，用于按照特定格式向客户端返回结果数据，
-			res.json(
+    // 该方法接收要返回的数据（data）、状态码（code）以及提示消息（message）作为参数。
-			{
+    res.sendResult = function (data, code, message) {
-				"data" : data, 
+        // 获取请求对象（req）中查询参数（query）里名为 `fmt` 的参数值，若不存在则默认为 "rest"，
-				"meta" : {
+        // 这个参数用于指定返回结果的格式，这里根据不同的值可以实现不同的返回格式逻辑（目前仅实现了 "rest" 格式）。
-					"msg" 		: message,
+        var fmt = req.query.fmt? req.query.fmt : "rest";
-					"status" 	: code
+        // 判断返回结果的格式是否为 "rest"，如果是，则按照相应的 JSON 格式进行数据组装并返回给客户端。
-				}
+        if (fmt == "rest") {
-			});
+            res.json(
-		}
+                {
-	};
+                    // 将传入的要返回的数据（data）放置在 "data" 字段下。
-	next();
+                    "data": data,
+                    "meta": {
+                        // 将传入的提示消息（message）放置在 "meta" 字段下的 "msg" 子字段中，用于告知客户端相关操作的提示信息。
+                        "msg": message,
+                        // 将传入的状态码（code）放置在 "meta" 字段下的 "status" 子字段中，用于告知客户端操作的状态，比如 200 表示成功，400 表示客户端错误等。
+                        "status": code
+                    }
+                });
+        }
+    };
+    // 调用 `next` 函数，将请求传递给下一个中间件继续处理，遵循 Express 等框架中间件的执行顺序和规范，
+    // 保证整个请求处理流程能够继续进行下去。
+    next();
 }

modules/ueditor.js

@@ -1,67 +1,101 @@
+// 引入Lodash库，它提供了很多实用的工具函数，用于处理数据、对象、数组等操作，虽然此处未明确体现具体使用的功能，但后续可能会借助它进行一些便捷的数据处理
 var _ = require('lodash');
+// 引入Node.js的path模块，用于处理文件路径相关的操作，比如拼接、解析路径等
 var path = require("path");
+// 引入Busboy模块，它常用于处理文件上传的中间件，能够方便地解析包含文件的HTTP请求中的文件数据
 var Busboy = require('busboy');
+// 引入Node.js的文件系统模块fs，用于对文件进行读写、查询目录等操作
 var fs = require("fs");
+// 引入uniqid模块，用于生成唯一的标识符，在这里可能用于为上传的文件生成唯一的文件名
 var uniqid = require('uniqid');
-var ueditor_config = require(path.join(process.cwd(),"/config/ueditor.config.js"));
+// 引入UEditor的配置文件，通过拼接当前工作目录和配置文件的相对路径来获取其准确路径，该配置文件可能包含了UEditor相关的各种配置参数，如上传路径、允许的文件类型等
+var ueditor_config = require(path.join(process.cwd(), "/config/ueditor.config.js"));
+// 引入项目的上传配置信息，通过配置模块（config）获取名为"upload_config"的配置项，里面应该包含了如上传目录、基础URL等与上传相关的配置内容
 var upload_config = require('config').get("upload_config");
 
+// 定义允许上传的文件类型列表，以逗号分隔的字符串形式表示，目前包含了常见的图片文件类型以及ico、bmp文件类型
 var filetype = 'jpg,png,gif,ico,bmp';
-module.exports = function(req,res,next) {
 
-	if(req.query.action == "config") {
+// 将一个函数作为模块的导出内容，这个函数很可能作为中间件在Express等Node.js的Web框架中使用，用于处理不同UEditor相关的请求操作，比如获取配置、上传文件、获取文件列表等
-		// 吐给客户端配置信息 
+module.exports = function (req, res, next) {
-		res.jsonp(ueditor_config);
+    // 判断请求中的查询参数action的值是否为"config"，如果是，则表示客户端请求获取UEditor的配置信息
-	} else if (req.query.action === 'uploadimage' || req.query.action === 'uploadfile' || req.query.action === 'uploadvideo') {
+    if (req.query.action == "config") {
-		var busboy = new Busboy({ headers: req.headers });
+        // 使用res.jsonp方法将UEditor的配置信息（ueditor_config）返回给客户端，jsonp是一种跨域数据传输的方式，常用于解决浏览器的同源策略限制问题，使得客户端能够获取到配置数据
-		busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
+        res.jsonp(ueditor_config);
-			var fileExtArray = filename.split(".");
+    } else if (req.query.action === 'uploadimage' || req.query.action === 'uploadfile' || req.query.action === 'uploadvideo') {
-			var ext = fileExtArray[fileExtArray.length - 1];
+        // 创建一个Busboy实例，用于解析包含文件上传的请求，传入请求头（headers）信息，使得Busboy能够根据请求头中的相关信息（如Content-Type等）来正确解析文件数据
-			var save_filename = uniqid() + "." + ext;
+        var busboy = new Busboy({ headers: req.headers });
-			var savePath = path.join(process.cwd(),upload_config.get("upload_ueditor"),save_filename);
-			file.on('end', function () {
-				var result = {
-				'url': upload_config.get("baseURL")+"/" + upload_config.get("upload_ueditor") + "/" + save_filename,
-				'title': req.body && req.body.pictitle || filename,
-				'original': filename,
-				'state': 'SUCCESS'
-				};
-				if(req.query.encode) {
-					res.jsonp(result);
-				} else {
 
-					res.redirect(upload_config.get("simple_upload_redirect") + "?result=" + JSON.stringify(result));
+        // 监听Busboy实例的'file'事件，当解析到文件数据时，该事件会被触发，事件回调函数接收多个参数，用于获取文件相关的各种信息
-					// res.redirect(result.url);
+        busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
-				}
+            // 将文件名（filename）按"."进行分割，得到一个包含文件名各部分的数组，用于提取文件的扩展名
-				
+            var fileExtArray = filename.split(".");
-			});
+            // 获取文件扩展名，即分割后的数组中的最后一个元素
+            var ext = fileExtArray[fileExtArray.length - 1];
+            // 使用uniqid模块生成一个唯一的标识符，并与文件扩展名拼接起来，作为保存文件时使用的文件名，这样可以确保文件名的唯一性，避免文件覆盖等问题
+            var save_filename = uniqid() + "." + ext;
+            // 拼接文件保存的完整路径，通过结合当前工作目录、配置中的上传目录（upload_config.get("upload_ueditor")）以及生成的文件名（save_filename）来确定最终保存位置
+            var savePath = path.join(process.cwd(), upload_config.get("upload_ueditor"), save_filename);
 
-			file.pipe(fs.createWriteStream(savePath));
+            // 监听文件流（file）的'end'事件，当文件数据全部读取完毕后，该事件会被触发，在这里可以进行一些后续操作，比如组装返回给客户端的文件上传结果信息
-		});
+            file.on('end', function () {
-		req.pipe(busboy);
+                // 组装文件上传成功后的结果对象，包含文件的访问URL、标题（可根据请求体中的pictitle字段获取，如果不存在则使用原始文件名）、原始文件名以及表示上传状态为成功的标志
-	} else if(req.query.action === 'listimage') {
+                var result = {
-		fs.readdir(path.join(process.cwd(),upload_config.get("upload_ueditor")),function(err, files){
+                    'url': upload_config.get("baseURL") + "/" + upload_config.get("upload_ueditor") + "/" + save_filename,
-			if(err) return res.end();
+                    'title': req.body && req.body.pictitle || filename,
-			var total = files.length;
+                    'original': filename,
+                    'state': 'SUCCESS'
+                };
+                // 判断请求中是否包含encode参数，如果有，则使用res.jsonp方法将结果对象以JSONP的形式返回给客户端，同样是考虑到跨域等情况的一种数据返回方式
+                if (req.query.encode) {
+                    res.jsonp(result);
+                } else {
+                    // 如果没有encode参数，使用res.redirect方法进行重定向，重定向的URL由配置中的简单上传重定向地址（upload_config.get("simple_upload_redirect")）和文件上传结果信息（经过JSON.stringify转换为字符串形式）拼接而成，这样客户端可以根据重定向后的地址获取到上传结果信息
+                    // 另一个被注释掉的res.redirect(result.url)，原本可能是直接重定向到文件的访问URL，但这里采用了传递结果信息的重定向方式
+                    res.redirect(upload_config.get("simple_upload_redirect") + "?result=" + JSON.stringify(result));
+                }
+            });
 
-			var filelist = [];
+            // 将文件流（file）通过管道（pipe）写入到创建的可写文件流（fs.createWriteStream(savePath)）中，实现将上传的文件保存到指定的文件路径下
-			var total = 0;
+            file.pipe(fs.createWriteStream(savePath));
-			_(files).forEach(function(file){
+        });
-				var fileExtArray = file.split(".");
+
-				var ext = fileExtArray[fileExtArray.length - 1];
+        // 将请求对象（req）通过管道（pipe）传入到Busboy实例中，触发Busboy开始解析请求中的文件数据，从而进入上述的文件上传处理流程
-				if (filetype.indexOf(ext.toLowerCase()) >= 0) {
+        req.pipe(busboy);
-					var result_file = {};
+    } else if (req.query.action === 'listimage') {
-					result_file.url = upload_config.get("baseURL")+"/" + upload_config.get("upload_ueditor") + "/" + file;
+        // 使用文件系统模块（fs）的readdir方法读取指定目录下的所有文件，目录路径通过结合当前工作目录和配置中的上传目录（upload_config.get("upload_ueditor")）来确定，读取完成后会调用回调函数处理结果（err表示读取过程中是否出现错误，files表示读取到的文件列表）
-					filelist.push(result_file);
+        fs.readdir(path.join(process.cwd(), upload_config.get("upload_ueditor")), function (err, files) {
-					total ++;
+            // 如果读取过程中出现错误，直接结束响应，不返回任何数据给客户端（这里可以考虑返回更合适的错误信息给客户端）
-				}
+            if (err) return res.end();
-			});
+            // 初始化一个变量用于统计符合条件的文件总数，初始值为0
-			res.jsonp({
+            var total = 0;
-				"state": "SUCCESS",
+            // 创建一个空数组，用于存放符合条件的文件信息，后续会将满足文件类型要求的文件相关信息添加到这个数组中
-				"list": filelist,
+            var filelist = [];
-				"start": 1,
+
-				"total": total
+            // 使用Lodash的forEach方法遍历读取到的所有文件，对每个文件进行相关处理
-              });
+            _(files).forEach(function (file) {
-		})
+                // 将文件名按"."进行分割，获取文件扩展名，用于后续判断文件类型是否符合要求
-	}
+                var fileExtArray = file.split(".");
+                var ext = fileExtArray[fileExtArray.length - 1];
+                // 判断文件扩展名是否在允许的文件类型列表（filetype）中（将扩展名转换为小写后进行判断），如果是，则表示该文件符合要求，进行相应的信息组装和添加到文件列表操作
+                if (filetype.indexOf(ext.toLowerCase()) >= 0) {
+                    var result_file = {};
+                    // 组装文件的访问URL，格式与前面文件上传成功后的URL格式类似，通过配置中的基础URL、上传目录以及文件名来确定
+                    result_file.url = upload_config.get("baseURL") + "/" + upload_config.get("upload_ueditor") + "/" + file;
+                    // 将组装好的文件信息对象添加到文件列表数组中
+                    filelist.push(result_file);
+                    // 符合条件的文件总数加1
+                    total++;
+                }
+            });
+
+            // 使用res.jsonp方法将包含文件列表信息、状态（SUCCESS表示成功获取列表）、起始索引（这里固定为1）以及文件总数的结果对象返回给客户端，同样采用JSONP的方式考虑跨域等情况进行数据传输
+            res.jsonp({
+                "state": "SUCCESS",
+                "list": filelist,
+                "start": 1,
+                "total": total
+            });
+        })
+    }
 }

public/index.html

@@ -1,44 +1,62 @@
 <!DOCTYPE html>
+<!-- 定义文档类型为HTML5，告知浏览器按照HTML5的标准来解析和渲染此页面 -->
 <html lang="en">
-  <head>
+<head>
+    <!-- 设置字符编码为UTF-8-->
+    <!--确保页面中的各种字符（包括中文、特殊符号等）能够正确显示，避免出现乱码问题 -->
     <meta charset="utf-8">
+    <!-- 强制IE浏览器使用最新的渲染引擎，目的是让IE浏览器尽可能以符合现代网页标准的方式来渲染页面内容，提升页面在IE浏览器中的显示效果和兼容性 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- 设置视口，确保页面在移动设备上正确显示。width=device-width表示视口宽度等于设备宽度，initial-scale=1.0表示初始缩放比例为1，也就是页面初始加载时按照原始尺寸显示，不会进行缩放 -->
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- 设置网站图标，href属性中的<%= BASE_URL %>是一个模板语法（可能基于构建工具，如Webpack等），会被替换为实际的基础路径，指向网站图标文件favicon.ico所在位置，该图标会显示在浏览器标签页、书签栏等位置，用于标识网站 -->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
+    <!-- 根据是否是生产环境设置标题，htmlWebpackPlugin.options.isProd是一个布尔值（通过构建工具的插件配置传入），如果是生产环境（isProd为true），则标题只显示“电商后台管理系统”，如果是非生产环境（isProd为false），标题会显示“dev - 电商后台管理系统”，方便在开发阶段和正式上线阶段区分页面 -->
+    <title><%= htmlWebpackPlugin.options.isProd? '' : 'dev - ' %>电商后台管理系统</title>
 
     <% if(htmlWebpackPlugin.options.isProd){ %>
-    <!-- nprogress 的样式表文件 -->
+    <!-- 如果是生产环境，加载nprogress的样式表文件。nprogress通常用于在页面加载、路由切换等操作时显示进度条，这里通过CDN（内容分发网络）引入其最小化的样式表文件，以减少文件体积并提升加载速度 -->
     <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
-    <!-- 富文本编辑器 的样式表文件 -->
+    <!-- 加载富文本编辑器Quill的样式表文件，Quill用于在网页中实现富文本编辑功能（如编辑带有格式的文章、文档等），此处通过CDN引入其核心样式文件（quill.core.min.css），用于定义基本的编辑区域样式等 -->
     <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
+    <!-- 加载Quill的一种主题样式表文件（quill.snow.min.css），Quill提供了不同的主题样式，“snow”主题可能具有特定的外观风格，比如按钮样式、文本框外观等，用于给富文本编辑区域赋予相应的视觉效果 -->
     <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
+    <!-- 加载Quill的另一种主题样式表文件（quill.bubble.min.css），与“snow”主题不同，“bubble”主题有着别样的样式呈现，可能用于满足不同的设计需求和用户体验要求 -->
     <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
-    <!-- element-ui 的样式表文件 -->
+    <!-- 加载Element UI框架的样式表文件，Element UI是一个基于Vue.js的UI组件库，提供了丰富的组件（如按钮、表单、表格等）来快速构建页面界面，这里引入其主题样式文件（theme-chalk/index.css），使其组件按照设定的样式显示 -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-    
+
+    <!-- 加载Vue.js库，通过CDN引入Vue.js的最小化版本（vue.min.js），Vue.js是一个用于构建用户界面的渐进式JavaScript框架，是整个项目实现响应式界面、组件化开发等功能的核心基础 -->
     <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
+    <!-- 加载Vue Router库，同样通过CDN引入其最小化版本（vue-router.min.js），Vue Router用于在Vue.js项目中实现路由功能，即管理页面之间的跳转和导航逻辑 -->
     <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
+    <!-- 加载Axios库，用于HTTP请求，通过CDN引入最小化版本（axios.min.js），Axios可以方便地在JavaScript中发起各种HTTP请求（如GET、POST等），用于与后端服务器进行数据交互 -->
     <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
+    <!-- 加载Lodash库，提供实用函数，通过CDN引入最小化版本（lodash.min.js），Lodash包含了大量用于操作数组、对象、字符串等数据类型的实用函数，能帮助简化开发过程中的一些复杂数据处理逻辑 -->
     <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
+    <!-- 加载ECharts库，用于数据可视化，通过CDN引入最小化版本（echarts.min.js），ECharts可以帮助将数据以各种图表（如柱状图、折线图、饼图等）的形式展示出来，方便直观地分析和呈现数据 -->
     <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
+    <!-- 加载nprogress的JavaScript文件，与前面加载的样式表文件配合使用，用于在页面加载、操作过程中控制进度条的显示逻辑，实现动态的进度展示效果 -->
     <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
-    <!-- 富文本编辑器的 js 文件 -->
+    <!-- 加载富文本编辑器Quill的JavaScript文件，使前面引入的Quill样式表生效，并且为页面赋予富文本编辑的功能，让用户可以在页面中进行文本的编辑操作 -->
     <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
+    <!-- 加载Vue Quill Editor的JavaScript文件，用于Vue集成Quill，使得Quill富文本编辑器能够更好地与Vue.js项目结合使用，方便在Vue组件中调用和操作Quill的功能 -->
     <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
 
-    <!-- element-ui 的 js 文件 -->
+    <!-- 加载Element UI框架的JavaScript文件，使前面引入的Element UI样式表对应的组件具备交互功能，-->
+    <!--从而可以在页面中使用Element UI提供的各种UI组件来构建页面界面 -->
     <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
 
-
     <% } %>
 
-  </head>
+</head>
-  <body>
+<body>
+    <!-- 如果浏览器禁用JavaScript，显示警告信息，告知用户此电商后台管理系统需要启用JavaScript才能正常工作，引导用户开启JavaScript功能，以便继续使用页面 -->
     <noscript>
-      <strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        <strong>We're sorry but vue_shop_admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
+    <!-- Vue应用挂载点，这是Vue.js项目中用于将Vue实例挂载到DOM节点上的标识，后续通过JavaScript代码会将创建的Vue实例挂载到这个id为“app”的div元素上，使得Vue应用的内容能够渲染显示在页面中 -->
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <!-- 构建后的文件将自动注入到此处，意味着通过构建工具（如Webpack等）打包生成的JavaScript、CSS等文件，会按照配置自动插入到这个位置，实现页面的最终整合和功能呈现 -->
-  </body>
+</body>
-</html>
+</html>

public2/ueditor/dialogs/anchor/anchor.html

@@ -1,40 +1,78 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-    "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
+<!-- 以上是HTML文档类型声明，指定该文档遵循HTML 4.01 Transitional标准，并且关联对应的DTD（文档类型定义）文件 -->
 <html>
-    <head>
+<head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <title></title>
+    <!-- 此meta标签用于设置文档的字符编码为UTF-8，确保页面中的文字能正确显示 -->
-        <style type="text/css">
+    <title></title>
-            *{color: #838383;margin: 0;padding: 0}
+    <style type="text/css">
-            html,body {font-size: 12px;overflow: hidden; }
+        /* 以下是CSS样式定义部分，用于设置页面元素的样式 */
-            .content{padding:5px 0 0 15px;}
+        * {
-            input{width:210px;height:21px;line-height:21px;margin-left: 4px;}
+            color: #838383; /* 设置所有元素的文本颜色为灰色（#838383） */
-        </style>
+            margin: 0; /* 清除所有元素的外边距 */
-    </head>
+            padding: 0; /* 清除所有元素的内边距 */
-    <body>
+        }
-        <div class="content">
+
-            <span><var id="lang_input_anchorName"></var></span><input id="anchorName"  value="" />
+        html, body {
-        </div>
+            font-size: 12px; /* 设置html和body元素的字体大小为12px */
-        <script type="text/javascript" src="../internal.js"></script>
+            overflow: hidden; /* 隐藏html和body元素的滚动条，防止内容超出可视区域时出现滚动条 */
-        <script type="text/javascript">
+        }
-            var anchorInput = $G('anchorName'),
+
-                node = editor.selection.getRange().getClosedNode();
+        .content {
-            if(node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))){
+            padding: 5px 0 0 15px; /* 为类名为'content'的元素设置内边距，上内边距为5px，左内边距为15px，下内边距和右内边距为0 */
-                anchorInput.value = node;
+        }
-            }
+
-            anchorInput.onkeydown = function(evt){
+        input {
-                evt = evt || window.event;
+            width: 210px; /* 设置input输入框的宽度为210px */
-                if(evt.keyCode == 13){
+            height: 21px; /* 设置input输入框的高度为21px */
-                    editor.execCommand('anchor', anchorInput.value);
+            line-height: 21px; /* 设置input输入框内文本的行高与高度一致，实现垂直居中效果 */
-                    dialog.close();
+            margin-left: 4px; /* 设置input输入框的左边距为4px */
-                    domUtils.preventDefault(evt)
+        }
-                }
+    </style>
-            };
+</head>
-            dialog.onok = function (){
+<body>
+    <div class="content">
+        <span><var id="lang_input_anchorName"></var></span><input id="anchorName" value="" />
+        <!-- 创建一个类名为'content'的div容器，里面包含一个span元素（其中嵌套了一个带有特定id的var元素，不过此处var元素未显示具体内容，可能后续通过脚本操作）和一个id为'anchorName'的input输入框，输入框初始值为空 -->
+    </div>
+    <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入一个外部的JavaScript文件（相对路径为'../internal.js'），这个文件里应该包含了一些在后续脚本中会用到的函数、变量等定义，比如可能定义了$G、editor、dialog、domUtils、$focus等在下面脚本中出现的对象或函数 -->
+    <script type="text/javascript">
+        var anchorInput = $G('anchorName'),
+            node = editor.selection.getRange().getClosedNode();
+        // 通过调用$G函数（应该是在引入的'internal.js'文件中定义的获取元素的函数，类似document.getElementById的功能）获取id为'anchorName'的元素，赋值给anchorInput变量，
+        // 同时通过editor对象（可能是一个编辑器相关的全局对象，具体功能依赖其定义）获取当前选区范围的闭合节点（可能是在文本编辑器之类的场景下获取当前选中区域对应的DOM节点），赋值给node变量
+
+        if (node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))) {
+            anchorInput.value = node;
+        }
+        // 判断获取到的节点node是否存在，并且其标签名是否为'IMG'（表示是一个图片元素），如果是，则获取该图片元素的'anchorname'属性值（这里将属性值又赋值给node变量，覆盖了之前的节点对象，可能代码逻辑意图不太清晰，或许可以使用另一个变量来接收属性值更好），
+        // 然后将获取到的属性值设置为id为'anchorName'的input输入框的value值，也就是将图片元素的'anchorname'属性值显示在输入框中
+
+        anchorInput.onkeydown = function (evt) {
+            evt = evt || window.event;
+            if (evt.keyCode == 13) {
                 editor.execCommand('anchor', anchorInput.value);
                 dialog.close();
-            };
+                domUtils.preventDefault(evt)
-            $focus(anchorInput);
+            }
-        </script>
+        };
-    </body>
+        // 为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输入框）上，方便用户直接输入内容
+    </script>
+</body>
 </html>

public2/ueditor/dialogs/attachment/attachment.html

@@ -1,60 +1,86 @@
 <!doctype html>
+<!-- 这是 HTML5 的文档类型声明，告知浏览器按照 HTML5 标准来解析页面内容 -->
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>ueditor图片对话框</title>
+    <!-- 设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文等特殊字符 -->
+    <title>ueditor 图片对话框</title>
+    <!-- 定义页面在浏览器标签页中显示的标题 -->
     <script type="text/javascript" src="../internal.js"></script>
-
+    <!-- 引入一个相对路径为../internal.js 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
     <!-- jquery -->
     <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
-
+    <!-- 引入 jQuery 库的压缩版本，版本号为 1.10.2，jQuery 是一个广泛使用的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画效果等操作，方便进行前端开发 -->
     <!-- webuploader -->
     <script src="../../third-party/webuploader/webuploader.min.js"></script>
+    <!-- 引入 webuploader 库的压缩版本，webuploader 常用于实现文件上传功能，提供了丰富的接口和交互逻辑来处理文件上传相关的操作 -->
     <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">
-
+    <!-- 引入与 webuploader 库对应的 CSS 样式文件，用于设置 webuploader 相关组件在页面中的外观样式，如文件上传按钮、进度条等的样式 -->
     <!-- attachment dialog -->
     <link rel="stylesheet" href="attachment.css" type="text/css" />
+    <!-- 引入名为 attachment.css 的本地 CSS 样式文件，该文件应该定义了页面中与附件相关的对话框等元素的特定样式，用于页面整体的布局和视觉呈现 -->
 </head>
 <body>
-
     <div class="wrapper">
+        <!-- 创建一个类名为'wrapper'的 div 容器，可能作为整个页面内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制 -->
         <div id="tabhead" class="tabhead">
+            <!-- 创建一个 id 为'tabhead'且类名为'tabhead'的 div 容器，用于放置选项卡相关的元素，从类名推测可能是选项卡头部区域 -->
             <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
+            <!-- 创建一个类名为'tab'且具有'focus'类名（可能表示当前选中状态）的 span 元素，通过 data-content-id 属性设置了与'upload'相关联的值，内部嵌套一个带有特定 id 的 var 元素（var 元素内容可能通过 JavaScript 动态设置，此处未明确显示具体文本），该 span 元素可能代表"上传图片"这个选项卡 -->
             <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
+            <!-- 创建一个类名为'tab'的 span 元素，通过 data-content-id 属性设置了与'online'相关联的值，同样内部嵌套一个带有特定 id 的 var 元素，该 span 元素可能代表"在线图片"这个选项卡 -->
         </div>
         <div id="tabbody" class="tabbody">
+            <!-- 创建一个 id 为'tabbody'且类名为'tabbody'的 div 容器，应该是用于展示与选项卡对应的内容区域，与上面的'tabhead'区域相对应 -->
             <!-- 上传图片 -->
             <div id="upload" class="panel focus">
+                <!-- 创建一个 id 为'upload'且类名为'panel'并具有'focus'类名（可能表示当前显示状态）的 div 容器，用于展示上传图片相关的界面内容，比如文件选择、上传进度等 -->
                 <div id="queueList" class="queueList">
+                    <!-- 创建一个 id 为'queueList'且类名为'queueList'的 div 容器，可能用于展示文件上传队列相关的信息，例如已选择等待上传的文件列表等 -->
                     <div class="statusBar element-invisible">
+                        <!-- 创建一个类名为'statusBar'且具有' element-invisible'类名（可能初始状态下隐藏，后续根据操作显示）的 div 容器，用于展示上传的状态信息，如进度条、提示文本等 -->
                         <div class="progress">
+                            <!-- 创建一个类名为'progress'的 div 容器，用于展示文件上传的进度情况，比如通过改变内部元素的宽度等方式来直观显示已上传的比例 -->
                             <span class="text">0%</span>
+                            <!-- 创建一个类名为'text'的 span 元素，初始显示文本为"0%"，用于展示上传进度的百分比数值 -->
                             <span class="percentage"></span>
+                            <!-- 创建一个类名为'percentage'的 span 元素，可能通过 JavaScript 动态设置其宽度等样式来体现实际的上传进度占比情况 -->
                         </div><div class="info"></div>
+                        <!-- 创建一个类名为'info'的 div 容器，可能用于显示一些其他的上传相关提示信息，目前为空，后续可动态添加内容 -->
                         <div class="btns">
+                            <!-- 创建一个类名为'btns'的 div 容器，用于放置操作按钮等相关元素 -->
                             <div id="filePickerBtn"></div>
+                            <!-- 创建一个 id 为'filePickerBtn'的 div 容器，可能作为触发文件选择的按钮区域，具体样式和功能由对应的 CSS 和 JavaScript 代码实现 -->
                             <div class="uploadBtn"><var id="lang_start_upload"></var></div>
+                            <!-- 创建一个类名为'uploadBtn'的 div 容器，内部嵌套一个带有特定 id 的 var 元素，从 var 元素的 id 推测可能用于显示"开始上传"相关的文本，该 div 整体作为触发文件上传操作的按钮，具体样式和交互由相关代码控制 -->
                         </div>
                     </div>
                     <div id="dndArea" class="placeholder">
+                        <!-- 创建一个 id 为'dndArea'且类名为'placeholder'的 div 容器，可能作为文件拖放上传的占位提示区域，向用户提示可以在此处拖放文件进行上传 -->
                         <div class="filePickerContainer">
+                            <!-- 创建一个类名为'filePickerContainer'的 div 容器，可能用于进一步包裹文件选择相关的内部元素 -->
                             <div id="filePickerReady"></div>
+                            <!-- 创建一个 id 为'filePickerReady'的 div 容器，具体功能可能与文件选择操作的准备状态相关，需结合 JavaScript 代码来看其实际用途 -->
                         </div>
                     </div>
                     <ul class="filelist element-invisible">
+                        <!-- 创建一个类名为'filelist'且具有' element-invisible'类名（初始隐藏）的无序列表元素，用于展示已选择的文件列表相关信息，每个列表项可能对应一个已选择的文件 -->
                         <li id="filePickerBlock" class="filePickerBlock"></li>
+                        <!-- 创建一个 id 为'filePickerBlock'且类名为'filePickerBlock'的列表项元素，具体功能可能与文件选择操作的某个特定状态或功能相关，需结合 JavaScript 代码进一步明确其作用 -->
                     </ul>
                 </div>
             </div>
 
             <!-- 在线图片 -->
             <div id="online" class="panel">
+                <!-- 创建一个 id 为'online'且类名为'panel'的 div 容器，用于展示在线图片相关的内容，比如已存在的在线图片列表等 -->
                 <div id="fileList"><var id="lang_imgLoading"></var></div>
+                <!-- 创建一个 id 为'fileList'的 div 容器，内部嵌套一个带有特定 id 的 var 元素，从 var 元素的 id 推测可能用于显示图片加载相关的提示文本，该 div 整体可能用于展示在线图片列表的区域，具体图片展示等功能由相关代码实现 -->
             </div>
 
         </div>
     </div>
     <script type="text/javascript" src="attachment.js"></script>
-
+    <!-- 引入一个相对路径为 attachment.js 的 JavaScript 文件，该文件应该包含了页面中与附件（此处主要是图片相关的上传、展示等操作）交互的具体逻辑，例如实现选项卡切换、文件上传功能、图片列表加载等功能的 JavaScript 代码 -->
 </body>
 </html>

public2/ueditor/dialogs/background/background.css

@@ -1,94 +1,222 @@
-.wrapper{ width: 424px;margin: 10px auto; zoom:1;position: relative}
+/* 以下是类名为'wrapper'的元素的样式规则 */
-.tabbody{height:225px;}
+.wrapper{ 
-.tabbody .panel { position: absolute;width:100%; height:100%;background: #fff; display: none;}
+    width: 424px; /* 设置元素的宽度为424px */
-.tabbody .focus { display: block;}
+    margin: 10px auto; /* 上下外边距为10px，左右外边距自动，使元素在父容器中水平居中 */
-
+    zoom:1; /* 触发IE浏览器的hasLayout属性，用于解决一些布局相关的兼容性问题，通常和浮动、定位等布局方式结合使用 */
-body{font-size: 12px;color: #888;overflow: hidden;}
+    position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续子元素基于此进行绝对定位等操作 */
-input,label{vertical-align:middle}
+}
-.clear{clear: both;}
+
-.pl{padding-left: 18px;padding-left: 23px\9;}
+/* 以下是类名为'tabbody'的元素的样式规则 */
-
+.tabbody{
-#imageList {width: 420px;height: 215px;margin-top: 10px;overflow: hidden;overflow-y: auto;}
+    height:225px; /* 设置元素的高度为225px */
-#imageList div {float: left;width: 100px;height: 95px;margin: 5px 10px;}
+}
-#imageList img {cursor: pointer;border: 2px solid white;}
+
-
+/* 以下是类名为'tabbody'下的类名为'panel'的子元素的样式规则 */
-.bgarea{margin: 10px;padding: 5px;height: 84%;border: 1px solid #A8A297;}
+.tabbody.panel { 
-.content div{margin: 10px 0 10px 5px;}
+    position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 body 元素定位 */
-.content .iptradio{margin: 0px 5px 5px 0px;}
+    width:100%; /* 宽度占满父元素的宽度 */
-.txt{width:280px;}
+    height:100%; /* 高度占满父元素的高度 */
-
+    background: #fff; /* 设置背景颜色为白色 */
-.wrapcolor{height: 19px;}
+    display: none; /* 初始状态下不显示该元素，可通过后续添加类名等方式改变显示状态 */
-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;}
+/* 以下是类名为'tabbody'下具有'focus'类名的元素的样式规则，可能用于切换显示不同面板等交互场景 */
-#custom input{height: 15px;min-height: 15px;width:20px;}
+.tabbody.focus { 
-#repeatType{width:100px;}
+    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%;
+    width: 100%; /* 宽度占满父元素的宽度 */
-    height: 225px;
+    height: 225px; /* 设置元素的高度为225px */
 }
+
+/* 以下是 id 为'imgManager'下的 id 为'imageList'的子元素的样式规则 */
 #imgManager #imageList{
-    width: 100%;
+    width: 100%; /* 宽度占满父元素的宽度 */
-    overflow-x: hidden;
+    overflow-x: hidden; /* 隐藏水平方向的溢出内容 */
-    overflow-y: auto;
+    overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多图片且希望在垂直方向可滚动查看的区域 */
 }
+
+/* 以下是 id 为'imgManager'下的 ul 元素的样式规则 */
 #imgManager ul {
-    display: block;
+    display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */
-    list-style: none;
+    list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */
-    margin: 0;
+    margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
-    padding: 0;
+    padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */
 }
+
+/* 以下是 id 为'imgManager'下的 li 元素的样式规则 */
 #imgManager li {
-    float: left;
+    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
-    display: block;
+    display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */
-    list-style: none;
+    list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */
-    padding: 0;
+    padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */
-    width: 113px;
+    width: 113px; /* 设置元素的宽度为113px */
-    height: 113px;
+    height: 113px; /* 设置元素的高度为113px */
-    margin: 9px 0 0 19px;
+    margin: 9px 0 0 19px; /* 设置元素的外边距，上外边距为9px，右外边距为0，下外边距为0，左外边距为19px，用于控制元素之间的间隔距离 */
-    background-color: #eee;
+    background-color: #eee; /* 设置元素的背景颜色为浅灰色（#eee） */
-    overflow: hidden;
+    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */
-    cursor: pointer;
+    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该列表项元素可点击交互 */
-    position: relative;
+    position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续内部绝对定位元素基于此进行定位 */
 }
+
+/* 以下是 id 为'imgManager'下具有'clearFloat'类名的 li 元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */
 #imgManager li.clearFloat {
-    float: none;
+    float: none; /* 取消元素的浮动属性 */
-    clear: both;
+    clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */
-    display: block;
+    display: block; /* 将元素显示为块级元素，独占一行 */
-    width:0;
+    width:0; /* 设置元素的宽度为0 */
-    height:0;
+    height:0; /* 设置元素的高度为0 */
-    margin: 0;
+    margin: 0; /* 设置元素的外边距为0 */
-    padding: 0;
+    padding: 0; /* 设置元素的内边距为0 */
 }
+
+/* 以下是 id 为'imgManager'下的 li 元素内的 img 元素的样式规则 */
 #imgManager li img {
-    cursor: pointer;
+    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */
-}
+}
-#imgManager li .icon {
+
-    cursor: pointer;
+/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素的样式规则 */
-    width: 113px;
+#imgManager li.icon {
-    height: 113px;
+    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */
-    position: absolute;
+    width: 113px; /* 设置元素的宽度为113px */
-    top: 0;
+    height: 113px; /* 设置元素的高度为113px */
-    left: 0;
+    position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 li 元素定位 */
-    z-index: 2;
+    top: 0; /* 基于父元素（li 元素）顶部定位，垂直方向距离顶部0px */
-    border: 0;
+    left: 0; /* 基于父元素（li 元素）左侧定位，水平方向距离左侧0px */
-    background-repeat: no-repeat;
+    z-index: 2; /* 设置元素的层叠顺序为2，使其在一定程度上可以覆盖其他层叠顺序较低的元素显示 */
-}
+    border: 0; /* 设置元素的边框宽度为0，即无边框 */
-#imgManager li .icon:hover {
+    background-repeat: no-repeat; /* 设置背景图片不重复平铺 */
-    width: 107px;
+}
-    height: 107px;
+
-    border: 3px solid #1094fa;
+/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素在鼠标悬停时的样式规则 */
-}
+#imgManager li.icon:hover {
-#imgManager li.selected .icon {
+    width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */
-    background-image: url(images/success.png);
+    height: 107px; /* 鼠标悬停时，设置元素的高度为107px */
-    background-position: 75px 75px;
+    border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */
-}
+}
-#imgManager li.selected .icon:hover {
+
-    width: 107px;
+/* 以下是 id 为'imgManager'下具有'selected'类名的 li 元素内的类名为'icon'的元素的样式规则 */
-    height: 107px;
+#imgManager li.selected.icon {
-    border: 3px solid #1094fa;
+    background-image: url(images/success.png); /* 设置元素的背景图片，用于显示特定的选中标识等视觉效果 */
-    background-position: 72px 72px;
+    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，与未悬停时的背景位置有所变化，用于提供悬停交互的视觉效果变化 */
 }

public2/ueditor/dialogs/background/background.html

@@ -1,56 +1,83 @@
 <!DOCTYPE HTML>
+<!-- 这是 HTML5 的文档类型声明，告知浏览器按照 HTML5 标准来解析页面内容 -->
 <html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <!-- 设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文等特殊字符 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入一个相对路径为../internal.js 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
     <link rel="stylesheet" type="text/css" href="background.css">
+    <!-- 引入名为 background.css 的本地 CSS 样式文件，用于设置页面中各元素的外观样式，如布局、颜色、字体等 -->
 </head>
 <body>
     <div id="bg_container" class="wrapper">
+        <!-- 创建一个 id 为'bg_container'且类名为'wrapper'的 div 容器，可能作为整个页面内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的 background.css 文件中定义 -->
         <div id="tabHeads" class="tabhead">
+            <!-- 创建一个 id 为'tabHeads'且类名为'tabhead'的 div 容器，用于放置选项卡相关的元素，从类名推测可能是选项卡头部区域，其样式由 background.css 中相关规则控制 -->
             <span class="focus" data-content-id="normal"><var id="lang_background_normal"></var></span>
+            <!-- 创建一个类名为'focus'的 span 元素，通过 data-content-id 属性设置了与'normal'相关联的值，内部嵌套一个带有特定 id 的 var 元素（var 元素内容可能通过 JavaScript 动态设置，此处未明确显示具体文本），该 span 元素可能代表"普通背景"这个选项卡，并且当前处于选中状态 -->
             <span class="" data-content-id="imgManager"><var id="lang_background_local"></var></span>
+            <!-- 创建一个类名为''（可能没有特定类名样式修饰，具体依赖 CSS 文件）的 span 元素，通过 data-content-id 属性设置了与'imgManager'相关联的值，内部嵌套一个带有特定 id 的 var 元素，该 span 元素可能代表"图片管理背景"这个选项卡 -->
         </div>
         <div id="tabBodys" class="tabbody">
+            <!-- 创建一个 id 为'tabBodys'且类名为'tabbody'的 div 容器，应该是用于展示与选项卡对应的内容区域，与上面的'tabHeads'区域相对应，其样式规则在 background.css 中定义 -->
             <div id="normal" class="panel focus">
+                <!-- 创建一个 id 为'normal'且类名为'panel'并具有'focus'类名（可能表示当前显示状态）的 div 容器，用于展示"普通背景"选项卡对应的内容，比如背景设置相关的各种选项 -->
                 <fieldset class="bgarea">
+                    <!-- 创建一个类名为'bgarea'的 fieldset 元素，通常用于对表单相关元素进行分组，从类名推测其样式在 background.css 中定义，用于在视觉上对内部元素进行区分和布局 -->
                     <legend><var id="lang_background_set"></var></legend>
+                    <!-- 创建一个 legend 元素，用于为 fieldset 元素提供标题说明，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，此处标题大概是与"背景设置"相关 -->
                     <div class="content">
+                        <!-- 创建一个类名为'content'的 div 容器，用于进一步包裹内部具体的设置选项元素，方便进行布局和样式控制，样式在 background.css 中定义 -->
                         <div>
+                            <!-- 内部的一个 div 容器，可能用于对一组相关的单选按钮等元素进行包裹 -->
                             <label><input id="nocolorRadio" class="iptradio" type="radio" name="t" value="none" checked="checked"><var id="lang_background_none"></var></label>
+                            <!-- 创建一个 label 元素，内部包含一个 id 为'nocolorRadio'、类名为'iptradio'的单选按钮（input 元素，类型为 radio），设置其 name 属性为't'，value 为'none'，并且初始状态为选中（checked="checked"），单选按钮后面嵌套一个带有特定 id 的 var 元素，用于显示对应的文本（如"无背景颜色"之类，具体由 JavaScript 动态设置文本内容），整体用于提供是否设置无背景颜色的选项 -->
                             <label><input id="coloredRadio" class="iptradio" type="radio" name="t" value="color"><var id="lang_background_colored"></var></label>
+                            <!-- 类似上面的结构，创建另一个单选按钮选项，id 为'coloredRadio'，用于选择是否设置有颜色的背景，对应的文本通过 var 元素（id 为'lang_background_colored'）显示，具体文本由 JavaScript 动态设置 -->
                         </div>
                         <div class="wrapcolor pl">
+                            <!-- 创建一个类名为'wrapcolor'且具有'pl'类名的 div 容器，其样式在 background.css 中定义，可能用于对与颜色相关的元素进行包裹和布局，通过类名推测可能涉及一些内边距等样式设置 -->
                             <div class="color">
+                                <!-- 创建一个类名为'color'的 div 容器，可能用于对颜色相关的文本提示等进行包裹 -->
                                 <var id="lang_background_color"></var>:
+                                <!-- 嵌套一个带有特定 id 的 var 元素，用于显示与背景颜色相关的文本提示，如"背景颜色"字样，具体文本由 JavaScript 动态设置 -->
                             </div>
                             <div id="colorPicker"></div>
+                            <!-- 创建一个 id 为'colorPicker'的 div 容器，可能用于展示颜色选择相关的交互元素（具体外观和功能需结合 CSS 和 JavaScript 代码来看），比如显示一个颜色选取框之类的组件 -->
                             <div class="clear"></div>
+                            <!-- 创建一个类名为'clear'的 div 容器，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性，其样式在 background.css 中定义 -->
                         </div>
                         <div class="wrapcolor pl">
                             <label><var id="lang_background_netimg"></var>:</label><input class="txt" type="text" id="url">
+                            <!-- 创建一个类名为'wrapcolor'且具有'pl'类名的 div 容器，内部包含一个 label 元素用于显示文本提示（通过 var 元素 id 为'lang_background_netimg'，具体文本由 JavaScript 动态设置，大概是与网络图片相关提示），后面紧跟一个 id 为'url'、类名为'txt'的文本输入框（input 元素，类型为 text），用于输入网络图片的地址等信息 -->
                         </div>
                         <div id="alignment" class="alignment">
                             <var id="lang_background_align"></var>:<select id="repeatType">
+                                <!-- 创建一个 id 为'alignment'且类名为'alignment'的 div 容器，内部包含一个 var 元素用于显示文本提示（通过 var 元素 id 为'lang_background_align'，具体文本由 JavaScript 动态设置，大概是与背景对齐或重复方式相关提示），后面紧跟一个 id 为'repeatType'的下拉选择框（select 元素），用于选择背景的重复类型等设置 -->
                                 <option value="center"></option>
                                 <option value="repeat-x"></option>
                                 <option value="repeat-y"></option>
                                 <option value="repeat"></option>
                                 <option value="self"></option>
+                                <!-- 下拉选择框中的各个选项，每个选项通过 value 属性设置对应的值，具体含义和功能与背景的重复、对齐等设置相关，当用户选择不同选项时会有相应的背景显示效果变化 -->
                             </select>
                         </div>
-                        <div id="custom" >
+                        <div id="custom">
                             <var id="lang_background_position"></var>:x:<input type="text" size="1" id="x" maxlength="4" value="0">px&nbsp;&nbsp;y:<input type="text" size="1" id="y" maxlength="4" value="0">px
+                            <!-- 创建一个 id 为'custom'的 div 容器，内部包含一个 var 元素用于显示文本提示（通过 var 元素 id 为'lang_background_position'，具体文本由 JavaScript 动态设置，大概是与背景位置相关提示），后面跟着两个文本输入框（input 元素，类型为 text），分别用于输入背景在 x 和 y 方向上的位置坐标（单位为 px），并设置了输入框的大小、最大长度以及初始值等属性 -->
                         </div>
                     </div>
                 </fieldset>
 
             </div>
             <div id="imgManager" class="panel">
+                <!-- 创建一个 id 为'imgManager'且类名为'panel'的 div 容器，用于展示"图片管理背景"选项卡对应的内容，目前内部只有一个 id 为'imageList'的 div 容器，具体功能和展示内容需结合相关的 CSS 和 JavaScript 代码来看 -->
                 <div id="imageList" style=""></div>
             </div>
         </div>
     </div>
     <script type="text/javascript" src="background.js"></script>
+    <!-- 引入一个相对路径为 background.js 的 JavaScript 文件，该文件应该包含了页面中与背景设置相关的交互逻辑，例如选项卡切换功能、各种设置选项的取值和应用背景设置等具体的 JavaScript 代码 -->
 </body>
-</html>
+</html>

public2/ueditor/dialogs/background/background.js

@@ -1,376 +0,0 @@
-(function () {
-
-    var onlineImage,
-        backupStyle = editor.queryCommandValue('background');
-
-    window.onload = function () {
-        initTabs();
-        initColorSelector();
-    };
-
-    /* 初始化tab标签 */
-    function initTabs(){
-        var tabs = $G('tabHeads').children;
-        for (var i = 0; i < tabs.length; i++) {
-            domUtils.on(tabs[i], "click", function (e) {
-                var target = e.target || e.srcElement;
-                for (var j = 0; j < tabs.length; j++) {
-                    if(tabs[j] == target){
-                        tabs[j].className = "focus";
-                        var contentId = tabs[j].getAttribute('data-content-id');
-                        $G(contentId).style.display = "block";
-                        if(contentId == 'imgManager') {
-                            initImagePanel();
-                        }
-                    }else {
-                        tabs[j].className = "";
-                        $G(tabs[j].getAttribute('data-content-id')).style.display = "none";
-                    }
-                }
-            });
-        }
-    }
-
-    /* 初始化颜色设置 */
-    function initColorSelector () {
-        var obj = editor.queryCommandValue('background');
-        if (obj) {
-            var color = obj['background-color'],
-                repeat = obj['background-repeat'] || 'repeat',
-                image = obj['background-image'] || '',
-                position = obj['background-position'] || 'center center',
-                pos = position.split(' '),
-                x = parseInt(pos[0]) || 0,
-                y = parseInt(pos[1]) || 0;
-
-            if(repeat == 'no-repeat' && (x || y)) repeat = 'self';
-
-            image = image.match(/url[\s]*\(([^\)]*)\)/);
-            image = image ? image[1]:'';
-            updateFormState('colored', color, image, repeat, x, y);
-        } else {
-            updateFormState();
-        }
-
-        var updateHandler = function () {
-            updateFormState();
-            updateBackground();
-        }
-        domUtils.on($G('nocolorRadio'), 'click', updateBackground);
-        domUtils.on($G('coloredRadio'), 'click', updateHandler);
-        domUtils.on($G('url'), 'keyup', function(){
-            if($G('url').value && $G('alignment').style.display == "none") {
-                utils.each($G('repeatType').children, function(item){
-                    item.selected = ('repeat' == item.getAttribute('value') ? 'selected':false);
-                });
-            }
-            updateHandler();
-        });
-        domUtils.on($G('repeatType'), 'change', updateHandler);
-        domUtils.on($G('x'), 'keyup', updateBackground);
-        domUtils.on($G('y'), 'keyup', updateBackground);
-
-        initColorPicker();
-    }
-
-    /* 初始化颜色选择器 */
-    function initColorPicker() {
-        var me = editor,
-            cp = $G("colorPicker");
-
-        /* 生成颜色选择器ui对象 */
-        var popup = new UE.ui.Popup({
-            content: new UE.ui.ColorPicker({
-                noColorText: me.getLang("clearColor"),
-                editor: me,
-                onpickcolor: function (t, color) {
-                    updateFormState('colored', color);
-                    updateBackground();
-                    UE.ui.Popup.postHide();
-                },
-                onpicknocolor: function (t, color) {
-                    updateFormState('colored', 'transparent');
-                    updateBackground();
-                    UE.ui.Popup.postHide();
-                }
-            }),
-            editor: me,
-            onhide: function () {
-            }
-        });
-
-        /* 设置颜色选择器 */
-        domUtils.on(cp, "click", function () {
-            popup.showAnchor(this);
-        });
-        domUtils.on(document, 'mousedown', function (evt) {
-            var el = evt.target || evt.srcElement;
-            UE.ui.Popup.postHide(el);
-        });
-        domUtils.on(window, 'scroll', function () {
-            UE.ui.Popup.postHide();
-        });
-    }
-
-    /* 初始化在线图片列表 */
-    function initImagePanel() {
-        onlineImage = onlineImage || new OnlineImage('imageList');
-    }
-
-    /* 更新背景色设置面板 */
-    function updateFormState (radio, color, url, align, x, y) {
-        var nocolorRadio = $G('nocolorRadio'),
-            coloredRadio = $G('coloredRadio');
-
-        if(radio) {
-            nocolorRadio.checked = (radio == 'colored' ? false:'checked');
-            coloredRadio.checked = (radio == 'colored' ? 'checked':false);
-        }
-        if(color) {
-            domUtils.setStyle($G("colorPicker"), "background-color", color);
-        }
-
-        if(url && /^\//.test(url)) {
-            var a = document.createElement('a');
-            a.href = url;
-            browser.ie && (a.href = a.href);
-            url = browser.ie ? a.href:(a.protocol + '//' + a.host + a.pathname + a.search + a.hash);
-        }
-
-        if(url || url === '') {
-            $G('url').value = url;
-        }
-        if(align) {
-            utils.each($G('repeatType').children, function(item){
-                item.selected = (align == item.getAttribute('value') ? 'selected':false);
-            });
-        }
-        if(x || y) {
-            $G('x').value = parseInt(x) || 0;
-            $G('y').value = parseInt(y) || 0;
-        }
-
-        $G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none';
-        $G('custom').style.display = coloredRadio.checked && $G('url').value && $G('repeatType').value == 'self' ? '':'none';
-    }
-
-    /* 更新背景颜色 */
-    function updateBackground () {
-        if ($G('coloredRadio').checked) {
-            var color = domUtils.getStyle($G("colorPicker"), "background-color"),
-                bgimg = $G("url").value,
-                align = $G("repeatType").value,
-                backgroundObj = {
-                    "background-repeat": "no-repeat",
-                    "background-position": "center center"
-                };
-
-            if (color) backgroundObj["background-color"] = color;
-            if (bgimg) backgroundObj["background-image"] = 'url(' + bgimg + ')';
-            if (align == 'self') {
-                backgroundObj["background-position"] = $G("x").value + "px " + $G("y").value + "px";
-            } else if (align == 'repeat-x' || align == 'repeat-y' || align == 'repeat') {
-                backgroundObj["background-repeat"] = align;
-            }
-
-            editor.execCommand('background', backgroundObj);
-        } else {
-            editor.execCommand('background', null);
-        }
-    }
-
-
-    /* 在线图片 */
-    function OnlineImage(target) {
-        this.container = utils.isString(target) ? document.getElementById(target) : target;
-        this.init();
-    }
-    OnlineImage.prototype = {
-        init: function () {
-            this.reset();
-            this.initEvents();
-        },
-        /* 初始化容器 */
-        initContainer: function () {
-            this.container.innerHTML = '';
-            this.list = document.createElement('ul');
-            this.clearFloat = document.createElement('li');
-
-            domUtils.addClass(this.list, 'list');
-            domUtils.addClass(this.clearFloat, 'clearFloat');
-
-            this.list.id = 'imageListUl';
-            this.list.appendChild(this.clearFloat);
-            this.container.appendChild(this.list);
-        },
-        /* 初始化滚动事件,滚动到地步自动拉取数据 */
-        initEvents: function () {
-            var _this = this;
-
-            /* 滚动拉取图片 */
-            domUtils.on($G('imageList'), 'scroll', function(e){
-                var panel = this;
-                if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
-                    _this.getImageData();
-                }
-            });
-            /* 选中图片 */
-            domUtils.on(this.container, 'click', function (e) {
-                var target = e.target || e.srcElement,
-                    li = target.parentNode,
-                    nodes = $G('imageListUl').childNodes;
-
-                if (li.tagName.toLowerCase() == 'li') {
-                    updateFormState('nocolor', null, '');
-                    for (var i = 0, node; node = nodes[i++];) {
-                        if (node == li && !domUtils.hasClass(node, 'selected')) {
-                            domUtils.addClass(node, 'selected');
-                            updateFormState('colored', null, li.firstChild.getAttribute("_src"), 'repeat');
-                        } else {
-                            domUtils.removeClasses(node, 'selected');
-                        }
-                    }
-                    updateBackground();
-                }
-            });
-        },
-        /* 初始化第一次的数据 */
-        initData: function () {
-
-            /* 拉取数据需要使用的值 */
-            this.state = 0;
-            this.listSize = editor.getOpt('imageManagerListSize');
-            this.listIndex = 0;
-            this.listEnd = false;
-
-            /* 第一次拉取数据 */
-            this.getImageData();
-        },
-        /* 重置界面 */
-        reset: function() {
-            this.initContainer();
-            this.initData();
-        },
-        /* 向后台拉取图片列表数据 */
-        getImageData: function () {
-            var _this = this;
-
-            if(!_this.listEnd && !this.isLoadingData) {
-                this.isLoadingData = true;
-                var url = editor.getActionUrl(editor.getOpt('imageManagerActionName')),
-                    isJsonp = utils.isCrossDomainUrl(url);
-                ajax.request(url, {
-                    'timeout': 100000,
-                    'dataType': isJsonp ? 'jsonp':'',
-                    'data': utils.extend({
-                            start: this.listIndex,
-                            size: this.listSize
-                        }, editor.queryCommandValue('serverparam')),
-                    'method': 'get',
-                    'onsuccess': function (r) {
-                        try {
-                            var json = isJsonp ? r:eval('(' + r.responseText + ')');
-                            if (json.state == 'SUCCESS') {
-                                _this.pushData(json.list);
-                                _this.listIndex = parseInt(json.start) + parseInt(json.list.length);
-                                if(_this.listIndex >= json.total) {
-                                    _this.listEnd = true;
-                                }
-                                _this.isLoadingData = false;
-                            }
-                        } catch (e) {
-                            if(r.responseText.indexOf('ue_separate_ue') != -1) {
-                                var list = r.responseText.split(r.responseText);
-                                _this.pushData(list);
-                                _this.listIndex = parseInt(list.length);
-                                _this.listEnd = true;
-                                _this.isLoadingData = false;
-                            }
-                        }
-                    },
-                    'onerror': function () {
-                        _this.isLoadingData = false;
-                    }
-                });
-            }
-        },
-        /* 添加图片到列表界面上 */
-        pushData: function (list) {
-            var i, item, img, icon, _this = this,
-                urlPrefix = editor.getOpt('imageManagerUrlPrefix');
-            for (i = 0; i < list.length; i++) {
-                if(list[i] && list[i].url) {
-                    item = document.createElement('li');
-                    img = document.createElement('img');
-                    icon = document.createElement('span');
-
-                    domUtils.on(img, 'load', (function(image){
-                        return function(){
-                            _this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
-                        }
-                    })(img));
-                    img.width = 113;
-                    img.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=':'&noCache=') + (+new Date()).toString(36) );
-                    img.setAttribute('_src', urlPrefix + list[i].url);
-                    domUtils.addClass(icon, 'icon');
-
-                    item.appendChild(img);
-                    item.appendChild(icon);
-                    this.list.insertBefore(item, this.clearFloat);
-                }
-            }
-        },
-        /* 改变图片大小 */
-        scale: function (img, w, h, type) {
-            var ow = img.width,
-                oh = img.height;
-
-            if (type == 'justify') {
-                if (ow >= oh) {
-                    img.width = w;
-                    img.height = h * oh / ow;
-                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
-                } else {
-                    img.width = w * ow / oh;
-                    img.height = h;
-                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
-                }
-            } else {
-                if (ow >= oh) {
-                    img.width = w * ow / oh;
-                    img.height = h;
-                    img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
-                } else {
-                    img.width = w;
-                    img.height = h * oh / ow;
-                    img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
-                }
-            }
-        },
-        getInsertList: function () {
-            var i, lis = this.list.children, list = [], align = getAlign();
-            for (i = 0; i < lis.length; i++) {
-                if (domUtils.hasClass(lis[i], 'selected')) {
-                    var img = lis[i].firstChild,
-                        src = img.getAttribute('_src');
-                    list.push({
-                        src: src,
-                        _src: src,
-                        floatStyle: align
-                    });
-                }
-
-            }
-            return list;
-        }
-    };
-
-    dialog.onok = function () {
-        updateBackground();
-        editor.fireEvent('saveScene');
-    };
-    dialog.oncancel = function () {
-        editor.execCommand('background', backupStyle);
-    };
-
-})();

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: 这是一个函数，用于自定义数据标签的显示内容格式。在这里，它返回的格式是将扇区对应的名称加粗显示，后面跟着该扇区占比的百分比数值（保留两位小数），例如 "<b>类别A</b>: 25.00 %"。
         }
     }
-];
+];

public2/ueditor/dialogs/charts/charts.css

@@ -1,165 +1,192 @@
+/* 对 html 和 body 元素设置通用样式 */
 html, body {
-    width: 100%;
+    width: 100%; /* 设置元素宽度占满整个视口宽度 */
-    height: 100%;
+    height: 100%; /* 设置元素高度占满整个视口高度 */
-    margin: 0;
+    margin: 0; /* 清除元素默认的外边距，使页面从边缘开始布局 */
-    padding: 0;
+    padding: 0; /* 清除元素默认的内边距 */
-    overflow-x: hidden;
+    overflow-x: hidden; /* 隐藏水平方向上的滚动条，防止内容超出可视区域时出现水平滚动条 */
 }
 
+/* 定义类名为'main'的元素的样式 */
 .main {
-    width: 100%;
+    width: 100%; /* 宽度占满父元素宽度 */
-    overflow: hidden;
+    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
 }
 
+/* 定义类名为'table-view'的元素的样式 */
 .table-view {
-    height: 100%;
+    height: 100%; /* 高度占满父元素高度（结合父元素的高度设置情况而定） */
-    float: left;
+    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
-    margin: 20px;
+    margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */
-    width: 40%;
+    width: 40%; /* 设置元素宽度占父元素宽度的 40%，用于划分页面布局中表格部分的宽度占比 */
 }
 
-.table-view .table-container {
+/* 定义类名为'table-view'下的类名为'table-container'的子元素的样式 */
-    width: 100%;
+.table-view.table-container {
-    margin-bottom: 50px;
+    width: 100%; /* 宽度占满父元素（.table-view）的宽度 */
-    overflow: scroll;
+    margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */
+    overflow: scroll; /* 当内容超出元素尺寸范围时，显示滚动条以便查看全部内容 */
 }
 
+/* 定义类名为'table-view'下的 th 元素（通常用于表格表头）的样式 */
 .table-view th {
-    padding: 5px 10px;
+    padding: 5px 10px; /* 设置元素的内边距，上下内边距为 5px，左右内边距为 10px，用于在表格表头单元格内提供一定的空白空间 */
-    background-color: #F7F7F7;
+    background-color: #F7F7F7; /* 设置元素的背景颜色为浅灰色（#F7F7F7），用于区分表头与表体部分 */
 }
 
+/* 定义类名为'table-view'下的 td 元素（通常用于表格表体单元格）的样式 */
 .table-view td {
-    width: 50px;
+    width: 50px; /* 设置元素的宽度为 50px，统一表格单元格的宽度 */
-    text-align: center;
+    text-align: center; /* 设置文本在单元格内居中对齐 */
-    padding:0;
+    padding: 0; /* 清除元素默认的内边距，使内容紧密贴合单元格边缘 */
 }
 
+/* 定义类名为'table-container'下的 input 元素的样式 */
 .table-container input {
-    width: 40px;
+    width: 40px; /* 设置输入框元素的宽度为 40px */
-    padding: 5px;
+    padding: 5px; /* 设置输入框元素的内边距为 5px，使输入内容与边框有一定间隔 */
-    border: none;
+    border: none; /* 清除输入框的边框，使其外观更简洁（可能通过其他方式体现选中或聚焦状态等） */
-    outline: none;
+    outline: none; /* 清除输入框获取焦点时的默认外边框样式，同样是为了外观简洁或自定义聚焦效果 */
 }
 
+/* 定义类名为'table-view'下的 caption 元素（通常用于表格标题）的样式 */
 .table-view caption {
-    font-size: 18px;
+    font-size: 18px; /* 设置元素的字体大小为 18px，突出显示表格标题 */
-    text-align: left;
+    text-align: left; /* 设置文本在标题元素内左对齐 */
 }
 
+/* 定义类名为'charts-view'的元素的样式 */
 .charts-view {
-    /*margin-left: 49%!important;*/
+    /* margin-left: 49%!important; */ /* 此处被注释掉了，原作用可能是通过强制设置左外边距为父元素宽度的 49%来进行布局定位，但当前未生效，实际以下面的'margin-left'属性为准 */
-    width: 50%;
+    width: 50%; /* 设置元素宽度占父元素宽度的 50%，用于划分页面布局中图表部分的宽度占比 */
-    margin-left: 49%;
+    margin-left: 49%; /* 设置元素的左外边距为父元素宽度的 49%，将图表部分定位在页面右侧，与左侧的表格部分区分开来 */
-    height: 400px;
+    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;
+    padding-left: 20px; /* 设置元素的左内边距为 20px，用于在内部提供一定的空白空间 */
-    margin-bottom: 50px;
+    margin-bottom: 50px; /* 设置元素的下外边距为 50px，使其与下方元素间隔一定距离 */
 }
 
+/* 定义类名为'charts-format'下的 legend 元素的样式 */
 .charts-format legend {
-    padding-left: 10px;
+    padding-left: 10px; /* 设置元素的左内边距为 10px，在元素内部左侧提供一定空白空间 */
-    padding-right: 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;
+    display: block; /* 将元素显示为块级元素，独占一行，常用于表单标签等元素的布局，方便与对应的输入框等元素进行垂直排列 */
-    margin: 10px 0;
+    margin: 10px 0; /* 设置元素的外边距，上下外边距为 10px，左右外边距为 0，用于控制元素在垂直方向的间隔位置 */
 }
 
-.charts-format .data-item {
+/* 定义类名为'charts-format'下的类名为'data-item'的元素的样式 */
-    border: 1px solid black;
+.charts-format.data-item {
-    outline: none;
+    border: 1px solid black; /* 为元素添加边框，边框宽度为 1px，颜色为黑色，用于突出显示该元素 */
-    padding: 2px 3px;
+    outline: none; /* 清除元素获取焦点时的默认外边框样式，可能是为了外观简洁或自定义聚焦效果 */
+    padding: 2px 3px; /* 设置元素的内边距，上下内边距为 2px，左右内边距为 3px，用于在元素内部提供一定的空白空间 */
 }
 
-/* 图表类型 */
+/* 以下是图表类型相关的样式定义 */
 
+/* 定义类名为'charts-type'的元素的样式 */
 .charts-type {
-    margin-top: 50px;
+    margin-top: 50px; /* 设置元素的上外边距为 50px，使其与上方元素间隔一定距离 */
-    height: 300px;
+    height: 300px; /* 设置元素的高度为 300px，确定图表类型相关区域的高度大小 */
 }
 
+/* 定义类名为'scroll-view'的元素的样式 */
 .scroll-view {
-    border: 1px solid #c3c3c3;
+    border: 1px solid #c3c3c3; /* 为元素添加边框，边框宽度为 1px，颜色为灰色（#c3c3c3） */
-    border-left: none;
+    border-left: none; /* 清除元素的左边框，使其左边框不显示 */
-    border-right: none;
+    border-right: none; /* 清除元素的右边框，使其右边框不显示 */
-    overflow: hidden;
+    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
 }
 
+/* 定义类名为'scroll-container'的元素的样式 */
 .scroll-container {
-    margin: 20px;
+    margin: 20px; /* 设置元素的外边距为上下左右各 20px，使其与周围元素间隔一定距离 */
-    width: 100%;
+    width: 100%; /* 宽度占满父元素宽度 */
-    overflow: hidden;
+    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
 }
 
+/* 定义类名为'scroll-bed'的元素的样式 */
 .scroll-bed {
-    width: 10000px;
+    width: 10000px; /* 设置元素的宽度为一个较大值，可能用于实现滚动效果时容纳较多的内容（比如多个图表类型的展示元素等） */
-    _margin-top: 20px;
+    _margin-top: 20px; /* 此处是一个私有属性（前面加下划线，可能是针对特定浏览器的 hack，如 IE 浏览器），设置元素的上外边距为 20px */
-    -webkit-transition: margin-left .5s ease;
+    -webkit-transition: margin-left.5s ease; /* 针对webkit 内核浏览器（如 Chrome、Safari 等）设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
-    -moz-transition: margin-left .5s ease;
+    -moz-transition: margin-left.5s ease; /* 针对 Mozilla Firefox 浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
-    transition: margin-left .5s ease;
+    transition: margin-left.5s ease; /* 针对其他现代浏览器设置当'margin-left'属性改变时的过渡效果，过渡时间为 0.5 秒，过渡动画为缓动效果（ease） */
 }
 
+/* 定义类名为'view-box'的元素的样式 */
 .view-box {
-    display: inline-block;
+    display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
-    *display: inline;
+    *display: inline; /* 此处是针对低版本 IE 浏览器（IE7 及以下）的 hack，使其以行内元素显示，确保兼容性 */
-    *zoom: 1;
+    *zoom: 1; /* 同样是针对低版本 IE 浏览器的 hack，触发 hasLayout 属性，解决一些布局相关的兼容性问题 */
-    margin-right: 20px;
+    margin-right: 20px; /* 设置元素的右外边距为 20px，使其与右侧相邻元素间隔一定距离 */
-    border: 2px solid white;
+    border: 2px solid white; /* 为元素添加边框，边框宽度为 2px，颜色为白色，用于视觉上区分不同的视图框元素 */
-    line-height: 0;
+    line-height: 0; /* 设置元素的行高为 0，可能用于去除元素内部默认的垂直间距等情况，具体看元素内部内容结构 */
-    overflow: hidden;
+    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏，防止出现滚动条等影响布局 */
-    cursor: pointer;
+    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;
+    margin-bottom: 20px; /* 设置元素的下外边距为 20px，使其与下方元素间隔一定距离 */
-    text-align: center;
+    text-align: center; /* 设置元素内部的子元素在水平方向上居中对齐，常用于按钮组等元素的布局，使其在容器内居中显示 */
 }
 
+/* 定义类名为'button-container'下的 a 元素（通常用于链接或按钮样式）的样式 */
 .button-container a {
-    display: inline-block;
+    display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
-    width: 100px;
+    width: 100px; /* 设置元素的宽度为 100px，确定按钮或链接的宽度大小 */
-    height: 25px;
+    height: 25px; /* 设置元素的高度为 25px，确定按钮或链接的高度大小 */
-    line-height: 25px;
+    line-height: 25px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */
-    border: 1px solid #c2ccd1;
+    border: 1px solid #c2ccd1; /* 为元素添加边框，边框宽度为 1px，颜色为浅灰色（#c2ccd1），用于视觉上修饰按钮或链接元素 */
-    margin-right: 30px;
+    margin-right: 30px; /* 设置元素的右外边距为 30px，用于控制按钮或链接之间的间隔距离 */
-    text-decoration: none;
+    text-decoration: none; /* 清除元素默认的文本下划线装饰（对于链接元素而言），使其外观更简洁 */
-    color: black;
+    color: black; /* 设置元素的文本颜色为黑色 */
-    -webkit-border-radius: 2px;
+    -webkit-border-radius: 2px; /* 针对 webkit 内核浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
-    -moz-border-radius: 2px;
+    -moz-border-radius: 2px; /* 针对 Mozilla Firefox 浏览器设置元素的边框圆角半径为 2px，使其边角呈现圆形效果 */
-    border-radius: 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;
+    border-top-color: #c2ccd1; /* 当按钮或链接元素处于激活状态时，改变其顶部边框的颜色为浅灰色（#c2ccd1），用于提供点击交互的视觉反馈 */
-    box-shadow:inset 0 5px 4px -4px rgba(49, 49, 64, 0.1);
+    box-shadow: inset 0 5px 4px -4px rgba(49, 49, 64, 0.1); /* 为元素添加内阴影效果，水平和垂直方向偏移量、模糊半径等参数设置了阴影的样式，用于增强激活状态的视觉效果 */
 }
 
+/* 定义类名为'edui-charts-not-data'的元素的样式 */
 .edui-charts-not-data {
-    height: 100px;
+    height: 100px; /* 设置元素的高度为 100px */
-    line-height: 100px;
+    line-height: 100px; /* 设置元素的行高与元素高度相等，使文本在垂直方向上居中对齐 */
-    text-align: center;
+    text-align: center; /* 设置元素内部的文本在水平方向上居中对齐 */
 }

public2/ueditor/dialogs/charts/charts.html

@@ -1,89 +1,137 @@
 <!DOCTYPE html>
+<!-- 这是 HTML5 的文档类型声明，告知浏览器按照 HTML5 标准来解析页面内容 -->
 <html>
-    <head>
+<head>
-        <title>chart</title>
+    <title>chart</title>
-        <meta chartset="utf-8">
+    <!-- 设置页面的标题为 'chart'，该标题会显示在浏览器的标题栏等相关位置 -->
-        <link rel="stylesheet" type="text/css" href="charts.css">
+    <meta chartset="utf-8">
-        <script type="text/javascript" src="../internal.js"></script>
+    <!-- 这里应该是写错了，正确的是 charset 属性，用于指定页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，比如中文等特殊字符 -->
-    </head>
+    <link rel="stylesheet" type="text/css" href="charts.css">
-    <body>
+    <!-- 引入名为 'charts.css' 的外部 CSS 文件，用于设置页面中各元素的样式，如布局、颜色、字体等外观表现 -->
-        <div class="main">
+    <script type="text/javascript" src="../internal.js"></script>
-            <div class="table-view">
+    <!-- 引入相对路径为 '../internal.js' 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
-                <h3><var id="lang_data_source"></var></h3>
+</head>
-                <div id="tableContainer" class="table-container"></div>
+<body>
-                <h3><var id="lang_chart_format"></var></h3>
+    <div class="main">
-                <form name="data-form">
+        <!-- 创建一个类名为'main'的 div 容器，从类名推测可能作为整个页面主体内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的 'charts.css' 文件中定义 -->
-                    <div class="charts-format">
+        <div class="table-view">
-                        <fieldset>
+            <!-- 创建一个类名为 'table-view' 的 div 容器，可能用于展示与表格相关的数据或操作部分，其样式同样由 'charts.css' 中相关规则控制 -->
-                            <legend><var id="lang_data_align"></var></legend>
+            <h3><var id="lang_data_source"></var></h3>
-                            <div class="format-item-container">
+            <!-- 创建一个 h3 标题元素，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与数据源相关的标题 -->
-                                <label>
+            <div id="tableContainer" class="table-container"></div>
-                                    <input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="1" checked="checked">
+            <!-- 创建一个 id 为 'tableContainer' 且类名为 'table-container' 的 div 容器，可能用于放置具体的表格内容，例如通过 JavaScript 动态生成表格结构等，其样式在 'charts.css' 中定义，并且可能具备滚动等相关功能（看对应 CSS 的 overflow 等属性设置） -->
-                                    <var id="lang_chart_align_same"></var>
+            <h3><var id="lang_chart_format"></var></h3>
-                                </label>
+            <!-- 创建另一个 h3 标题元素，内部嵌套一个带有特定 id 的 var 元素，推测是用于显示与图表格式相关的标题，文本由 JavaScript 动态设置 -->
-                                <label>
+            <form name="data-form">
-                                    <input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="-1">
+                <!-- 创建一个名为 'data-form' 的表单元素，用于收集用户输入的与图表相关的各种配置信息，比如标题、对齐方式等 -->
-                                    <var id="lang_chart_align_reverse"></var>
+                <div class="charts-format">
-                                </label>
+                    <!-- 创建一个类名为 'charts-format' 的 div 容器，用于对图表格式相关的一组设置选项进行包裹，方便进行布局和样式控制，样式在 'charts.css' 中定义 -->
-                                <br>
+                    <fieldset>
-                            </div>
+                        <!-- 创建一个 fieldset 元素，通常用于对表单内相关的一组元素进行分组，这里可能是将图表对齐方式相关的选项归为一组，从类名推测其样式在 'charts.css' 中定义 -->
-                        </fieldset>
+                        <legend><var id="lang_data_align"></var></legend>
-                        <fieldset>
+                        <!-- 创建一个 legend 元素，用于为 fieldset 元素提供标题说明，内部嵌套一个带有特定 id 的 var 元素，显示文本大概是与数据对齐相关，具体文本由 JavaScript 动态设置 -->
-                            <legend><var id="lang_chart_title"></var></legend>
+                        <div class="format-item-container">
-                            <div class="format-item-container">
+                            <!-- 创建一个类名为 'format-item-container' 的 div 容器，用于进一步包裹每个具体的格式设置选项元素，提供内边距等样式设置，样式在 'charts.css' 中定义 -->
-                                <label>
+                            <label>
-                                    <var id="lang_chart_main_title"></var><input type="text" name="title" class="data-item">
+                                <!-- 创建一个 label 元素，用于关联表单中的输入元素（如单选按钮、文本输入框等）和对应的文本提示 -->
-                                </label>
+                                <input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="1" checked="checked">
-                                <label>
+                                <!-- 创建一个单选按钮（input 元素，类型为 radio），设置了类名用于样式控制和后续 JavaScript 操作识别，name 属性为 'charts-format' 用于分组，value 为 '1' 表示该选项的值，并且初始状态为选中（checked="checked"），该单选按钮可能用于选择某种图表格式的对齐方式 -->
-                                    <var id="lang_chart_sub_title"></var><input type="text" name="sub-title" class="data-item not-pie-item">
+                                <var id="lang_chart_align_same"></var>
-                                </label>
+                                <!-- 嵌套一个带有特定 id 的 var 元素，用于显示该单选按钮对应的文本提示，如 "图表对齐方式相同"之类的内容，具体文本由 JavaScript 动态设置 -->
-                                <label>
+                            </label>
-                                    <var id="lang_chart_x_title"></var><input type="text" name="x-title" class="data-item not-pie-item">
+                            <label>
-                                </label>
+                                <input type="radio" class="format-ctrl not-pie-item" name="charts-format" value="-1">
-                                <label>
+                                <var id="lang_chart_align_reverse"></var>
-                                    <var id="lang_chart_y_title"></var><input type="text" name="y-title" class="data-item not-pie-item">
+                                <!-- 类似上面的结构，创建另一个单选按钮选项，用于选择另一种图表格式的对齐方式，对应的文本提示通过 var 元素（id 为 'lang_chart_align_reverse'）显示，具体文本由 JavaScript 动态设置 -->
-                                </label>
+                            </label>
-                            </div>
+                            <br>
-                        </fieldset>
+                            <!-- 换行标签，用于在页面上使后面的元素另起一行显示 -->
-                        <fieldset>
+                        </div>
-                            <legend><var id="lang_chart_tip"></var></legend>
+                    </fieldset>
-                            <div class="format-item-container">
+                    <fieldset>
-                                <label>
+                        <!-- 另一个 fieldset 元素，用于对图表标题相关的一组设置选项进行分组 -->
-                                    <var id="lang_cahrt_tip_prefix"></var>
+                        <legend><var id="lang_chart_title"></var></legend>
-                                    <input type="text" id="tipInput" name="tip" class="data-item" disabled="disabled">
+                        <!-- legend 元素用于提供标题说明，这里大概是与图表整体标题相关，文本由 JavaScript 动态设置 -->
-                                </label>
+                        <div class="format-item-container">
-                                <p><var id="lang_cahrt_tip_description"></var></p>
+                            <label>
-                            </div>
+                                <var id="lang_chart_main_title"></var><input type="text" name="title" class="data-item">
-                        </fieldset>
+                                <!-- 这个 label 元素内，先通过 var 元素显示文本提示（大概是与图表主标题相关，文本由 JavaScript 动态设置），后面紧跟一个文本输入框（input 元素，类型为 text），设置了 name 属性为 'title'，用于接收用户输入的图表主标题内容，并且设置了类名 'data-item' 用于样式控制 -->
-                        <fieldset>
+                            </label>
-                            <legend><var id="lang_chart_data_unit"></var></legend>
+                            <label>
-                            <div class="format-item-container">
+                                <var id="lang_chart_sub_title"></var><input type="text" name="sub-title" class="data-item not-pie-item">
-                                <label><var id="lang_chart_data_unit_title"></var><input type="text" name="unit" class="data-item"></label>
+                                <!-- 类似结构，用于输入图表副标题内容，设置了不同的 name 属性和类名（可能通过类名进行特定样式或针对非饼图情况的区分等操作） -->
-                                <p><var id="lang_chart_data_unit_description"></var></p>
+                            </label>
-                            </div>
+                            <label>
-                        </fieldset>
+                                <var id="lang_chart_x_title"></var><input type="text" name="x-title" class="data-item not-pie-item">
-                    </div>
+                                <!-- 用于输入图表 x 轴标题内容，同样设置了相应的类名和 name 属性 -->
-                </form>
+                            </label>
-            </div>
+                            <label>
-            <div class="charts-view">
+                                <var id="lang_chart_y_title"></var><input type="text" name="y-title" class="data-item not-pie-item">
-                <div id="chartsContainer" class="charts-container"></div>
+                                <!-- 用于输入图表 y 轴标题内容，具备相应的属性设置 -->
-                <div id="chartsType" class="charts-type">
+                            </label>
-                    <h3><var id="lang_chart_type"></var></h3>
+                        </div>
-                    <div class="scroll-view">
+                    </fieldset>
-                        <div class="scroll-container">
+                    <fieldset>
-                            <div id="scrollBed" class="scroll-bed"></div>
+                        <!-- 用于对图表提示信息相关设置选项进行分组的 fieldset 元素 -->
+                        <legend><var id="lang_chart_tip"></var></legend>
+                        <!-- legend 元素提供标题说明，大概是与图表提示相关，文本由 JavaScript 动态设置 -->
+                        <div class="format-item-container">
+                            <label>
+                                <var id="lang_cahrt_tip_prefix"></var>
+                                <input type="text" id="tipInput" name="tip" class="data-item" disabled="disabled">
+                                <!-- 这个 label 元素内，先通过 var 元素显示文本提示（大概是与图表提示信息前缀相关，文本由 JavaScript 动态设置），后面紧跟一个文本输入框（input 元素，类型为 text），设置了 id 为 'tipInput'、name 为 'tip'，用于输入相关内容，但当前设置为禁用状态（disabled="disabled"），可能根据一定条件再启用 -->
+                            </label>
+                            <p><var id="lang_cahrt_tip_description"></var></p>
+                            <!-- 创建一个 p 段落元素，内部嵌套一个带有特定 id 的 var 元素，用于显示关于图表提示信息的描述内容，文本由 JavaScript 动态设置 -->
                         </div>
-                        <div id="buttonContainer" class="button-container">
+                    </fieldset>
-                            <a href="#" data-title="prev"><var id="lang_prev_btn"></var></a>
+                    <fieldset>
-                            <a href="#" data-title="next"><var id="lang_next_btn"></var></a>
+                        <!-- 用于对图表数据单位相关设置选项进行分组的 fieldset 元素 -->
+                        <legend><var id="lang_chart_data_unit"></var></legend>
+                        <!-- legend 元素提供标题说明，大概是与图表数据单位相关，文本由 JavaScript 动态设置 -->
+                        <div class="format-item-container">
+                            <label><var id="lang_chart_data_unit_title"></var><input type="text" name="unit" class="data-item"></label>
+                            <!-- 这个 label 元素内，先通过 var 元素显示文本提示（大概是与图表数据单位标题相关，文本由 JavaScript 动态设置），后面紧跟一个文本输入框（input 元素，类型为 text），设置了 name 为 'unit'，用于输入图表数据的单位内容，具备类名 'data-item' 用于样式控制 -->
+                            <p><var id="lang_chart_data_unit_description"></var></p>
+                            <!-- 创建一个 p 段落元素，用于显示关于图表数据单位的描述内容，文本由 JavaScript 动态设置 -->
                         </div>
+                    </fieldset>
+                </div>
+            </form>
+        </div>
+        <div class="charts-view">
+            <!-- 创建一个类名为 'charts-view' 的 div 容器，用于展示与图表相关的可视化部分以及图表类型选择等操作区域，样式在 'charts.css' 中定义 -->
+            <div id="chartsContainer" class="charts-container"></div>
+            <!-- 创建一个 id 为 'chartsContainer' 且类名为 'charts-container' 的 div 容器，可能用于放置实际生成的图表，其样式可能涉及边框等外观设置（看 'charts.css' 中对应规则） -->
+            <div id="chartsType" class="charts-type">
+                <!-- 创建一个 id 为 'chartsType' 且类名为 'charts-type' 的 div 容器，用于展示图表类型相关的内容，比如提供不同图表类型的选择等，样式在 'charts.css' 中定义 -->
+                <h3><var id="lang_chart_type"></var></h3>
+                <!-- 创建一个 h3 标题元素，用于显示与图表类型相关的标题，文本由 JavaScript 动态设置 -->
+                <div class="scroll-view">
+                    <!-- 创建一个类名为'scroll-view' 的 div 容器，从类名推测可能具备滚动相关功能，用于展示可以滚动查看的图表类型相关元素，样式在 'charts.css' 中定义 -->
+                    <div class="scroll-container">
+                        <!-- 创建一个类名为'scroll-container' 的 div 容器，可能作为滚动内容的包裹容器，设置其内部的外边距等样式属性（看 'charts.css' 中对应规则） -->
+                        <div id="scrollBed" class="scroll-bed"></div>
+                        <!-- 创建一个 id 为'scrollBed' 且类名为'scroll-bed' 的 div 容器，可能用于放置具体的图表类型展示元素（比如多个图表类型的缩略图等），其宽度等属性设置可能与滚动效果相关（看 'charts.css' 中对应规则） -->
+                    </div>
+                    <div id="buttonContainer" class="button-container">
+                        <!-- 创建一个 id 为 'buttonContainer' 且类名为 'button-container' 的 div 容器，用于放置操作按钮，比如切换图表类型的前后按钮等，样式在 'charts.css' 中定义 -->
+                        <a href="#" data-title="prev"><var id="lang_prev_btn"></var></a>
+                        <!-- 创建一个 a 链接元素，设置了 href 属性为 '#'（可能后续通过 JavaScript 绑定点击事件来实现实际跳转或操作），通过 data-title 属性设置了一个自定义属性值 'prev'（可能用于识别按钮功能，比如上一个图表类型），内部嵌套一个带有特定 id 的 var 元素，用于显示按钮上的文本，文本由 JavaScript 动态设置，这里大概是表示上一个按钮的意思 -->
+                        <a href="#" data-title="next"><var id="lang_next_btn"></var></a>
+                        <!-- 类似结构，创建另一个 a 链接元素，用于表示下一个图表类型的切换按钮，具备相应的属性设置和文本显示（通过 var 元素，文本由 JavaScript 动态设置） -->
                     </div>
                 </div>
             </div>
         </div>
-        <script src="../../third-party/jquery-1.10.2.min.js"></script>
+    </div>
-        <script src="../../third-party/highcharts/highcharts.js"></script>
+    <script src="../../third-party/jquery-1.10.2.min.js"></script>
-        <script src="chart.config.js"></script>
+    <!-- 引入相对路径为 '../../third-party/jquery-1.10.2.min.js' 的 jQuery 库文件，jQuery 是常用的 JavaScript 库，用于简化 DOM 操作、事件处理、动画效果等开发工作 -->
-        <script src="charts.js"></script>
+    <script src="../../third-party/highcharts/highcharts.js"></script>
-    </body>
+    <!-- 引入相对路径为 '../../third-party/highcharts/highcharts.js' 的 Highcharts 库文件，Highcharts 是用于创建交互式图表的 JavaScript 库，用于在页面中生成各种类型的图表 -->
+    <script src="chart.config.js"></script>
+    <!-- 引入相对路径为 'chart.config.js' 的 JavaScript 文件，该文件可能包含了图表相关的配置信息，比如不同图表类型的具体配置参数等，用于配合 Highcharts 库来定制图表的显示效果等 -->
+    <script src="charts.js"></script>
+    <!-- 引入相对路径为 'charts.js' 的 JavaScript 文件，该文件应该包含了页面中与图表操作相关的业务逻辑代码，例如根据用户输入的配置生成图表、切换图表类型、处理表单数据等具体功能 -->
+</body>
 </html>

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);

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;
+    cursor:pointer;
-}
+    width:35px;
-
+    height:35px;
-.smileytable td {height: 37px;}
+    display:block;
-#tabPanel{margin-left:5px;overflow: hidden;}
+}
-#tabContent {float:left;background:#FFFFFF;}
+
-#tabContent div{display: none;width:480px;overflow:hidden;}
+/* 选择类名为'smileytable' 下的 td 元素，并设置其样式 */
-#tabIconReview.show{left:17px;display:block;}
+.smileytable td {
-.menuFocus{background:#ACCD3C;}
+    height: 37px;
-.menuDefault{background:#FFFFFF;}
+    /* 设置表格单元格（td）的高度为 37 像素，统一该类表格单元格的高度尺寸 */
-#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;}
+
-
+/* 选择 id 为 'tabPanel' 的元素，并设置其样式 */
-.wrapper .tabbody{position:relative;float:left;clear:both;padding:10px;width: 95%;}
+#tabPanel{
-.tabbody table{width: 100%;}
+    margin-left:5px;
-.tabbody td{border:1px solid #BAC498;}
+    /* 设置元素的左外边距为 5 像素，使其与左侧相邻元素间隔一定距离 */
-.tabbody td span{display: block;zoom:1;padding:0 4px;}
+    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，在元素内部水平方向提供一定的空白空间 */
+}

public2/ueditor/dialogs/emotion/emotion.html

@@ -1,54 +1,76 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<!-- 这是 HTML 4.0 过渡型的文档类型声明，告知浏览器按照 HTML 4.0 过渡型标准来解析页面内容 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
+<!-- 设置 HTML 页面的 XML 命名空间，遵循 W3C 的 XHTML 规范 -->
 <head>
     <title></title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <!-- 页面的标题元素，此处为空，通常会设置一个有意义的标题显示在浏览器的标题栏等相关位置 -->
-    <meta name="robots" content="noindex, nofollow"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
+    <meta name="robots" content="noindex, nofollow" />
+    <!-- 用于告诉搜索引擎爬虫，不要对该页面进行索引收录（noindex），也不要跟踪页面上的链接（nofollow），常用于一些不想被搜索引擎抓取的页面 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为 '../internal.js' 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
     <link rel="stylesheet" type="text/css" href="emotion.css">
+    <!-- 引入名为 'emotion.css' 的外部 CSS 文件，用于设置页面中各元素的样式，如布局、颜色、字体等外观表现 -->
 </head>
 <body>
-<div id="tabPanel" class="wrapper">
+    <div id="tabPanel" class="wrapper">
-    <div id="tabHeads" class="tabhead">
+        <!-- 创建一个 id 为 'tabPanel' 且类名为 'wrapper' 的 div 容器，从类名推测可能作为整个页面中某个功能模块（可能与切换面板相关）的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的 'emotion.css' 文件中定义 -->
-        <span><var id="lang_input_choice"></var></span>
+        <div id="tabHeads" class="tabhead">
-        <span><var id="lang_input_Tuzki"></var></span>
+            <!-- 创建一个 id 为 'tabHeads' 且类名为 'tabhead' 的 div 容器，可能用于放置切换面板的头部元素（比如各个面板的标题之类），样式在 'emotion.css' 中定义 -->
-        <span><var id="lang_input_lvdouwa"></var></span>
+            <span><var id="lang_input_choice"></var></span>
-        <span><var id="lang_input_BOBO"></var></span>
+            <!-- 创建一个 span 元素，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与输入选择相关的内容，具体文本由后续脚本控制 -->
-        <span><var id="lang_input_babyCat"></var></span>
+            <span><var id="lang_input_Tuzki"></var></span>
-        <span><var id="lang_input_bubble"></var></span>
+            <span><var id="lang_input_lvdouwa"></var></span>
-        <span><var id="lang_input_youa"></var></span>
+            <span><var id="lang_input_BOBO"></var></span>
+            <span><var id="lang_input_babyCat"></var></span>
+            <span><var id="lang_input_bubble"></var></span>
+            <span><var id="lang_input_youa"></var></span>
+            <!-- 以上几个 span 元素结构类似，分别通过内部的 var 元素结合不同的 id，用于显示不同的输入相关的提示文本（具体由 JavaScript 动态设置），可能对应不同的表情分类或输入选项等内容 -->
+        </div>
+        <div id="tabBodys" class="tabbody">
+            <!-- 创建一个 id 为 'tabBodys' 且类名为 'tabbody' 的 div 容器，可能用于放置切换面板的主体内容（比如不同分类下的具体表情元素等），样式在 'emotion.css' 中定义 -->
+            <div id="tab0"></div>
+            <div id="tab1"></div>
+            <div id="tab2"></div>
+            <div id="tab3"></div>
+            <div id="tab4"></div>
+            <div id="tab5"></div>
+            <div id="tab6"></div>
+            <!-- 以上创建了 7 个空的 div 元素，id 分别为 'tab0' 到 'tab6'，可能后续通过 JavaScript 动态往里面添加内容（比如对应的表情图片等元素），并且这些 id 与后面 JavaScript 中定义的一些对象属性（如 'SmilmgName' 等对象里的键）相对应，用于组织不同分类下的相关数据 -->
+        </div>
     </div>
-    <div id="tabBodys" class="tabbody">
+    <div id="tabIconReview">
-        <div id="tab0"></div>
+        <!-- 创建一个 id 为 'tabIconReview' 的 div 容器，从后续内容看可能用于展示表情的预览相关功能（比如显示当前选中的表情图片等），样式在 'emotion.css' 中定义 -->
-        <div id="tab1"></div>
+        <img id='faceReview' class='review' src="../../themes/default/images/spacer.gif" />
-        <div id="tab2"></div>
+        <!-- 创建一个 img 元素，设置了 id 为 'faceReview' 和类名为'review'，其初始的 src 属性指向一个空白图片（'spacer.gif'，可能只是占位用，后续通过 JavaScript 动态修改为实际要显示的表情图片），其样式规则（如尺寸、边框等）由 'emotion.css' 中对应的类名'review' 相关样式定义 -->
-        <div id="tab3"></div>
-        <div id="tab4"></div>
-        <div id="tab5"></div>
-        <div id="tab6"></div>
     </div>
-</div>
+    <script type="text/javascript" src="emotion.js"></script>
-<div id="tabIconReview">
+    <!-- 引入相对路径为 'emotion.js' 的 JavaScript 文件，该文件应该包含了页面中与表情相关操作的业务逻辑代码，例如根据用户点击切换面板、选择表情等操作来实现相应的功能 -->
-    <img id='faceReview' class='review' src="../../themes/default/images/spacer.gif"/>
+    <script type="text/javascript">
-</div>
+        var emotion = {
-<script type="text/javascript" src="emotion.js"></script>
+            tabNum: 7, //切换面板数量
-<script type="text/javascript">
+            // 定义一个名为 'tabNum' 的属性，表示切换面板的数量，值为 7，对应页面中前面创建的 7 个空 div（'tab0' - 'tab6'），用于控制循环等操作来处理每个面板相关的逻辑。
-    var emotion = {
+            SmilmgName: { tab0: ['j_00', 84], tab1: ['t_00', 40], tab2: ['w_00', 52], tab3: ['B_00', 63], tab4: ['C_00', 20], tab5: ['i_f', 50], tab6: ['y_00', 40] }, //图片前缀名
-        tabNum:7, //切换面板数量
+            // 定义一个名为 'SmilmgName' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的图片前缀名和数量信息。例如 'tab0' 对应的图片前缀名为 'j_00'，数量为 84 个（可能表示该分类下有 84 个以此前缀命名的图片文件，用于后续加载图片等操作）。
-        SmilmgName:{ tab0:['j_00', 84], tab1:['t_00', 40], tab2:['w_00', 52], tab3:['B_00', 63], tab4:['C_00', 20], tab5:['i_f', 50], tab6:['y_00', 40] }, //图片前缀名
+            imageFolders: { tab0: 'jx2/', tab1: 'tsj/', tab2: 'ldw/', tab3: 'bobo/', tab4: 'babycat/', tab5: 'face/', tab6: 'youa/' }, //图片对应文件夹路径
-        imageFolders:{ tab0:'jx2/', tab1:'tsj/', tab2:'ldw/', tab3:'bobo/', tab4:'babycat/', tab5:'face/', tab6:'youa/'}, //图片对应文件夹路径
+            // 定义一个名为 'imageFolders' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的表情图片所在的文件夹路径信息，方便在加载图片时准确找到对应的文件资源，例如 'tab0' 对应的图片在 'jx2/' 文件夹下。
-        imageCss:{tab0:'jd', tab1:'tsj', tab2:'ldw', tab3:'bb', tab4:'cat', tab5:'pp', tab6:'youa'}, //图片css类名
+            imageCss: { tab0: 'jd', tab1: 'tsj', tab2: 'ldw', tab3: 'bb', tab4: 'cat', tab5: 'pp', tab6: 'youa' }, //图片css类名
-        imageCssOffset:{tab0:35, tab1:35, tab2:35, tab3:35, tab4:35, tab5:25, tab6:35}, //图片偏移
+            // 定义一个名为 'imageCss' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的表情图片应用的 CSS 类名，这些类名应该在 'emotion.css' 文件中有相应的样式定义，用于控制图片在页面中的显示样式（如尺寸、背景等），例如 'tab0' 对应的图片应用 'jd' 这个 CSS 类名。
-        SmileyInfor:{
+            imageCssOffset: { tab0: 35, tab1: 35, tab2: 35, tab3: 35, tab4: 35, tab5: 25, tab6: 35 }, //图片偏移
-            tab0:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
+            // 定义一个名为 'imageCssOffset' 的对象属性，从名字推测可能用于设置图片在某种布局下的偏移量（具体看 CSS 样式和页面布局逻辑），不同面板（以 tab0 - tab6 为键）对应不同的偏移值，例如 'tab0' 对应的图片偏移量为 35（单位可能是像素等，需结合具体 CSS 和功能确定）。
-            tab1:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
+            SmileyInfor: {
-            tab2:['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', '炸弹', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
+                tab0: ['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
-            tab3:['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
+                tab1: ['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
-            tab4:['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
+                tab2: ['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', '炸弹', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
-            tab5:['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
+                tab3: ['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
-            tab6:['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上']
+                tab4: ['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
-        }
+                tab5: ['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
-    };
+                tab6: ['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上']
-</script>
+            }
+            // 定义一个名为 'SmileyInfor' 的对象属性，用于存储不同面板（以 tab0 - tab6 为键）对应的表情相关文字描述信息，例如 'tab0' 对应的数组里包含了一系列表情对应的名称或含义等文字内容，可能用于在页面上显示表情的提示信息之类的功能。
+        };
+    </script>
 </body>
 </html>

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/";
+    // 根据编辑器的 'emotionLocalization' 选项值来确定表情图片的路径（SmileyPath），如果为 true，则从本地相对路径 'images/' 获取，否则从指定的网络路径 "http://img.baidu.com/hi/" 获取
-    emotion.SmileyBox = createTabList( emotion.tabNum );
+    emotion.SmileyPath = editor.options.emotionLocalization === true? 'images/' : "http://img.baidu.com/hi/";
-    emotion.tabExist = createArr( emotion.tabNum );
+    // 创建一个包含指定数量（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],
+            tempBox = emotion.SmileyBox[pro],
-                tempStr = "";
+            tempStr = "";
 
-        if ( tempBox.length ) return;
+        // 如果当前面板对应的数组（tempBox）已经有元素了（即长度大于 0），则直接返回，不进行重复处理，可能是避免多次初始化同一面板的数据
-        for ( var i = 1; i <= tempName[1]; i++ ) {
+        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 ) {
+// 初始化事件处理函数，用于为指定 id（conId）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能
-    var tabHeads = $G( conId );
+function initEvtHandler(conId) {
-    for ( var i = 0, j = 0; i < tabHeads.childNodes.length; i++ ) {
+    // 通过 $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 ) {
+        // 只对节点类型为元素节点（nodeType == 1）的子节点进行操作，过滤掉文本节点、注释节点等非元素类型的节点
-            domUtils.on( tabObj, "click", (function ( index ) {
+        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 );
+    // 初始时默认切换到第一个面板（索引为 0），调用 switchTab 函数显示第一个面板的内容
-    $G( "tabIconReview" ).style.display = 'none';
+    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 );
+    editor.execCommand('insertimage', obj);
-    if ( !evt.ctrlKey ) {
+    if (!evt.ctrlKey) {
         dialog.popup.hide();
     }
 }
 
-function switchTab( index ) {
+// 切换面板显示的函数，根据传入的面板索引（index），执行调整面板高度（autoHeight）、创建面板内容（如果不存在）以及切换显示对应面板内容和隐藏其他面板内容等操作
-
+function switchTab(index) {
-    autoHeight( index );
+    // 根据传入的面板索引调整对应面板的高度相关样式，比如设置 iframe 和其父元素的高度值，确保合适的显示布局
-    if ( emotion.tabExist[index] == 0 ) {
+    autoHeight(index);
+    // 如果当前面板还不存在（对应 emotion.tabExist 数组中该索引位置的值为 0），则标记该面板已存在（设置为 1），并调用 createTab 函数创建该面板的具体内容（如添加表情图片表格等元素）
+    if (emotion.tabExist[index] == 0) {
         emotion.tabExist[index] = 1;
-        createTab( 'tab' + index );
+        createTab('tab' + index);
     }
-    //获取呈现元素句柄数组
+    // 获取用于切换面板的头部元素集合（包含各个面板标题的 span 元素）和主体元素集合（包含各个面板具体内容的 div 元素）
-    var tabHeads = $G( "tabHeads" ).getElementsByTagName( "span" ),
+    var tabHeads = $G("tabHeads").getElementsByTagName("span"),
-            tabBodys = $G( "tabBodys" ).getElementsByTagName( "div" ),
+        tabBodys = $G("tabBodys").getElementsByTagName("div"),
-            i = 0, L = tabHeads.length;
+        i = 0, L = tabHeads.length;
-    //隐藏所有呈现元素
+    // 循环遍历头部和主体元素集合，将所有元素的样式设置为初始状态，即隐藏主体元素（display="none"），清除头部元素的类名（className=""），用于清除之前可能设置的选中类名等样式
-    for ( ; i < L; i++ ) {
+    for (; i < L; i++) {
         tabHeads[i].className = "";
         tabBodys[i].style.display = "none";
     }
-    //显示对应呈现元素
+    // 将当前要显示的面板对应的头部元素添加特定的类名（可能用于设置选中样式，如背景色等变化），并显示其对应的主体元素内容
     tabHeads[index].className = "focus";
     tabBodys[index].style.display = "block";
 }
 
-function autoHeight( index ) {
+// 根据传入的面板索引（index）调整对应面板的高度相关样式的函数，通过设置 iframe 及其父元素的高度值，为不同面板设置不同的合适高度，确保良好的显示布局效果
-    var iframe = dialog.getDom( "iframe" ),
+function autoHeight(index) {
-            parent = iframe.parentNode.parentNode;
+    var iframe = dialog.getDom("iframe"),
-    switch ( index ) {
+        parent = iframe.parentNode.parentNode;
+    switch (index) {
         case 0:
             iframe.style.height = "380px";
             parent.style.height = "392px";
@@ -113,74 +135,78 @@ function autoHeight( index ) {
     }
 }
 
-
+// 创建特定面板（tabName）内容的函数，主要用于生成包含表情图片、相关提示信息以及鼠标交互事件绑定的表格元素，并添加到对应的面板 div 元素中，实现表情图片的展示和交互功能
-function createTab( tabName ) {
+function createTab(tabName) {
     var faceVersion = "?v=1.1", //版本号
-            tab = $G( tabName ), //获取将要生成的Div句柄
+        tab = $G(tabName), //获取将要生成的 Div 句柄，即对应面板的 div 元素对象，用于后续往里面添加生成的表格内容
-            imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径
+        imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径，通过拼接表情图片的基础路径（SmileyPath）和当前面板对应的文件夹路径（imageFolders[tabName]）得到完整路径
-            positionLine = 11 / 2, //中间数
+        positionLine = 11 / 2, //中间数，可能用于判断图片在表格中的位置（比如用于控制背景图片的定位等情况，结合后续代码看与鼠标悬停显示预览相关逻辑有关）
-            iWidth = iHeight = 35, //图片长宽
+        iWidth = iHeight = 35, //图片长宽，设置表情图片在页面上显示的宽度和高度均为 35 像素
-            iColWidth = 3, //表格剩余空间的显示比例
+        iColWidth = 3, //表格剩余空间的显示比例，可能用于设置表格单元格的宽度占比等布局相关参数，影响表情图片在表格中的排列方式
-            tableCss = emotion.imageCss[tabName],
+        tableCss = emotion.imageCss[tabName],
-            cssOffset = emotion.imageCssOffset[tabName],
+        cssOffset = emotion.imageCssOffset[tabName],
-            textHTML = ['<table class="smileytable">'],
+        textHTML = ['<table class="smileytable">'],
-            i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage,
+        i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage,
-            sUrl, realUrl, posflag, offset, infor;
+        sUrl, realUrl, posflag, offset, infor;
-
+
-    for ( ; i < imgNum; ) {
+    // 循环遍历当前面板对应的表情图片数量（imgNum），生成表格的行（tr）和列（td）元素，将表情图片、相关提示信息以及鼠标交互事件绑定添加到表格中
-        textHTML.push( '<tr>' );
+    for (; i < imgNum;) {
-        for ( var j = 0; j < imgColNum; j++, i++ ) {
+        textHTML.push('<tr>');
+        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( '<td  class="' + tableCss + '"   border="1" width="' + iColWidth + '%" style="border-collapse:collapse;" align="center"  bgcolor="transparent" onclick="InsertSmiley(\'' + realUrl.replace( /'/g, "\\'" ) + '\',event)" onmouseover="over(this,\'' + sUrl + '\',\'' + posflag + '\')" onmouseout="out(this)">' );
+                textHTML.push('<td  class="' + tableCss + '"   border="1" width="' + iColWidth + '%" style="border-collapse:collapse;" align="center"  bgcolor="transparent" onclick="InsertSmiley(\'' + realUrl.replace(/'/g, "\\'") + '\',event)" onmouseover="over(this,\'' + sUrl + '\',\'' + posflag + '\')" onmouseout="out(this)">');
-                textHTML.push( '<span>' );
+                textHTML.push('<span>');
-                textHTML.push( '<img  style="background-position:left ' + offset + 'px;" title="' + infor + '" src="' + emotion.SmileyPath + (editor.options.emotionLocalization ? '0.gif" width="' : 'default/0.gif" width="') + iWidth + '" height="' + iHeight + '"></img>' );
+                textHTML.push('<img  style="background-position:left ' + offset + 'px;" title="' + infor + '" src="' + emotion.SmileyPath + (editor.options.emotionLocalization? '0.gif" width="' : 'default/0.gif" width="') + iWidth + '" height="' + iHeight + '"></img>');
-                textHTML.push( '</span>' );
+                textHTML.push('</span>');
             } else {
-                textHTML.push( '<td width="' + iColWidth + '%"   bgcolor="#FFFFFF">' );
+                textHTML.push('<td width="' + iColWidth + '%"   bgcolor="#FFFFFF">');
             }
-            textHTML.push( '</td>' );
+            textHTML.push('</td>');
         }
-        textHTML.push( '</tr>' );
+        textHTML.push('</tr>');
     }
-    textHTML.push( '</table>' );
+    textHTML.push('</table>');
-    textHTML = textHTML.join( "" );
+    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 + ")";
+    $G('faceReview').style.backgroundImage = "url(" + srcPath + ")";
-    if ( posFlag == 1 ) $G( "tabIconReview" ).className = "show";
+    if (posFlag == 1) $G("tabIconReview").className = "show";
-    $G( "tabIconReview" ).style.display = 'block';
+    $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;
-}
+}
-

public2/ueditor/dialogs/gmap/gmap.html

@@ -1,89 +1,136 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
+<!-- 这是 HTML 4.01 过渡型的文档类型声明，告知浏览器按照 HTML 4.01 过渡型标准来解析页面内容，并指定对应的 DTD（文档类型定义）文件的 URL -->
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
     <title></title>
+    <!-- 页面的标题元素，此处为空，通常会设置一个有意义的标题显示在浏览器的标题栏等相关位置 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为 '../internal.js' 的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及业务逻辑等代码，具体功能依赖其内部定义 -->
     <style type="text/css">
-        .content{width:530px; height: 350px;margin: 10px auto;}
+        .content {
-        .content table{width: 100%}
+            width: 530px;
-        .content table td{vertical-align: middle;}
+            height: 350px;
-        #address{width:220px;height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}
+            margin: 10px auto;
+        }
+            /* 定义类名为 'content' 的元素样式，设置宽度为 530 像素，高度为 350 像素，并且在水平方向上自动居中（通过 margin: 10px auto 实现），可能作为页面主体内容的一个容器样式 */
+            .content table {
+                width: 100%
+            }
+                /* 当类名为 'content' 的元素内部包含 table 表格时，设置表格宽度占满父元素（也就是类名为 'content' 的元素）的宽度，使其自适应父元素宽度 */
+                .content table td {
+                    vertical-align: middle;
+                }
+        /* 对于类名为 'content' 的元素内部表格的单元格（td），设置垂直对齐方式为居中，使单元格内的内容在垂直方向上居中显示 */
+        #address {
+            width: 220px;
+            height: 21px;
+            background: #FFF;
+            border: 1px solid #d7d7d7;
+            line-height: 21px;
+        }
+        /* 定义 id 为 'address' 的元素样式，设置宽度为 220 像素，高度为 21 像素，背景颜色为白色（#FFF），边框为 1 像素宽的灰色（#d7d7d7）实线，并且行高设置为与元素高度相同（21 像素），可能用于输入框等文本输入元素的样式设置 */
     </style>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+    <!-- 引入 Google Maps API 的 JavaScript 文件，用于在页面中实现地图相关的功能，通过设置 sensor=false 表示不使用传感器（比如设备的地理位置传感器等），具体根据应用场景决定是否需要获取设备位置信息 -->
 </head>
 <body>
-<div class="content">
+    <div class="content">
-    <table>
+        <!-- 创建一个类名为 'content' 的 div 容器，应用上面定义的 '.content' 样式类，作为页面中主要内容的包裹容器，里面放置与地图搜索和展示相关的元素 -->
-        <tr>
+        <table>
-            <td><label for="address"><var id="lang_input_address"></var></label></td>
+            <tr>
-            <td><input id="address" type="text" /></td>
+                <td><label for="address"><var id="lang_input_address"></var></label></td>
-            <td><a id="doSearch" href="javascript:void(0)" class="button"><var id="lang_input_search"></var></a></td>
+                <td><input id="address" type="text" /></td>
-        </tr>
+                <td><a id="doSearch" href="javascript:void(0)" class="button"><var id="lang_input_search"></var></a></td>
-    </table>
+            </tr>
-    <div id="container" style="width: 100%; height: 340px;margin: 5px auto; border: 1px solid gray;"></div>
+        </table>
-</div>
+        <!-- 创建一个表格结构，第一列通过 label 标签关联到后面的文本输入框（input 元素，id 为 'address'），用于显示一个提示文本（<var id="lang_input_address"></var> 中的文本可能通过 JavaScript 动态设置，大概是与输入地址相关的提示语），第二列是用于输入地址信息的文本输入框，第三列是一个链接（a 元素，id 为 'doSearch'，应用 'button' 类样式，显示的文本同样通过 <var id="lang_input_search"></var> 动态设置，大概是与搜索操作相关的按钮文本），整体构成一个简单的地图地址搜索表单 -->
-<script type="text/javascript">
+        <div id="container" style="width: 100%; height: 340px;margin: 5px auto; border: 1px solid gray;"></div>
-    domUtils.on(window,"load",function(){
+        <!-- 创建一个 id 为 'container' 的 div 容器，设置宽度占满父元素（也就是类名为 'content' 的元素）的宽度，高度为 340 像素，在水平方向上自动居中（通过 margin: 5px auto 实现），并且有 1 像素宽的灰色边框，该容器用于后续放置 Google 地图展示相关的内容 -->
-        var map = new google.maps.Map(document.getElementById('container'), {
+    </div>
+    <script type="text/javascript">
+        domUtils.on(window, "load", function () {
+            // 使用 domUtils（可能是自定义的 DOM 操作工具函数库中的方法）为 window 对象绑定 'load' 事件监听器，当页面加载完成后执行以下匿名函数，用于初始化地图相关的各种功能和操作绑定
+            var map = new google.maps.Map(document.getElementById('container'), {
                 zoom: 3,
                 streetViewControl: false,
                 scaleControl: true,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             });
+            // 创建一个 Google Maps 的地图实例（map），将其渲染到页面中 id 为 'container' 的元素内，设置初始缩放级别为 3，禁用街景视图控制（streetViewControl: false），启用比例尺控制（scaleControl: true），地图类型为普通道路地图（mapTypeId: google.maps.MapTypeId.ROADMAP）
             var imgcss;
+            // 定义一个变量 imgcss，用于存储图片的样式信息，初始值为空，后续可能会根据获取到的已有图片样式进行赋值
             var marker = new google.maps.Marker({
                 map: map,
                 draggable: true
             });
-            function doSearch(){
+            // 创建一个 Google Maps 的标记（marker）实例，将其添加到刚才创建的地图（map）上，并且设置该标记是可拖动的（draggable: true），可用于在地图上标记特定位置
+            function doSearch() {
                 var address = document.getElementById('address').value;
+                // 获取页面中 id 为 'address' 的文本输入框内输入的地址文本内容
                 var geocoder = new google.maps.Geocoder();
-                geocoder.geocode( { 'address': address}, function (results, status) {
+                // 创建一个 Google Maps 的地理编码服务对象（geocoder），用于将地址文本转换为地理坐标等相关信息
+                geocoder.geocode({ 'address': address }, function (results, status) {
+                    // 使用地理编码服务对象的 geocode 方法，传入要查询的地址信息，该方法是异步的，查询完成后会执行回调函数，回调函数接收查询结果（results）和状态码（status）两个参数
                     if (status == google.maps.GeocoderStatus.OK) {
                         var bounds = results[0].geometry.viewport;
+                        // 如果查询状态码为 'OK'，表示查询成功，从查询结果的第一个元素（results[0]）中获取地理边界信息（geometry.viewport），用于后续调整地图显示范围
                         map.fitBounds(bounds);
+                        // 根据获取到的地理边界信息调整地图的显示范围，使地图能够完整显示该地址所在的区域
                         marker.setPosition(results[0].geometry.location);
+                        // 将标记的位置设置为查询结果中该地址对应的地理坐标位置（geometry.location）
                         marker.setTitle(address);
+                        // 为标记设置标题为输入的地址文本内容，可能在鼠标悬停等交互场景下显示该标题作为提示信息
                     } else alert(lang.searchError);
+                    // 如果查询状态码不是 'OK'，表示查询出现错误，弹出一个提示框（alert）显示错误信息（lang.searchError，这里的 lang 可能是一个包含多语言文本的对象，通过相应的键获取对应的错误提示文本，具体看代码其他部分的定义）
                 });
             }
-            $G('address').onkeydown = function (evt){
+            $G('address').onkeydown = function (evt) {
                 evt = evt || event;
                 if (evt.keyCode == 13) {
                     doSearch();
                 }
             };
+            // 使用 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'address' 的元素，并为其绑定 'keydown' 键盘按下事件监听器，当按下回车键（keyCode == 13）时，调用 doSearch 函数执行地址搜索操作，方便用户通过键盘直接进行搜索，无需点击搜索按钮
             $G("doSearch").onclick = doSearch;
-            dialog.onok = function (){
+            // 使用 $G 函数获取页面中 id 为 'doSearch' 的元素（也就是搜索按钮），并为其绑定 'click' 事件监听器，点击按钮时调用 doSearch 函数执行地址搜索操作
+            dialog.onok = function () {
                 var center = map.getCenter();
                 var point = marker.getPosition();
+                // 获取地图当前的中心坐标（center）以及标记所在的位置坐标（point），用于构建静态地图的 URL 参数
                 var url = "http://maps.googleapis.com/maps/api/staticmap?center=" + center.lat() + ',' + center.lng() + "&zoom=" + map.zoom + "&size=520x340&maptype=" + map.getMapTypeId() + "&markers=" + point.lat() + ',' + point.lng() + "&sensor=false";
-                editor.execCommand('inserthtml', '<img width="520" height="340" src="' + url + '"' + (imgcss ? ' style="' + imgcss + '"' :'') + '/>');
+                // 构建一个 Google Maps 静态地图的 URL，包含地图的中心坐标、缩放级别、尺寸（宽 520 像素，高 340 像素）、地图类型以及标记位置等参数，并且设置不使用传感器（sensor=false），用于获取一张静态的地图图片资源
+                editor.execCommand('inserthtml', '<img width="520" height="340" src="' + url + '"' + (imgcss ? ' style="' + imgcss + '"' : '') + '/>');
+                // 使用编辑器（editor，可能是自定义的富文本编辑器对象）的命令（execCommand）插入一段 HTML 代码，即创建一个宽度为 520 像素，高度为 340 像素的 img 图片元素，其 src 属性指向刚才构建的静态地图 URL，并且如果 imgcss 变量有值（即存在图片样式信息），则添加相应的 style 属性设置图片样式，将静态地图图片插入到编辑器内容中
             };
 
-            function getPars(str,par){
+            function getPars(str, par) {
-                var reg = new RegExp(par+"=((\\d+|[.,])*)","g");
+                var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
                 return reg.exec(str)[1];
             }
+            // 定义一个函数 getPars，用于从给定的字符串（str）中通过正则表达式（RegExp）匹配获取指定参数（par）的值，正则表达式的模式是匹配以参数名开头，后面跟着等号和对应的值（值可以是数字、小数点或者逗号组成的字符串），并返回匹配到的参数值
             var img = editor.selection.getRange().getClosedNode();
-            if(img && img.src.indexOf("http://maps.googleapis.com/maps/api/staticmap")!=-1){
+            if (img && img.src.indexOf("http://maps.googleapis.com/maps/api/staticmap") != -1) {
                 var url = img.getAttribute("src");
-                var centers = getPars(url,"center").split(",");
+                var centers = getPars(url, "center").split(",");
-                point = new google.maps.LatLng(Number(centers[0]),Number(centers[1]));
+                point = new google.maps.LatLng(Number(centers[0]), Number(centers[1]));
                 map.setCenter(point);
-                map.setZoom(Number(getPars(url,"zoom")));
+                map.setZoom(Number(getPars(url, "zoom")));
-                centers = getPars(url,"markers").split(",");
+                centers = getPars(url, "markers").split(",");
-                marker.setPosition(new google.maps.LatLng(Number(centers[0]),Number(centers[1])));
+                marker.setPosition(new google.maps.LatLng(Number(centers[0]), Number(centers[1])));
                 imgcss = img.style.cssText;
-            }else{
+            } else {
-                setTimeout(function(){
+                setTimeout(function () {
                     doSearch();
-                },30)
+                }, 30)
             }
-    });
+            // 获取编辑器当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()，可能是获取选区对应的 HTML 元素节点），判断如果该节点存在（img）并且其 src 属性中包含 Google Maps 静态地图的 URL 字符串，则表示当前是在编辑已有的静态地图相关内容，执行以下操作：
+            // 从该节点的 src 属性获取 URL 字符串（img.getAttribute("src")），通过 getPars 函数分别获取地图的中心坐标、缩放级别以及标记位置等参数信息，然后根据这些信息设置地图（map）的中心坐标、缩放级别以及标记（marker）的位置，并且获取该节点的样式信息（img.style.cssText）赋值给 imgcss 变量，用于后续保存或应用该图片的样式；
+            // 如果获取的节点不存在或者不是 Google Maps 静态地图相关的节点，则设置一个定时器，延迟 30 毫秒后调用 doSearch 函数执行地址搜索操作，可能是在初次加载页面或者新建相关内容时的默认操作，引导用户输入地址进行地图查询和展示。
+        });
 
-</script>
+    </script>
 </body>
 </html>

public2/ueditor/dialogs/help/help.css

@@ -1,7 +1,61 @@
-.wrapper{width: 370px;margin: 10px auto;zoom: 1;}
+/* 选择类名为 'wrapper' 的元素，并设置其样式 */
-.tabbody{height: 360px;}
+.wrapper{
-.tabbody .panel{width:100%;height: 360px;position: absolute;background: #fff;}
+    width: 370px;
-.tabbody .panel h1{font-size:26px;margin: 5px 0 0 5px;}
+    /* 设置元素的宽度为 370 像素，用于控制该元素在页面中的水平尺寸大小 */
-.tabbody .panel p{font-size:12px;margin: 5px 0 0 5px;}
+    margin: 10px auto;
-.tabbody table{width:90%;line-height: 20px;margin: 5px 0 0 5px;;}
+    /* 设置元素的上下外边距为 10 像素，左右外边距自动（auto），使元素在水平方向上自动居中，常用于将某个模块在页面中水平居中显示 */
-.tabbody table thead{font-weight: bold;line-height: 25px;}
+    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 像素）有所区别 */
+}

public2/ueditor/dialogs/help/help.html

@@ -1,82 +1,110 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
+<!-- 这是 HTML 4.01 过渡型的文档类型声明，告知浏览器按照 HTML 4.01 过渡型标准来解析页面内容，并指定对应的 DTD（文档类型定义）文件的网址 -->
 <html>
 <head>
     <title>帮助</title>
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <!-- 定义页面的标题为“帮助”，这个标题通常会显示在浏览器的标题栏中 -->
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及一些通用的业务逻辑等代码，具体功能依赖其内部定义 -->
     <link rel="stylesheet" type="text/css" href="help.css">
+    <!-- 引入名为“help.css”的外部 CSS 文件，用于设置页面中各元素的样式，比如布局、颜色、字体等外观表现 -->
 </head>
 <body>
-<div class="wrapper" id="helptab">
+    <div class="wrapper" id="helptab">
-    <div id="tabHeads" class="tabhead">
+        <!-- 创建一个类名为“wrapper”且 id 为“helptab”的 div 容器，从类名推测可能作为整个帮助页面内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的“help.css”文件中定义 -->
-        <span class="focus" tabsrc="about"><var id="lang_input_about"></var></span>
+        <div id="tabHeads" class="tabhead">
-        <span tabsrc="shortcuts"><var id="lang_input_shortcuts"></var></span>
+            <!-- 创建一个 id 为“tabHeads”且类名为“tabhead”的 div 容器，可能用于放置帮助页面中切换不同帮助主题的头部元素，样式在“help.css”中定义 -->
-    </div>
+            <span class="focus" tabsrc="about"><var id="lang_input_about"></var></span>
-    <div id="tabBodys" class="tabbody">
+            <!-- 创建一个 span 元素，添加了“focus”类名（可能用于表示当前选中状态的样式，在 CSS 中会有对应样式定义），并设置了一个自定义属性“tabsrc”值为“about”，内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与“关于”相关的帮助主题的标题之类内容 -->
-        <div id="about" class="panel">
+            <span tabsrc="shortcuts"><var id="lang_input_shortcuts"></var></span>
-            <h1>UEditor</h1>
+            <!-- 与上一个 span 元素类似，设置“tabsrc”属性为“shortcuts”，内部 var 元素的文本可能用于显示与“快捷键”相关的帮助主题的标题内容 -->
-            <p id="version"></p>
-            <p><var id="lang_input_introduction"></var></p>
         </div>
-        <div id="shortcuts" class="panel">
+        <div id="tabBodys" class="tabbody">
-            <table>
+            <!-- 创建一个 id 为“tabBodys”且类名为“tabbody”的 div 容器，可能用于放置帮助页面中不同帮助主题对应的主体内容，样式在“help.css”中定义 -->
-                <thead>
+            <div id="about" class="panel">
-                <tr>
+                <!-- 创建一个 id 为“about”且类名为“panel”的 div 容器，用于展示“关于”这个帮助主题的具体内容，其样式在“help.css”中有对应定义 -->
-                    <td><var id="lang_Txt_shortcuts"></var></td>
+                <h1>UEditor</h1>
-                    <td><var id="lang_Txt_func"></var></td>
+                <!-- 一级标题元素，显示文本为“UEditor”，可能用于介绍这个 UEditor 相关的一些基础信息，比如是什么工具之类的内容 -->
-                </tr>
+                <p id="version"></p>
-                </thead>
+                <!-- 创建一个带有 id 为“version”的 p 段落元素，其内容可能通过 JavaScript 动态设置，推测是用于显示 UEditor 的版本信息 -->
-                <tbody>
+                <p><var id="lang_input_introduction"></var></p>
-                <tr>
+                <!-- 创建一个 p 段落元素，内部嵌套一个带有特定 id 的 var 元素，文本同样可能通过 JavaScript 动态设置，大概是用于显示关于 UEditor 的详细介绍内容 -->
-                    <td>ctrl+b</td>
+            </div>
-                    <td><var id="lang_Txt_bold"></var></td>
+            <div id="shortcuts" class="panel">
-                </tr>
+                <!-- 创建一个 id 为“shortcuts”且类名为“panel”的 div 容器，用于展示“快捷键”这个帮助主题的具体内容，样式在“help.css”中有对应定义 -->
-                <tr>
+                <table>
-                    <td>ctrl+c</td>
+                    <thead>
-                    <td><var id="lang_Txt_copy"></var></td>
+                        <tr>
-                </tr>
+                            <td><var id="lang_Txt_shortcuts"></var></td>
-                <tr>
+                            <td><var id="lang_Txt_func"></var></td>
-                    <td>ctrl+x</td>
+                        </tr>
-                    <td><var id="lang_Txt_cut"></var></td>
+                    </thead>
-                </tr>
+                    <!-- 创建表格的表头部分（thead），包含两个单元格（td），分别嵌套带有特定 id 的 var 元素，文本可能通过 JavaScript 动态设置，从 id 推测大概是分别用于显示快捷键的按键组合以及对应的功能描述的标题 -->
-                <tr>
+                    <tbody>
-                    <td>ctrl+v</td>
+                        <tr>
-                    <td><var id="lang_Txt_Paste"></var></td>
+                            <td>ctrl+b</td>
-                </tr>
+                            <td><var id="lang_Txt_bold"></var></td>
-                <tr>
+                        </tr>
-                    <td>ctrl+y</td>
+                        <!-- 创建表格的主体行（tbody 内的 tr），第一列显示文本“ctrl+b”，表示一个快捷键的按键组合，第二列嵌套带有特定 id 的 var 元素，文本通过 JavaScript 动态设置，从 id 推测是用于显示该快捷键对应的功能（此处应该是加粗功能） -->
-                    <td><var id="lang_Txt_undo"></var></td>
+                        <tr>
-                </tr>
+                            <td>ctrl+c</td>
-                <tr>
+                            <td><var id="lang_Txt_copy"></var></td>
-                    <td>ctrl+z</td>
+                        </tr>
-                    <td><var id="lang_Txt_redo"></var></td>
+                        <!-- 与上一行类似，展示“ctrl+c”快捷键及其对应的复制功能描述 -->
-                </tr>
+                        <tr>
-                <tr>
+                            <td>ctrl+x</td>
-                    <td>ctrl+i</td>
+                            <td><var id="lang_Txt_cut"></var></td>
-                    <td><var id="lang_Txt_italic"></var></td>
+                        </tr>
-                </tr>
+                        <!-- 展示“ctrl+x”快捷键及其对应的剪切功能描述 -->
-                <tr>
+                        <tr>
-                    <td>ctrl+u</td>
+                            <td>ctrl+v</td>
-                    <td><var id="lang_Txt_underline"></var></td>
+                            <td><var id="lang_Txt_Paste"></var></td>
-                </tr>
+                        </tr>
-                <tr>
+                        <!-- 展示“ctrl+v”快捷键及其对应的粘贴功能描述 -->
-                    <td>ctrl+a</td>
+                        <tr>
-                    <td><var id="lang_Txt_selectAll"></var></td>
+                            <td>ctrl+y</td>
-                </tr>
+                            <td><var id="lang_Txt_undo"></var></td>
-                <tr>
+                        </tr>
-                    <td>shift+enter</td>
+                        <!-- 展示“ctrl+y”快捷键及其对应的恢复操作（可能是撤销的反向操作）功能描述 -->
-                    <td><var id="lang_Txt_visualEnter"></var></td>
+                        <tr>
-                </tr>
+                            <td>ctrl+z</td>
-                <tr>
+                            <td><var id="lang_Txt_redo"></var></td>
-                    <td>alt+z</td>
+                        </tr>
-                    <td><var id="lang_Txt_fullscreen"></var></td>
+                        <!-- 展示“ctrl+z”快捷键及其对应的撤销操作功能描述 -->
-                </tr>
+                        <tr>
-                </tbody>
+                            <td>ctrl+i</td>
-            </table>
+                            <td><var id="lang_Txt_italic"></var></td>
+                        </tr>
+                        <!-- 展示“ctrl+i”快捷键及其对应的斜体功能描述 -->
+                        <tr>
+                            <td>ctrl+u</td>
+                            <td><var id="lang_Txt_underline"></var></td>
+                        </tr>
+                        <!-- 展示“ctrl+u”快捷键及其对应的下划线功能描述 -->
+                        <tr>
+                            <td>ctrl+a</td>
+                            <td><var id="lang_Txt_selectAll"></var></td>
+                        </tr>
+                        <!-- 展示“ctrl+a”快捷键及其对应的全选功能描述 -->
+                        <tr>
+                            <td>shift+enter</td>
+                            <td><var id="lang_Txt_visualEnter"></var></td>
+                        </tr>
+                        <!-- 展示“shift+enter”快捷键及其对应的可视化换行（可能是与普通换行不同的一种换行效果，具体看对应功能实现）功能描述 -->
+                        <tr>
+                            <td>alt+z</td>
+                            <td><var id="lang_Txt_fullscreen"></var></td>
+                        </tr>
+                        <!-- 展示“alt+z”快捷键及其对应的全屏功能描述 -->
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
-</div>
+    <script type="text/javascript" src="help.js"></script>
-<script type="text/javascript" src="help.js"></script>
+    <!-- 引入相对路径为“help.js”的 JavaScript 文件，该文件应该包含了页面中与帮助主题展示相关的业务逻辑代码，例如根据用户点击切换不同帮助主题、动态设置版本信息等元素的文本内容等功能 -->
 </body>
 </html>

public2/ueditor/dialogs/help/help.js

@@ -5,52 +5,65 @@
  * Time: 下午1:06
  * To change this template use File | Settings | File Templates.
  */
-/**
+// 以上部分是代码的创建相关信息注释，说明了代码是使用 JetBrains PhpStorm 创建，以及作者、创建日期和时间等信息，对代码本身功能无实质影响。
- * tab点击处理事件
+
- * @param tabHeads
+// 定义一个名为 'clickHandler' 的函数，用于处理 tab 点击相关的操作，比如改变头部元素的样式以及控制对应主体内容的显示隐藏和层级关系等。
- * @param tabBodys
+// @param tabHeads ：传入的参数，表示 tab 头部元素的集合（通常是一组用于切换不同 tab 的按钮或链接等元素组成的数组）。
- * @param obj
+// @param tabBodys ：传入的参数，表示 tab 主体内容的集合（通常是一组对应不同 tab 的详细内容展示区域的元素组成的数组）。
- */
+// @param obj ：传入的参数，代表当前被点击的 tab 头部元素对象，用于针对该特定元素进行样式等相关操作。
-function clickHandler( tabHeads,tabBodys,obj ) {
+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;
         }
     }
-
 }
 
-/**
+// 定义一个名为'switchTab' 的函数，用于实现整体的 TAB 切换功能，主要是遍历 tab 元素，为每个 tab 头部元素绑定点击事件监听器，点击时调用 'clickHandler' 函数来处理相应的样式改变和主体内容切换显示等操作。
- * TAB切换
+// @param tabParentId ：传入的参数，代表 tab 的父节点 ID 或者传入 tab 所在的父元素对象本身，用于基于此查找 tab 头部和主体元素等相关子元素进行操作。
- * @param tabParentId  tab的父节点ID或者对象本身
- */
 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;
+// 调用'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;

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 内容 */
 }
 
 /* 图片对齐方式 */

public2/ueditor/dialogs/image/image.html

@@ -2,119 +2,168 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <!-- 定义页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文、特殊符号等 -->
     <title>ueditor图片对话框</title>
+    <!-- 设置页面的标题为“ueditor图片对话框”，这个标题通常会显示在浏览器的标题栏中 -->
     <script type="text/javascript" src="../internal.js"></script>
-
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及一些通用的业务逻辑等代码，具体功能依赖其内部定义 -->
     <!-- jquery -->
     <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
-
+    <!-- 引入 jQuery 库的压缩版本文件，jQuery 是一个常用的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画效果以及与服务器进行异步通信等操作，方便开发各种交互功能 -->
     <!-- webuploader -->
     <script src="../../third-party/webuploader/webuploader.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">
-
+    <!-- 引入 webuploader 的 JavaScript 核心文件（webuploader.min.js），它是一个用于实现文件上传功能的前端库，同时引入对应的 CSS 样式文件（webuploader.css），用于设置文件上传相关元素的样式，如上传按钮、进度条等外观显示 -->
     <!-- image dialog -->
     <link rel="stylesheet" href="image.css" type="text/css" />
+    <!-- 引入名为“image.css”的外部 CSS 文件，用于设置页面中与图片对话框相关的各元素的样式，比如布局、颜色、字体等外观表现，使整个图片对话框呈现出特定的视觉效果 -->
 </head>
 <body>
 
     <div class="wrapper">
+        <!-- 创建一个类名为“wrapper”的 div 容器，从类名推测可能作为整个图片对话框内容的外层包裹容器，方便对内部元素进行整体的布局和样式控制，其样式规则应该在引入的“image.css”等文件中定义 -->
         <div id="tabhead" class="tabhead">
+            <!-- 创建一个 id 为“tabhead”且类名为“tabhead”的 div 容器，可能用于放置图片对话框中切换不同功能选项卡（tab）的头部元素，样式在“image.css”中定义 -->
             <span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>
+            <!-- 创建一个 span 元素，添加了“tab”类名（可能用于表示普通的未选中状态的 tab 样式，在 CSS 中有对应样式定义），设置了一个自定义属性“data-content-id”值为“remote”，用于关联对应的内容板块（后续通过 JavaScript 根据该属性值来切换显示相应内容），内部嵌套一个带有特定 id 的 var 元素，其显示文本可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与“远程图片”相关的选项卡标题之类内容 -->
             <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
+            <!-- 与上一个 span 元素类似，添加“tab”类名且还有“focus”类名（可能表示当前选中状态的样式），“data-content-id”值为“upload”，内部 var 元素文本用于显示与“上传图片”相关的选项卡标题内容，表明当前“上传图片”这个 tab 是默认选中状态 -->
             <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
+            <!-- 创建一个类似的 span 元素，“data-content-id”值为“online”，内部 var 元素文本用于显示与“在线图片”相关的选项卡标题内容 -->
             <span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>
+            <!-- 创建一个类似的 span 元素，“data-content-id”值为“search”，内部 var 元素文本用于显示与“搜索图片”相关的选项卡标题内容 -->
         </div>
         <div class="alignBar">
+            <!-- 创建一个类名为“alignBar”的 div 容器，从类名推测可能用于设置图片的对齐相关操作的元素布局区域，样式在“image.css”中定义 -->
             <label class="algnLabel"><var id="lang_input_align"></var></label>
-                    <span id="alignIcon">
+            <!-- 创建一个带有“algnLabel”类名的 label 元素，用于显示与图片对齐相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户进行对齐操作之类的话语），可能在页面上呈现出一种特定的样式效果（在 CSS 中有对应样式定义） -->
-                        <span id="noneAlign" class="none-align focus" data-align="none"></span>
+            <span id="alignIcon">
-                        <span id="leftAlign" class="left-align" data-align="left"></span>
+                <span id="noneAlign" class="none-align focus" data-align="none"></span>
-                        <span id="rightAlign" class="right-align" data-align="right"></span>
+                <span id="leftAlign" class="left-align" data-align="left"></span>
-                        <span id="centerAlign" class="center-align" data-align="center"></span>
+                <span id="leftAlign" class="right-align" data-align="right"></span>
-                    </span>
+                <span id="leftAlign" class="center-align" data-align="center"></span>
-            <input id="align" name="align" type="hidden" value="none"/>
+            </span>
+            <!-- 创建一个 id 为“alignIcon”的 span 元素，作为对齐图标容器，内部嵌套多个具有不同类名（如“none-align”、“left-align”等，对应不同的对齐方式，样式在“image.css”中有通过背景图片等方式定义不同的图标样式）且带有“data-align”自定义属性（用于标识具体对齐方式）的 span 子元素，用于展示不同的图片对齐方式图标，其中“noneAlign”元素还带有“focus”类名（可能表示默认或当前选中的对齐方式） -->
+            <input id="align" name="align" type="hidden" value="none" />
+            <!-- 创建一个隐藏的输入框（type="hidden"），id 为“align”，name 也为“align”，初始值为“none”，可能用于通过 JavaScript 操作来记录当前选择的图片对齐方式，虽然在页面上不直接显示，但可以在后台进行数据传递或状态保存等用途 -->
         </div>
         <div id="tabbody" class="tabbody">
-
+            <!-- 创建一个 id 为“tabbody”且类名为“tabbody”的 div 容器，可能用于放置图片对话框中不同功能选项卡对应的主体内容，样式在“image.css”中定义 -->
             <!-- 远程图片 -->
             <div id="remote" class="panel">
+                <!-- 创建一个 id 为“remote”且类名为“panel”的 div 容器，用于展示“远程图片”这个功能选项卡对应的具体内容，其样式在“image.css”中有对应定义 -->
                 <div class="top">
+                    <!-- 创建一个类名为“top”的 div 容器，可能用于划分“远程图片”板块内的顶部区域，放置相关输入框等元素，布局和样式在“image.css”中定义 -->
                     <div class="row">
+                        <!-- 创建一个类名为“row”的 div 容器，可能用于形成一行布局结构，放置特定的元素组合，样式在“image.css”中定义 -->
                         <label for="url"><var id="lang_input_url"></var></label>
-                        <span><input class="text" id="url" type="text"/></span>
+                        <!-- 创建一个 label 元素，通过“for”属性关联到后面的 id 为“url”的输入框元素，用于显示与图片 URL 相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户输入图片网址之类的话语） -->
+                        <span><input class="text" id="url" type="text" /></span>
+                        <!-- 创建一个 span 元素，内部包含一个 id 为“url”且类名为“text”的输入框元素（样式在“image.css”中有定义，比如边框、背景等外观样式），用于用户输入远程图片的网址 -->
                     </div>
                 </div>
                 <div class="left">
+                    <!-- 创建一个类名为“left”的 div 容器，可能用于划分“远程图片”板块内的左侧区域，放置与图片尺寸、边框等属性设置相关的元素，布局和样式在“image.css”中定义 -->
                     <div class="row">
                         <label><var id="lang_input_size"></var></label>
-                        <span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width"/>px </span>
+                        <!-- 创建一个 label 元素，用于显示与图片尺寸相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户设置图片宽高等话语） -->
-                        <span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="height"/>px </span>
+                        <span><var id="lang_input_width">&nbsp;&nbsp;</var><input class="text" type="text" id="width" />px </span>
+                        <!-- 创建一个 span 元素，内部先包含一个用于显示“宽度”相关提示文本（通过 var 元素展示，文本通过 JavaScript 动态设置）的空格占位符，再跟着一个 id 为“width”且类名为“text”的输入框元素（用于输入图片宽度值），最后显示单位“px”，用于设置远程图片的宽度 -->
+                        <span><var id="lang_input_height">&nbsp;&nbsp;</var><input class="text" type="text" id="width" />px </span>
+                        <!-- 与上一个 span 元素类似，用于设置远程图片的高度，包含“高度”提示文本、输入框（id 为“height”）和单位“px” -->
                         <span><input id="lock" type="checkbox" disabled="disabled"><span id="lockicon"></span></span>
+                        <!-- 创建一个 span 元素，内部包含一个被禁用（disabled="disabled"）的复选框（type="checkbox"，id 为“lock”），可能用于控制图片的某种锁定属性（具体功能看业务逻辑），后面跟着一个 id 为“lockicon”的空 span 元素，其样式可能通过 CSS 结合背景图片等方式显示一个特定的图标（比如锁的图标）来表示该属性相关状态 -->
                     </div>
                     <div class="row">
                         <label><var id="lang_input_border"></var></label>
-                        <span><input class="text" type="text" id="border"/>px </span>
+                        <!-- 创建一个 label 元素，用于显示与图片边框相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户设置图片边框宽度之类的话语） -->
+                        <span><input class="text" type="text" id="border" />px </span>
+                        <!-- 创建一个 span 元素，内部包含一个 id 为“border”且类名为“text”的输入框元素（用于输入图片边框宽度值）和单位“px”，用于设置远程图片的边框宽度 -->
                     </div>
                     <div class="row">
                         <label><var id="lang_input_vhspace"></var></label>
-                        <span><input class="text" type="text" id="vhSpace"/>px </span>
+                        <!-- 创建一个 label 元素，用于显示与图片垂直间距相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户设置图片垂直间距值之类的话语） -->
+                        <span><input class="text" type="text" id="vhSpace" />px </span>
+                        <!-- 创建一个 span 元素，内部包含一个 id 为“vhSpace”且类名为“text”的输入框元素（用于输入图片垂直间距值）和单位“px”，用于设置远程图片的垂直间距 -->
                     </div>
                     <div class="row">
                         <label><var id="lang_input_title"></var></label>
-                        <span><input class="text" type="text" id="title"/></span>
+                        <!-- 创建一个 label 元素，用于显示与图片标题相关的提示文本（内部 var 元素文本通过 JavaScript 动态设置，大概是提示用户输入图片标题之类的话语） -->
+                        <span><input class="text" type="text" id="title" /></span>
+                        <!-- 创建一个 span 元素，内部包含一个 id 为“title”且类名为“text”的输入框元素（用于输入图片标题内容），用于设置远程图片的标题 -->
                     </div>
                 </div>
                 <div class="right"><div id="preview"></div></div>
+                <!-- 创建一个类名为“right”的 div 容器，可能用于划分“远程图片”板块内的右侧区域，内部只包含一个 id 为“preview”的空 div 元素，其样式在“image.css”中定义，推测用于展示远程图片的预览效果等内容 -->
             </div>
 
             <!-- 上传图片 -->
             <div id="upload" class="panel focus">
+                <!-- 创建一个 id 为“upload”且类名为“panel”的 div 容器，用于展示“上传图片”这个功能选项卡对应的具体内容，添加“focus”类名表示当前该板块是选中状态（显示状态），其样式在“image.css”中有对应定义 -->
                 <div id="queueList" class="queueList">
+                    <!-- 创建一个 id 为“queueList”且类名为“queueList”的 div 容器，可能用于展示上传文件的队列列表相关元素，样式在“image.css”中定义 -->
                     <div class="statusBar element-invisible">
+                        <!-- 创建一个类名为“statusBar”且添加了“element-invisible”类名（可能用于初始隐藏该元素，在满足一定条件时通过 JavaScript 操作显示出来，样式在“image.css”中有对应定义）的 div 容器，用于展示文件上传的状态信息，比如进度条、提示文本等 -->
                         <div class="progress">
+                            <!-- 创建一个类名为“progress”的 div 容器，用于展示文件上传的进度情况，内部包含进度相关的文本和百分比元素 -->
                             <span class="text">0%</span>
+                            <!-- 创建一个 span 元素，用于显示上传进度的文字描述，初始值为“0%”，随着上传过程会通过 JavaScript 更新其内容 -->
                             <span class="percentage"></span>
+                            <!-- 创建一个空的 span 元素，用于通过 JavaScript 根据上传进度动态设置其宽度等样式来直观展示进度的百分比情况 -->
                         </div><div class="info"></div>
+                        <!-- 创建一个空的 div 元素，类名为“info”，可能用于显示上传过程中的一些提示信息（比如上传速度、剩余时间等），通过 JavaScript 动态填充内容 -->
                         <div class="btns">
+                            <!-- 创建一个类名为“btns”的 div 容器，用于放置上传相关的操作按钮等元素 -->
                             <div id="filePickerBtn"></div>
+                            <!-- 创建一个 id 为“filePickerBtn”的空 div 元素，其样式在“image.css”中定义，可能用于触发文件选择操作（比如点击后弹出文件选择对话框），具体功能通过 JavaScript 结合 webuploader 库实现 -->
                             <div class="uploadBtn"><var id="lang_start_upload"></var></div>
+                            <!-- 创建一个类名为“uploadBtn”的 div 元素，内部嵌套一个带有特定 id 的 var 元素，文本通过 JavaScript 动态设置，大概是用于显示“开始上传”之类的按钮文本，作为触发文件上传操作的按钮 -->
                         </div>
                     </div>
                     <div id="dndArea" class="placeholder">
+                        <!-- 创建一个 id 为“dndArea”且类名为“placeholder”的 div 容器，可能用于展示文件拖放上传区域的占位提示信息等内容，样式在“image.css”中定义 -->
                         <div class="filePickerContainer">
+                            <!-- 创建一个类名为“filePickerContainer”的 div 容器，可能用于进一步包装文件选择相关的元素或设置样式，具体功能和样式依赖“image.css”以及 JavaScript 操作 -->
                             <div id="filePickerReady"></div>
+                            <!-- 创建一个 id 为“filePickerReady”的空 div 元素，其用途可能是在准备好文件选择功能（比如加载完相关资源等情况）时通过 JavaScript 进行一些操作或显示特定内容 -->
                         </div>
                     </div>
                     <ul class="filelist element-invisible">
+                        <!-- 创建一个类名为“filelist”且添加了“element-invisible”类名（初始隐藏，后续根据情况显示）的无序列表（ul）元素，用于展示已选择的待上传文件列表等信息，样式在“image.css”中定义 -->
                         <li id="filePickerBlock" class="filePickerBlock"></li>
+                        <!-- 创建一个 id 为“filePickerBlock”且类名为“filePickerBlock”的列表项（li）元素，可能用于表示文件选择相关的一个块元素（比如用于触发文件选择的占位块等），具体功能和样式在“image.css”以及 JavaScript 操作下体现 -->
                     </ul>
                 </div>
             </div>
 
             <!-- 在线图片 -->
             <div id="online" class="panel">
+                <!-- 创建一个 id 为“online”且类名为“panel”的 div 容器，用于展示“在线图片”这个功能选项卡对应的具体内容，其样式在“image.css”中有对应定义 -->
                 <div id="imageList"><var id="lang_imgLoading"></var></div>
+                <!-- 创建一个 id 为“imageList”的 div 容器，内部嵌套一个带有特定 id 的 var 元素，文本通过 JavaScript 动态设置，推测初始可能显示图片加载中的提示信息，后续通过 JavaScript 获取并展示在线图片列表等内容 -->
             </div>
 
             <!-- 搜索图片 -->
             <div id="search" class="panel">
+                <!-- 创建一个 id 为“search”且类名为“panel”的 div 容器，用于展示“搜索图片”这个功能选项卡对应的具体内容，其样式在“image.css”中有对应定义 -->
                 <div class="searchBar">
+                    <!-- 创建一个类名为“searchBar”的 div 容器，可能用于放置图片搜索相关的输入框、按钮等元素，布局和样式在“image.css”中定义 -->
                     <input id="searchTxt" class="searchTxt text" type="text" />
-                    <select id="searchType" class="searchType">
+                                        <select id="searchType" class="searchType">
-                        <option value="&s=4&z=0"></option>
+                                            <option value="&s=4&z=0"></option>
-                        <option value="&s=1&z=19"></option>
+                                            <option value="&s=1&z=19"></option>
-                        <option value="&s=2&z=0"></option>
+                                            <option value="&s=2&z=0"></option>
-                        <option value="&s=3&z=0"></option>
+                                            <option value="&s=3&z=0"></option>
-                    </select>
+                                        </select>
-                    <input id="searchReset" type="button"  />
+                                        <input id="searchReset" type="button"  />
-                    <input id="searchBtn" type="button"  />
+                                        <input id="searchBtn" type="button"  />
-                </div>
+                                    </div>
-                <div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
+                                    <div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
-            </div>
+                                </div>
 
-        </div>
+                            </div>
-    </div>
+                        </div>
-    <script type="text/javascript" src="image.js"></script>
+                        <script type="text/javascript" src="image.js"></script>
 
-</body>
+                    </body>
-</html>
+                    </html>

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() {
 

public2/ueditor/dialogs/insertframe/insertframe.html

@@ -46,52 +46,71 @@
 </div>
 <script type="text/javascript">
     var iframe = editor._iframe;
-    if(iframe){
+    // 获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）中的 _iframe 属性值，存储在 iframe 变量中，这个 iframe 变量可能代表页面中的某个 iframe 元素，后续会基于它进行相关属性的获取和操作。
-        $G("url").value = iframe.getAttribute("src")||"";
+    if (iframe) {
-        $G("width").value = iframe.getAttribute("width")||iframe.style.width.replace("px","")||"";
+        $G("url").value = iframe.getAttribute("src") || "";
-        $G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px","") ||"";
+        // 如果 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(){
+    function queding() {
-        var  url = $G("url").value.replace(/^\s*|\s*$/ig,""),
+        var url = $G("url").value.replace(/^\s*|\s*$/ig, ""),
-                width = $G("width").value,
+            width = $G("width").value,
-                height = $G("height").value,
+            height = $G("height").value,
-                scroll = $G("scroll"),
+            scroll = $G("scroll"),
-                frameborder = $G("frameborder"),
+            frameborder = $G("frameborder"),
-                float = $G("align").value,
+            float = $G("align").value,
-                newIframe = editor.document.createElement("iframe"),
+            newIframe = editor.document.createElement("iframe"),
-                div;
+            div;
-        if(!url){
+        // 定义一个名为 'queding'（可能表示确定操作的函数）的函数，在函数内部首先获取页面中各个相关元素的值或状态，如获取 id 为 'url' 的输入框去除首尾空白字符后的文本值（通过正则表达式替换空白字符），获取 id 为 'width' 和 'height' 的输入框的值，获取 id 为'scroll' 和 'frameborder' 的复选框元素本身（后续用于判断选中状态），获取 id 为 'align' 的元素的值（用于对齐方式相关操作），然后创建一个新的 iframe 元素（通过编辑器的 document 对象的 createElement 方法创建，editor 可能是富文本编辑器相关对象），并声明一个 div 变量（初始值为 undefined，后续会根据情况使用）。
+        if (!url) {
             alert(lang.enterAddress);
             return false;
         }
-        newIframe.setAttribute("src",/http:\/\/|https:\/\//ig.test(url) ? url : "http://"+url);
+        // 如果获取到的 url 值为空（即用户没有输入相关地址），则弹出一个提示框（alert），提示内容为 lang.enterAddress（可能是通过语言包获取的提示用户输入地址的文本信息，具体依赖代码中 lang 对象的定义），并返回 false，阻止后续操作执行，起到输入合法性校验的作用。
-        /^[1-9]+[.]?\d*$/g.test( width ) ? newIframe.setAttribute("width",width) : "";
+        newIframe.setAttribute("src", /http:\/\/|https:\/\//ig.test(url) ? url : "http://" + url);
-        /^[1-9]+[.]?\d*$/g.test( height ) ? newIframe.setAttribute("height",height) : "";
+        // 为新创建的 iframe 元素设置'src' 属性值，如果输入的 url 值通过正则表达式检测（判断是否以 'http://' 或 'https://' 开头）符合网址格式则直接使用该 url 值作为'src' 属性值，否则在 url 前面拼接 'http://' 后作为'src' 属性值，确保设置的网址格式正确。
-        scroll.checked ?  newIframe.setAttribute("scrolling","yes") : newIframe.setAttribute("scrolling","no");
+        /^[1-9]+[.]?\d*$/g.test(width) ? newIframe.setAttribute("width", width) : "";
-        frameborder.checked ?  newIframe.setAttribute("frameborder","1",0) : newIframe.setAttribute("frameborder","0",0);
+        // 通过正则表达式判断输入的 width 值是否符合数字格式（以非 0 数字开头，后面可跟小数点和数字），如果符合则为新的 iframe 元素设置 'width' 属性值为该 width 值，否则不进行任何操作（通过三元表达式的短路特性实现），用于设置 iframe 元素的宽度属性，保证设置的值是合理的数字格式。
-        float ? newIframe.setAttribute("align",float) :  newIframe.setAttribute("align","");
+        /^[1-9]+[.]?\d*$/g.test(height) ? newIframe.setAttribute("height", height) : "";
-        if(iframe){
+        // 与设置宽度属性类似，通过正则表达式验证 height 值是否符合数字格式，符合则为新 iframe 元素设置 'height' 属性值为该 height 值，否则不操作，用于设置 iframe 元素的高度属性。
-            iframe.parentNode.insertBefore(newIframe,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{
+        } else {
             div = editor.document.createElement("div");
             div.appendChild(newIframe);
-            editor.execCommand("inserthtml",div.innerHTML);
+            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;
-    $G("url").onkeydown = function(evt){
+    // 将对话框（dialog）的 'onok' 事件（可能表示用户点击确定按钮的事件）绑定到 'queding' 函数上，当用户在对话框中点击确定按钮时，就会执行 'queding' 函数内的一系列操作，实现相应的功能逻辑。
+    $G("url").onkeydown = function (evt) {
         evt = evt || event;
-        if(evt.keyCode == 13){
+        if (evt.keyCode == 13) {
             queding();
         }
     };
-    $focus($G( "url" ));
+    // 为页面中 id 为 'url' 的输入框元素绑定 'onkeydown' 键盘按下事件监听器，当有键盘按键按下时，首先处理不同浏览器获取事件对象的兼容性问题（evt = evt || event，兼容 IE 和其他标准浏览器获取事件对象的方式），然后判断按下的按键的键码（keyCode）是否为 13（回车键的键码），如果是回车键按下，则调用 'queding' 函数，实现用户在输入框中按下回车键时等同于点击确定按钮的功能，方便用户操作。
+    $focus($G("url"));
 
 </script>
 </body>

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` 对象，通过父页面（`parent`）的 `$EDITORUI` 对象（从命名推测可能是编辑器相关的 UI 管理对象，存储了与编辑器界面相关的各种组件、元素等信息，具体结构和功能依赖整体应用的设计），根据当前 `iframe` 的 `id`（通过 `window.frameElement.id` 获取 `iframe` 的 `id`，并使用正则表达式替换掉末尾的 `_iframe` 字符串）来获取对应的 `dialog` 对象，这个 `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 ) {
+    $G = function (id) {
-        return document.getElementById( id )
+        return document.getElementById(id)
     };
-    //focus元素
+    // 定义一个名为 `$G` 的函数，它是对 `document.getElementById` 方法的简单封装，用于根据传入的元素 `id` 获取对应的页面 DOM 元素，方便在代码中更简洁地获取元素引用，后续代码中会多次使用这个函数来获取特定 `id` 的元素进行操作。
-    $focus = function ( node ) {
+
-        setTimeout( function () {
+    // `$focus` 函数用于设置页面元素的焦点，通过传入一个节点元素（`node`），根据浏览器类型（判断是否为 `IE` 浏览器）来采用不同的方式设置焦点。如果是 `IE` 浏览器，使用 `createTextRange` 方法创建一个文本范围对象（`r`），调用 `collapse` 方法将光标移动到文本末尾（`false` 参数表示移动到末尾，`true` 表示移动到开头），然后调用 `select` 方法选中该文本范围，实现设置焦点的效果；如果不是 `IE` 浏览器，则直接调用节点元素的 `focus` 方法来设置焦点，通过 `setTimeout` 函数在下次事件循环开始时（延迟时间为 0）执行这个设置焦点的操作，确保操作在合适的时机执行。
-            if ( browser.ie ) {
+    $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(),
+    // 使用 `utils` 对象的 `loadFile` 函数（具体功能依赖其内部实现，但从命名推测是用于加载文件资源到页面中）向页面中加载一个样式表文件。传入 `document` 对象（表示当前页面的文档对象）以及一个配置对象，配置对象中指定了要加载的文件的 `href`（文件路径，通过获取编辑器的 `options` 对象中的 `themePath`（主题路径相关配置）、`theme`（当前主题名称）以及添加一个随机数作为缓存破坏参数，拼接成完整的样式表文件路径）、`tag`（设置为 `"link"`，表示通过 `<link>` 标签的方式加载样式表文件）、`type`（设置为 `"text/css"`，表明文件类型为 CSS 样式表）、`rel`（设置为 `"stylesheet"`，表示是样式表的关联关系）等属性，实现动态加载特定的样式表文件到页面，用于应用相应的样式规则，可能是根据当前编辑器的主题来加载对应的样式表。
-        tag:"link",
+    utils.loadFile(document, {
-        type:"text/css",
+        href: editor.options.themePath + editor.options.theme + "/dialogbase.css?cache=" + Math.random(),
-        rel:"stylesheet"
+        tag: "link",
+        type: "text/css",
+        rel: "stylesheet"
     });
-    lang = editor.getLang(dialog.className.split( "-" )[2]);
+
-    if(lang){
+    lang = editor.getLang(dialog.className.split("-")[2]);
-        domUtils.on(window,'load',function () {
+    // 通过 `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/";
-            //针对静态资源
+            // 构建一个 `langImgPath` 变量，通过获取编辑器的 `options` 对象中的 `langPath`（语言相关的路径前缀）和 `lang`（当前语言标识）以及固定的 `"/images/"` 拼接而成，这个路径用于后续查找和替换与语言相关的图片资源路径等操作，确保在不同语言环境下能正确加载对应的图片资源。
-            for ( var i in lang["static"] ) {
+
-                var dom = $G( i );
+            // 遍历 `lang` 对象的 `static` 属性（从命名推测可能是存储了各种静态资源相关配置信息的对象，比如页面中固定的文本内容、图片引用、元素样式等与语言相关的配置，每个属性对应一个页面元素的相关配置）中的所有属性（通过 `for...in` 循环遍历对象的可枚举属性），获取每个属性对应的配置信息，并根据配置内容和元素类型进行相应的更新操作。
-                if(!dom) continue;
+            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){
+                if (content.style) {
-                    content = utils.extend({},content,false);
+                    content = utils.extend({}, content, false);
-                    content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath)
+                    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 ) {
+                        for (var p in content) {
-                            p != "options" && dom.setAttribute( p, content[p] );
+                            p!= "options" && dom.setAttribute(p, content[p]);
                         }
                         break;
-                    default :
+                        // 如果元素标签名是 `"select"`（下拉选择框元素），先获取其所有的 `<option>` 选项元素（通过 `dom.options` 获取），然后遍历这些选项元素，将每个选项的 `innerHTML`（显示的文本内容）更新为 `content.options` 数组（语言配置中对应下拉框选项的文本内容数组）中相应位置的元素内容；接着遍历 `content` 对象的所有属性，对于除了 `"options"` 属性之外的其他属性（通过判断属性名是否不等于 `"options"`），使用 `dom.setAttribute` 方法（为元素设置属性）将属性设置到下拉框元素上，实现更新下拉框的选项文本以及其他相关属性的效果，比如设置 `selected` 属性来默认选中某个选项等情况。
-                        domUtils.setAttributes( dom, content);
+                    default:
+                        domUtils.setAttributes(dom, content);
+                        
+                        // 如果元素标签名不属于上述两种情况，则使用 `domUtils` 对象的 `setAttributes` 函数（可能是用于批量设置元素多个属性的函数，根据传入的配置对象中的属性名和属性值来设置元素相应的属性）将 `content` 对象中的属性设置到元素上，实现更新元素各种属性（比如 `class`、`id`、`style` 等属性根据语言配置进行更新）的效果。
                 }
             }
-        } );
+        });
     }
 
 
-})();
+})();
-

public2/ueditor/dialogs/link/link.html

@@ -1,132 +1,181 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
     <title></title>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <!-- 这里页面标题为空，通常可设置一个有意义的标题，用于在浏览器标题栏展示页面相关信息 -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能正确显示各种字符 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含页面会用到的自定义函数、变量以及通用业务逻辑等代码，具体功能依赖其内部定义 -->
     <style type="text/css">
-        *{margin:0;padding:0;color: #838383;}
+        * {
-        table{font-size: 12px;margin: 10px;line-height: 30px}
+            margin: 0;
-        .txt{width:300px;height:21px;line-height:21px;border:1px solid #d7d7d7;}
+            padding: 0;
+            color: #838383;
+        }
+        /* 通配符选择器（*）设置所有元素的外边距（margin）和内边距（padding）为 0，文本颜色为浅灰色（#838383），用于统一页面元素的基本样式布局和文字颜色风格 */
+        table {
+            font-size: 12px;
+            margin: 10px;
+            line-height: 30px;
+        }
+        /* 针对 table 元素设置字体大小为 12 像素，外边距为 10 像素（在页面中与周围元素留出一定间隔），行高为 30 像素，控制表格内文本的显示样式和整体布局位置 */
+        .txt {
+            width: 300px;
+            height: 21px;
+            line-height: 21px;
+            border: 1px solid #d7d7d7;
+        }
+        /* 定义类名为 'txt' 的元素样式，设置宽度为 300 像素，高度为 21 像素，行高与高度相同（使文本垂直居中），边框为 1 像素宽的浅灰色（#d7d7d7）实线，用于具有此类名的输入框等元素呈现统一的外观样式 */
     </style>
 </head>
 <body>
     <table>
+        <!-- 创建一个表格元素，用于以表格形式布局页面内相关输入框、文本标签等元素 -->
         <tr>
             <td><label for="text"> <var id="lang_input_text"></var></label></td>
-            <td><input class="txt" id="text" type="text" disabled="true"/></td>
+            <td><input class="txt" id="text" type="text" disabled="true" /></td>
         </tr>
+        <!-- 创建表格的一行（tr），该行包含两个单元格（td）。第一个单元格放置一个 label 标签，通过 'for' 属性关联到后面 id 为 'text' 的输入框元素，label 内部嵌套一个带有特定 id 的 var 元素，其文本内容可能通过 JavaScript 动态设置，推测用于显示与文本相关的提示信息；第二个单元格放置一个 id 为 'text'、类名为 'txt' 的文本输入框元素，并且初始设置为禁用状态（disabled="true"） -->
         <tr>
             <td><label for="href"> <var id="lang_input_url"></var></label></td>
             <td><input class="txt" id="href" type="text" /></td>
         </tr>
+        <!-- 与上一行结构类似，这行的 label 元素通过 'for' 属性关联到 id 为 'href' 的输入框，var 元素文本用于显示与网址（url）相关的提示信息，后面的输入框（id 为 'href'）用于用户输入网址，且未设置禁用状态 -->
         <tr>
             <td><label for="title"> <var id="lang_input_title"></var></label></td>
-            <td><input class="txt" id="title" type="text"/></td>
+            <td><input class="txt" id="title" type="text" /></td>
         </tr>
+        <!-- 同样结构的一行，label 关联到 id 为 'title' 的输入框，var 元素提示与标题相关信息，输入框用于输入标题内容 -->
         <tr>
-             <td colspan="2">
+            <td colspan="2">
-                 <label for="target"><var id="lang_input_target"></var></label>
+                <label for="target"><var id="lang_input_target"></var></label>
-                 <input id="target" type="checkbox"/>
+                <input id="target" type="checkbox" />
-             </td>
+            </td>
         </tr>
+        <!-- 这行两个单元格合并（colspan="2"），放置一个 label 元素通过 'for' 属性关联到后面的复选框（checkbox）元素，var 元素提示与目标（可能是链接打开的目标窗口等相关）信息，复选框用于用户勾选相关选项，具体功能看后续 JavaScript 代码逻辑 -->
         <tr>
             <td colspan="2" id="msg"></td>
         </tr>
+        <!-- 又是两个单元格合并的一行，包含一个 id 为'msg' 的空单元格，从后续 JavaScript 代码可知，该单元格用于显示一些提示信息（如网址格式相关提示等） -->
     </table>
-<script type="text/javascript">
 
-    editor.setOpt('allowLinkProtocols', ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:']);
+    <script type="text/javascript">
-    var allowLinkProtocols = editor.getOpt('allowLinkProtocols');
 
-    var range = editor.selection.getRange(),
+        editor.setOpt('allowLinkProtocols', ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:']);
-        link = range.collapsed ? editor.queryCommandValue( "link" ) : editor.selection.getStart(),
+        // 通过编辑器（editor，可能是富文本编辑器相关对象，具体依赖代码上下文环境）的 setOpt 方法设置一个名为 'allowLinkProtocols' 的选项，其值为一个包含多种协议（如 'http:'、'https:' 等）的数组，用于限定允许的链接协议类型，后续会根据此进行链接网址合法性校验等操作。
-        url,
+        var allowLinkProtocols = editor.getOpt('allowLinkProtocols');
-        text = $G('text'),
+        // 获取编辑器中设置的 'allowLinkProtocols' 选项的值，存储在 allowLinkProtocols 变量中，方便后续代码多次使用该允许的协议列表进行判断。
-        rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(),'a',true),
-        orgText;
 
-    link = domUtils.findParentByTagName( link, "a", true );
+        var range = editor.selection.getRange(),
+            link = range.collapsed ? editor.queryCommandValue("link") : editor.selection.getStart(),
+            url,
+            text = $G('text'),
+            rangeLink = domUtils.findParentByTagName(range.getCommonAncestor(), 'a', true),
+            orgText;
+        // 获取编辑器当前选区的范围（通过 editor.selection.getRange() 方法）存储在 range 变量中；根据选区是否折叠（collapsed 属性）来决定获取不同的链接相关信息，如果选区折叠，通过 editor.queryCommandValue("link") 获取链接相关的值（具体含义看编辑器对应命令实现），否则获取选区开始位置（editor.selection.getStart()）作为 link 值；声明 url 变量（初始未赋值，后续用于存储链接网址等信息）；通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'text' 的元素存储在 text 变量中；通过 domUtils.findParentByTagName 函数（可能是自定义的根据标签名查找父元素的函数）查找选区共同祖先元素中最近的 'a' 标签元素（链接元素），并将结果存储在 rangeLink 变量中；声明 orgText 变量（初始未赋值，后续用于存储原始文本等相关信息）。
 
-    if(link){
+        link = domUtils.findParentByTagName(link, "a", true);
-        url = utils.html(link.getAttribute( '_href' ) || link.getAttribute( 'href', 2 ));
+        // 再次调用 domUtils.findParentByTagName 函数，对之前获取的 link 值（可能是元素或相关对象）进一步查找其最近的 'a' 标签父元素，更新 link 变量，确保获取到准确的链接元素（如果存在的话），用于后续对链接相关属性的操作。
 
-        if(rangeLink === link && !link.getElementsByTagName('img').length){
+        if (link) {
-            text.removeAttribute('disabled');
+            url = utils.html(link.getAttribute('_href') || link.getAttribute('href', 2));
-            orgText = text.value = link[browser.ie ? 'innerText':'textContent'];
+            // 如果找到了链接元素（link 存在），通过 utils.html 函数（可能是自定义的处理 HTML 相关属性值的函数）获取链接元素的 '_href' 属性值（可能是自定义属性用于存储链接网址等情况），如果不存在则获取 'href' 属性值（标准的链接网址属性），将获取到的值存储在 url 变量中，用于后续操作。
-        }else{
+
-            text.setAttribute('disabled','true');
+            if (rangeLink === link && !link.getElementsByTagName('img').length) {
-            text.value = lang.validLink;
+                text.removeAttribute('disabled');
-        }
+                orgText = text.value = link[browser.ie ? 'innerText' : 'textContent'];
+            } else {
+                text.setAttribute('disabled', 'true');
+                text.value = lang.validLink;
+            }
+            // 判断如果之前获取的 rangeLink（选区对应的链接元素）与当前的 link（找到的链接元素）是同一个，并且链接元素内部不包含图片元素（通过 getElementsByTagName 方法判断 'img' 元素数量为 0），则将页面中 id 为 'text' 的输入框元素的 'disabled' 属性移除（即启用该输入框），并将链接元素的文本内容（根据浏览器类型，通过 'innerText' 或 'textContent' 属性获取）赋值给输入框的 value 属性，同时存储该原始文本内容到 orgText 变量中；否则（不符合上述条件），将输入框设置为禁用状态，并设置其 value 属性为 lang.validLink（可能是通过语言包获取的提示文本，用于显示在输入框中表示当前链接相关的某种特定状态）。
 
-    }else{
+        } else {
-        if(range.collapsed){
+            if (range.collapsed) {
-            text.removeAttribute('disabled');
+                text.removeAttribute('disabled');
-            text.value = '';
+                text.value = '';
-        }else{
+            } else {
-            text.setAttribute('disabled','true');
+                text.setAttribute('disabled', 'true');
-            text.value = lang.validLink;
+                text.value = lang.validLink;
+            }
+            // 如果没有找到链接元素（link 不存在），再根据选区是否折叠进行不同操作。如果选区折叠，启用页面中 id 为 'text' 的输入框（移除 'disabled' 属性）并将其 value 属性设置为空字符串；如果选区未折叠，则禁用该输入框，并将其 value 属性设置为 lang.validLink（提示文本）。
         }
+        $G("title").value = url ? link.title : "";
+        $G("href").value = url ? url : '';
+        $G("target").checked = url && link.target == "_blank" ? true : false;
+        $focus($G("href"));
+        // 通过 $G 函数分别获取页面中 id 为 'title'、'href' 和 'target' 的元素，并根据前面获取到的 url 值以及链接元素（link）的相关属性进行赋值操作。如果 url 存在，将链接元素的 'title' 属性值赋给 id 为 'title' 的输入框的 value 属性，将 url 值赋给 id 为 'href' 的输入框的 value 属性；根据 url 是否存在以及链接元素的 'target' 属性是否为 '_blank' 来设置 id 为 'target' 的复选框的选中状态（checked 属性）；最后通过 $focus 函数（可能是自定义的设置焦点的函数）将焦点设置到 id 为 'href' 的输入框上，方便用户输入操作。
+
+        function handleDialogOk() {
+            var href = $G('href').value.replace(/^\s+|\s+$/g, '');
+            // 定义一个名为 'handleDialogOk' 的函数，在函数内部首先获取页面中 id 为 'href' 的输入框元素去除首尾空白字符后的文本值（通过正则表达式替换空白字符），存储在 href 变量中，用于后续对输入的网址进行合法性校验等操作。
+            if (href) {
+                if (!hrefStartWith(href, allowLinkProtocols)) {
+                    href = "http://" + href;
+                }
+                // 如果获取到的 href 值不为空，调用 hrefStartWith 函数（后续定义）判断输入的网址是否以允许的链接协议（allowLinkProtocols 中定义的协议）开头，如果不满足，则在网址前面拼接 'http://'，确保网址格式符合限定的协议要求。
+
+                var obj = {
+                    'href': href,
+                    'target': $G("target").checked ? "_blank" : '_self',
+                    'title': $G("title").value.replace(/^\s+|\s+$/g, ''),
+                    '_href': href
+                };
+                // 创建一个包含多个属性的对象 obj，用于存储链接相关的信息，其中 'href' 属性为经过处理后的网址，'target' 属性根据页面中 id 为 'target' 的复选框的选中状态来确定是 '_blank'（新窗口打开）还是 '_self'（在当前窗口打开），'title' 属性为去除首尾空白字符后的 id 为 'title' 的输入框的 value 值，'_href' 属性与 'href' 属性相同（可能用于特定的编辑器内部处理等情况）。
+
+                // 修改链接内容的情况太特殊了，所以先做到这里了
+                // todo:情况多的时候，做到command里
+                if (orgText && text.value != orgText) {
+                    link[browser.ie ? 'innerText' : 'textContent'] = obj.textValue = text.value;
+                    range.selectNode(link).select();
+                }
+                // 如果 orgText 存在（即之前有原始文本记录）并且页面中 id 为 'text' 的输入框当前值与原始文本不同，表示用户修改了链接的文本内容，根据浏览器类型（通过 browser.ie 判断是否为 IE 浏览器）将输入框的当前值设置为链接元素的文本内容（通过 'innerText' 或 'textContent' 属性），同时将输入框的值也赋给 obj 对象的 textValue 属性（可能用于后续统一传递数据等情况），然后通过选区范围（range）的 selectNode 和 select 方法重新选中该链接元素，使编辑后的链接文本在编辑器中处于选中状态，方便用户查看效果等。
 
-    }
+                if (range.collapsed) {
-    $G("title").value = url ? link.title : "";
+                    obj.textValue = text.value;
-    $G("href").value = url ? url: '';
+                }
-    $G("target").checked = url && link.target == "_blank" ? true :  false;
+                // 如果选区是折叠状态，将页面中 id 为 'text' 的输入框的值赋给 obj 对象的 textValue 属性，可能用于在这种特殊情况下也传递相关文本信息到后续操作中。
-    $focus($G("href"));
+
-
+                editor.execCommand('link', utils.clearEmptyAttrs(obj));
-    function handleDialogOk(){
+                dialog.close();
-        var href =$G('href').value.replace(/^\s+|\s+$/g, '');
+                // 通过编辑器的 execCommand 方法执行 'link' 命令（具体功能依赖编辑器对该命令的实现），并传入经过 utils.clearEmptyAttrs 函数（可能是自定义的清除对象空属性的函数）处理后的 obj 对象作为参数，用于根据用户输入和设置更新链接相关属性等操作，最后关闭对话框（dialog，可能是页面上弹出用于操作链接的对话框，具体关闭操作依赖 dialog 对象的实现），完成整个链接编辑操作流程。
-        if(href){
-            if(!hrefStartWith(href, allowLinkProtocols)) {
-                href  = "http://" + href;
             }
-            var obj = {
+        }
-                'href' : href,
+        dialog.onok = handleDialogOk;
-                'target' : $G("target").checked ? "_blank" : '_self',
+        // 将对话框（dialog）的 'onok' 事件（可能表示用户点击确定按钮的事件）绑定到 'handleDialogOk' 函数上，当用户在对话框中点击确定按钮时，就会执行 'handleDialogOk' 函数内的一系列操作，实现相应的链接编辑及保存等功能逻辑。
-                'title' : $G("title").value.replace(/^\s+|\s+$/g, ''),
+
-                '_href':href
+        $G('href').onkeydown = $G('title').onkeydown = function (evt) {
-            };
+            evt = evt || window.event;
-            //修改链接内容的情况太特殊了，所以先做到这里了
+            if (evt.keyCode == 13) {
-            //todo:情况多的时候，做到command里
+                handleDialogOk();
-            if(orgText && text.value != orgText){
+                return false;
-                link[browser.ie ? 'innerText' : 'textContent'] =  obj.textValue = text.value;
-                range.selectNode(link).select()
             }
-            if(range.collapsed){
+        };
-                obj.textValue = text.value;
+        // 同时为页面中 id 为 'href' 和 'title' 的输入框元素绑定 'onkeydown' 键盘按下事件监听器，当有键盘按键按下时，首先处理不同浏览器获取事件对象的兼容性问题（evt = evt || window.event，兼容 IE 和其他标准浏览器获取事件对象的方式），然后判断按下的按键的键码（keyCode）是否为 13（回车键的键码），如果是回车键按下，则调用 'handleDialogOk' 函数，实现用户在这两个输入框中按下回车键时等同于点击确定按钮的功能，方便用户操作，并且返回 false 阻止默认的回车键行为（比如表单提交等默认行为）。
+
+        $G('href').onblur = function () {
+            if (!hrefStartWith(this.value, allowLinkProtocols)) {
+                $G("msg").innerHTML = "<span style='color: red'>" + lang.httpPrompt + "</span>";
+            } else {
+                $G("msg").innerHTML = "";
             }
-            editor.execCommand('link',utils.clearEmptyAttrs(obj) );
+        };
-            dialog.close();
+        // 为页面中 id 为 'href' 的输入框元素绑定 'onblur' 失去焦点事件监听器，当输入框失去焦点时，调用 hrefStartWith 函数判断当前输入框的值（通过 this.value 获取）是否以允许的链接协议开头，如果不满足，则将页面中 id 为'msg' 的元素的 innerHTML 属性设置为一个包含红色字体提示文本（lang.httpPrompt，可能是通过语言包获取的提示网址格式错误等相关信息）的 span 元素代码，用于在页面上显示错误提示；如果满足协议要求，则清空'msg' 元素的 innerHTML，即清除提示信息。
-        }
-    }
-    dialog.onok = handleDialogOk;
-    $G('href').onkeydown = $G('title').onkeydown = function(evt){
-        evt = evt || window.event;
-        if (evt.keyCode == 13) {
-            handleDialogOk();
-            return false;
-        }
-    };
-    $G('href').onblur = function(){
-        if(!hrefStartWith(this.value, allowLinkProtocols)){
-            $G("msg").innerHTML = "<span style='color: red'>"+lang.httpPrompt+"</span>";
-        }else{
-            $G("msg").innerHTML = "";
-        }
-    };
 
-    function hrefStartWith(href,arr){
+        function hrefStartWith(href, arr) {
-        href = href.replace(/^\s+|\s+$/g, '');
+            href = href.replace(/^\s+|\s+$/g, '');
-        for(var i=0,ai;ai=arr[i++];){
+            for (var i = 0, ai; ai = arr[i++];) {
-            if(href.indexOf(ai)==0){
+                if (href.indexOf(ai) == 0) {
-                return true;
+                    return true;
+                }
             }
+            return false;
         }
-        return false;
+        // 定义一个名为 'hrefStartWith' 的函数，用于判断输入的网址（href 参数）是否以给定数组（arr 参数，可能是允许的链接协议数组）中的某个协议开头。函数内部首先去除网址的首尾空白字符，然后循环遍历数组中的每个协议元素，通过 indexOf 方法判断网址是否以该协议开头，如果找到匹配的协议开头则返回 true，循环结束后都未找到匹配则返回 false，用于网址合法性校验相关操作，判断网址格式是否符合限定的协议要求。
-    }
+    </script>
-
 
-</script>
+    </script>
 </body>
 </html>

public2/ueditor/dialogs/map/map.html

@@ -2,133 +2,193 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
     <title></title>
+    <!-- 此处页面标题为空，通常可以设置一个有意义的标题，使其显示在浏览器的标题栏中 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中会用到的自定义函数、变量以及一些通用的业务逻辑等代码，具体功能依赖其内部定义 -->
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
+    <!-- 引入百度地图 API 的 JavaScript 文件，通过指定的版本号（v=1.1）和启用相关服务（services=true）来加载百度地图相关功能，后续可基于此 API 进行地图的展示、操作等功能开发 -->
     <style type="text/css">
-        .content{width:530px; height: 350px;margin: 10px auto;}
+        .content {
-        .content table{width: 100%}
+            width: 530px;
-        .content table td{vertical-align: middle;}
+            height: 350px;
-        #city,#address{height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}
+            margin: 10px auto;
-        #city{width:60px}
+        }
-        #address{width:130px}
+            /* 定义类名为 'content' 的元素样式，设置宽度为 530 像素，高度为 350 像素，外边距上下为 10 像素，左右自动（auto）居中，用于控制包含地图相关元素的容器的整体尺寸和在页面中的位置布局 */
-        #is_dynamic_label span{vertical-align:middle;margin: 3px 0px 3px 3px;}
+            .content table {
-        #is_dynamic_label input{vertical-align:middle;margin: 3px 3px 3px 50px;}
+                width: 100%;
+            }
+                /* 针对类名为 'content' 内部的 table 元素，设置宽度为 100%，使其能占满父元素（.content 元素）的宽度，用于表格布局能自适应容器宽度 */
+                .content table td {
+                    vertical-align: middle;
+                }
+        /* 定义类名为 'content' 内部的 table 表格中 td 单元格的样式，设置垂直对齐方式为居中（vertical-align: middle），使单元格内的内容在垂直方向上居中显示，提升布局美观度 */
+        #city, #address {
+            height: 21px;
+            background: #FFF;
+            border: 1px solid #d7d7d7;
+            line-height: 21px;
+        }
+        /* 同时为 id 为 'city' 和 'address' 的元素设置样式，设置高度为 21 像素，背景颜色为白色（#FFF），边框为 1 像素宽的浅灰色（#d7d7d7）实线，行高与高度相同（使文本垂直居中），这两个元素可能是用于输入城市和地址信息的输入框，通过统一的样式设置呈现相似的外观风格 */
+        #city {
+            width: 60px;
+        }
+        /* 单独为 id 为 'city' 的元素设置宽度为 60 像素，用于控制输入城市信息的输入框宽度，使其在表格中占据合适的宽度空间 */
+        #address {
+            width: 130px;
+        }
+        /* 单独为 id 为 'address' 的元素设置宽度为 130 像素，用于控制输入地址信息的输入框宽度，与其他输入框等元素一起合理布局在表格内 */
+        #is_dynamic_label span {
+            vertical-align: middle;
+            margin: 3px 0px 3px 3px;
+        }
+        /* 定义 id 为 'is_dynamic_label' 内部的 span 元素样式，设置垂直对齐方式为居中（vertical-align: middle），并设置上下外边距为 3 像素，左边距为 3 像素，用于控制该 span 元素内文本等内容在垂直方向上居中且与周围元素有合适的间隔距离 */
+        #is_dynamic_label input {
+            vertical-align: middle;
+            margin: 3px 3px 3px 50px;
+        }
+        /* 定义 id 为 'is_dynamic_label' 内部的 input 元素（可能是复选框等输入类型）样式，同样设置垂直对齐方式为居中，上下外边距为 3 像素，左边距为 50 像素，使其在布局上与其他相关元素合理排列且垂直居中显示 */
     </style>
 </head>
 <body>
-<div class="content">
+    <div class="content">
-    <table>
+        <!-- 创建一个类名为 'content' 的 div 容器，其样式按照上面定义的 '.content' 规则进行呈现，作为地图相关功能元素的整体包裹容器，便于对内部元素进行统一的布局管理 -->
-        <tr>
+        <table>
-            <td><var id="lang_city"></var>:</td>
+            <!-- 在 '.content' 容器内创建一个表格元素，用于以表格形式布局地图搜索相关的输入框、按钮以及复选框等元素 -->
-            <td><input id="city" type="text" /></td>
+            <tr>
-            <td><var id="lang_address"></var>:</td>
+                <td><var id="lang_city"></var>:</td>
-            <td><input id="address" type="text" value="" /></td>
+                <td><input id="city" type="text" /></td>
-            <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td>
+                <td><var id="lang_address"></var>:</td>
-            <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td>
+                <td><input id="address" type="text" value="" /></td>
-        </tr>
+                <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td>
-    </table>
+                <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td>
-    <div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div>
+            </tr>
+            <!-- 创建表格的一行（tr），该行包含六个单元格（td），具体如下：
+                - 第一个单元格放置一个带有特定 id 的 var 元素，其文本内容可能通过 JavaScript 动态设置，从 id 推测大概是用于显示与城市相关的提示文本（如“城市：”之类）。
+                - 第二个单元格放置一个 id 为 'city' 的文本输入框元素，用于用户输入城市信息。
+                - 第三个单元格放置一个带有特定 id 的 var 元素，文本用于显示与地址相关的提示文本（如“地址：”之类）。
+                - 第四个单元格放置一个 id 为 'address' 的文本输入框元素，用于用户输入地址信息，初始值为空字符串。
+                - 第五个单元格放置一个 a 元素，通过设置 href 属性为 "javascript:doSearch()" 将点击事件绑定到名为 'doSearch' 的 JavaScript 函数上，点击该链接可触发地图搜索操作，同时该 a 元素添加了 'button' 类名（样式可能在其他地方定义或者后续通过 JavaScript 操作改变外观等），内部嵌套一个带有特定 id 的 var 元素，文本用于显示与搜索相关的按钮文本（如“搜索”之类）。
+                - 第六个单元格放置一个 label 元素，通过 'for' 属性关联到后面 id 为 'is_dynamic' 的复选框元素，label 内部包含一个复选框（type="checkbox"，name="is_dynamic"，id="is_dynamic"）用于用户勾选相关选项（可能与地图是否动态显示等相关），以及一个带有特定 id 的 span 元素，其文本通过 JavaScript 动态设置，大概用于显示与动态地图相关的提示文本。
+            -->
+        </table>
+        <div style="width: 100%; height: 340px; margin: 5px auto; border: 1px solid gray" id="container"></div>
+        <!-- 创建一个 div 元素，通过内联样式设置宽度为 100%（占满父元素宽度），高度为 340 像素，外边距上下为 5 像素且左右自动（auto）居中，边框为 1 像素宽的灰色实线，id 为 'container'，该元素作为百度地图显示的容器，后续会通过 JavaScript 代码将地图实例渲染到这个元素内 -->
+    </div>
+    <script type="text/javascript">
+        var map = new BMap.Map("container"), marker, point, styleStr;
+        // 创建一个百度地图实例（BMap.Map），将其关联到页面中 id 为 'container' 的元素上，也就是把地图渲染到该指定的 DOM 元素内，同时声明变量 marker（后续用于表示地图上的标记点对象）、point（用于表示坐标点对象）和 styleStr（用于存储样式相关的字符串，可能与地图显示样式等有关，后续会根据情况赋值和使用），初始值都为 undefined，它们会在后续的地图操作逻辑中进行相应的赋值和处理。
+        map.enableScrollWheelZoom();
+        map.enableContinuousZoom();
+        // 启用百度地图的鼠标滚轮缩放功能（enableScrollWheelZoom），使用户可以通过滚动鼠标滚轮来放大或缩小地图；同时启用连续缩放功能（enableContinuousZoom），让地图缩放操作更加流畅，提升用户交互体验。
 
-</div>
+        function doSearch() {
-<script type="text/javascript">
+            if (!document.getElementById('city').value) {
-    var map = new BMap.Map("container"),marker,point,styleStr;
+                alert(lang.cityMsg);
-    map.enableScrollWheelZoom();
+                return;
-    map.enableContinuousZoom();
+            }
-    function doSearch(){
+            // 定义一个名为 'doSearch' 的函数，用于执行地图搜索操作。在函数内部首先通过 document.getElementById 方法获取页面中 id 为 'city' 的输入框元素，并判断其 value 属性（即用户输入的值）是否为空，如果为空，表示用户没有输入城市信息，则弹出一个提示框（alert），提示内容为 lang.cityMsg（可能是通过语言包获取的提示用户输入城市信息的文本，具体依赖代码中 lang 对象的定义），然后直接返回，阻止后续搜索操作执行，起到输入合法性校验的作用。
-        if (!document.getElementById('city').value) {
+
-            alert(lang.cityMsg);
+            var search = new BMap.LocalSearch(document.getElementById('city').value, {
-            return;
+                onSearchComplete: function (results) {
-        }
+                    if (results && results.getNumPois()) {
-        var search = new BMap.LocalSearch(document.getElementById('city').value, {
+                        var points = [];
-            onSearchComplete: function (results){
+                        for (var i = 0; i < results.getCurrentNumPois(); i++) {
-                if (results && results.getNumPois()) {
+                            points.push(results.getPoi(i).point);
-                    var points = [];
+                        }
-                    for (var i=0; i<results.getCurrentNumPois(); i++) {
+                        if (points.length > 1) {
-                        points.push(results.getPoi(i).point);
+                            map.setViewport(points);
-                    }
+                        } else {
-                    if (points.length > 1) {
+                            map.centerAndZoom(points[0], 13);
-                        map.setViewport(points);
+                        }
+                        point = map.getCenter();
+                        marker.setPoint(point);
                     } else {
-                        map.centerAndZoom(points[0], 13);
+                        alert(lang.errorMsg);
                     }
-                    point = map.getCenter();
+                }
-                    marker.setPoint(point);
+            });
+            // 创建一个百度地图本地搜索实例（BMap.LocalSearch），传入用户在页面中输入的城市信息（通过 document.getElementById('city').value 获取）作为搜索范围限定，同时传入一个配置对象，在配置对象中定义了 'onSearchComplete' 回调函数，当搜索操作完成后会触发该回调函数。在回调函数内部，首先判断搜索结果（results）是否存在并且搜索到的兴趣点（pois，通过 getNumPois 方法判断数量是否大于 0），如果满足条件，循环遍历搜索到的当前兴趣点数量（results.getCurrentNumPois()），将每个兴趣点对应的坐标点（通过 getPoi(i).point 获取）添加到 points 数组中。然后根据 points 数组的长度进行不同操作，如果数组长度大于 1，表示搜索到多个坐标点，则通过 map.setViewport 方法将地图视野设置为包含所有这些坐标点；如果数组长度为 1，则通过 map.centerAndZoom 方法将地图中心定位到这个唯一的坐标点上，并设置地图缩放级别为 13。最后将地图当前的中心坐标点赋值给 point 变量，并通过 marker.setPoint 方法将地图标记（marker）设置到该坐标点上，用于在地图上显示标记位置。如果搜索结果不满足上述条件（没有搜索到有效的兴趣点），则弹出一个提示框（alert），提示内容为 lang.errorMsg（可能是通过语言包获取的提示搜索出错的文本）。
+
+            search.search(document.getElementById('address').value || document.getElementById('city').value);
+            // 调用刚才创建的百度地图本地搜索实例（search）的 search 方法，传入用户在页面中输入的地址信息（通过 document.getElementById('address').value 获取），如果地址信息为空，则传入城市信息（通过 document.getElementById('city').value 获取）作为搜索关键词，触发实际的地图搜索操作，查找与输入的地址或城市相关的地理位置信息。
+        }
+
+        // 获得参数
+        function getPars(str, par) {
+            var reg = new RegExp(par + "=((\\d+|[.,])*)", "g");
+            return reg.exec(str)[1];
+        }
+        // 定义一个名为 'getPars' 的函数，用于从给定的字符串（str 参数）中提取指定参数（par 参数）对应的值。函数内部通过创建一个正则表达式对象（RegExp），匹配以指定参数名开头，后面跟着等号以及由数字、小数点或逗号组成的参数值的字符串模式，然后通过 exec 方法执行正则表达式匹配，并返回匹配结果数组中的第二个元素（索引为 1），即提取到的参数值，用于后续解析地图相关 URL 等字符串中特定参数值的操作。
+
+        function init() {
+            var mapNode = editor.selection.getRange().getClosedNode(),
+                isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),
+                isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');
+            // 定义一个名为 'init' 的函数，在函数内部首先获取编辑器（editor，可能是富文本编辑器对象，具体依赖代码上下文环境）当前选区范围（editor.selection.getRange()）内的闭合节点（getClosedNode()），存储在 mapNode 变量中，该节点可能与地图元素相关（比如地图图片或者包含地图的 iframe 等形式）。然后通过正则表达式判断该节点的'src' 属性值（如果存在）是否包含百度地图 API 的域名（通过 /api[.]map[.]baidu[.]com/ig.test 进行测试），如果满足则将 isMapImg 变量设置为 true，表示当前选区对应的是地图图片元素；同时通过 domUtils.hasClass 函数（可能是自定义的判断元素是否包含特定类名的函数）判断 mapNode 元素是否包含 'ueditor_baidumap' 类名，如果包含则将 isMapIframe 变量设置为 true，表示当前选区对应的是特定类名的 iframe 元素（可能用于嵌入动态地图等情况），这两个变量用于后续根据不同的地图元素类型进行相应的初始化操作判断。
+
+            if (isMapImg || isMapIframe) {
+                var url, centerPos, markerPos;
+                if (isMapIframe) {
+                    url = decodeURIComponent(mapNode.getAttribute("src"));
+                    $G('is_dynamic').checked = true;
+                    styleStr = mapNode.style.cssText;
                 } else {
-                    alert(lang.errorMsg);
+                    url = mapNode.getAttribute("src");
+                    styleStr = mapNode.style.cssText;
                 }
-            }
+                // 如果 isMapImg 或者 isMapIframe 为 true，表示当前选区存在与地图相关的元素（图片或 iframe），声明变量 url（用于存储地图元素对应的 URL 地址）、centerPos（用于存储地图中心坐标相关信息）和 markerPos（用于存储地图标记坐标相关信息）。然后根据是否是 iframe 元素进行不同的赋值操作，如果是 iframe 元素（isMapIframe 为 true），先对其'src' 属性值进行 URL 解码（通过 decodeURIComponent 方法）后赋值给 url 变量，将页面中 id 为 'is_dynamic' 的复选框元素设置为选中状态（checked 属性设置为 true，可能表示该地图是动态地图等相关业务逻辑），并将 iframe 元素的样式文本（通过 style.cssText 获取）赋值给 styleStr 变量；如果不是 iframe 元素（即图片元素情况），则直接将其'src' 属性值赋值给 url 变量，并同样将元素的样式文本赋值给 styleStr 变量，用于后续提取地图相关参数以及还原地图样式等操作。
-        });
+
-        search.search(document.getElementById('address').value || document.getElementById('city').value);
+                centerPos = getPars(url, "center").split(",");
-    }
+                markerPos = getPars(url, "markers").split(",");
-    //获得参数
+                point = new BMap.Point(Number(centerPos[0]), Number(centerPos[1]));
-    function getPars(str,par){
+                marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
-        var reg = new RegExp(par+"=((\\d+|[.,])*)","g");
+                map.addControl(new BMap.NavigationControl());
-        return reg.exec(str)[1];
+                map.centerAndZoom(point, Number(getPars(url, "zoom")));
-    }
+                // 通过之前定义的 'getPars' 函数从 url 中分别提取 'center'（地图中心坐标）和'markers'（地图标记坐标）参数对应的值，并通过逗号分割字符串后存储到 centerPos 和 markerPos 数组中，然后将解析后的中心坐标值创建为百度地图的坐标点对象（通过 BMap.Point 构造函数）赋值给 point 变量，同样将解析后的标记坐标值创建为坐标点对象后用于创建地图标记（通过 BMap.Marker 构造函数创建 marker 对象），接着通过 map.addControl 方法向地图添加导航控件（NavigationControl，方便用户在地图上进行缩放、平移等操作），最后通过 map.centerAndZoom 方法根据解析出的坐标点（point）和缩放级别（通过 getPars 函数从 url 中提取 'zoom' 参数值并转换为数字类型）来初始化地图的显示位置和缩放级别，将地图显示到合适的状态。
-    function init(){
-        var mapNode = editor.selection.getRange().getClosedNode(),
-            isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute("src")),
-            isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');
-        if(isMapImg || isMapIframe){
-            var url, centerPos, markerPos;
-            if(isMapIframe) {
-                url = decodeURIComponent(mapNode.getAttribute("src"));
-                $G('is_dynamic').checked = true;
-                styleStr = mapNode.style.cssText;
             } else {
-                url = mapNode.getAttribute("src");
+                point = new BMap.Point(116.404, 39.915);    // 创建点坐标
-                styleStr = mapNode.style.cssText;
+                marker = new BMap.Marker(point);
+                map.addControl(new BMap.NavigationControl());
+                map.centerAndZoom(point, 10);                       // 初始化地图,设置中心点坐标和地图级别。
             }
-
+            marker.enableDragging();
-            centerPos = getPars(url,"center").split(",");
+            map.addOverlay(marker);
-            markerPos = getPars(url, "markers").split(",");
-            point = new BMap.Point(Number(centerPos[0]),Number(centerPos[1]));
-            marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
-            map.addControl(new BMap.NavigationControl());
-            map.centerAndZoom(point, Number(getPars(url,"zoom")));
-        }else{
-            point = new BMap.Point(116.404, 39.915);    // 创建点坐标
-            marker = new BMap.Marker(point);
-            map.addControl(new BMap.NavigationControl());
-            map.centerAndZoom(point, 10);                     // 初始化地图,设置中心点坐标和地图级别。
-        }
-        marker.enableDragging();
-        map.addOverlay(marker);
-    }
-    init();
-    document.getElementById('address').onkeydown = function (evt){
-        evt = evt || event;
-        if (evt.keyCode == 13) {
-            doSearch();
         }
-    };
+        init();
-    dialog.onok = function (){
+        document.getElementById('address').onkeydown = function (evt) {
-        var center = map.getCenter();
+            evt = evt || event;
-        var zoom = map.zoomLevel;
+            if (evt.keyCode == 13) {
-        var size = map.getSize();
+                doSearch();
-        var mapWidth = size.width;
+            }
-        var mapHeight = size.height;
+        };
-        var point = marker.getPoint();
+        dialog.onok = function () {
+            var center = map.getCenter();
+            var zoom = map.zoomLevel;
+            var size = map.getSize();
+            var mapWidth = size.width;
+            var mapHeight = size.height;
+            var point = marker.getPoint();
 
-        if($G('is_dynamic').checked) {
+            if ($G('is_dynamic').checked) {
-            var URL = editor.options.UEDITOR_HOME_URL,
+                var URL = editor.options.UEDITOR_HOME_URL,
-                url = [URL + (/\/$/.test(URL) ? '':'/') + "dialogs/map/show.html" +
+                    url = [URL + (/\/$/.test(URL) ? '' : '/') + "dialogs/map/show.html" +
-                    '#center=' + center.lng + ',' + center.lat,
+                        '#center=' + center.lng + ',' + center.lat,
                     '&zoom=' + zoom,
                     '&width=' + mapWidth,
                     '&height=' + mapHeight,
                     '&markers=' + point.lng + ',' + point.lat,
                     '&markerStyles=' + 'l,A'].join('');
-            editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + ' frameborder="0" width="' + (mapWidth+4) + '" height="' + (mapHeight+4) + '"></iframe>');
+                editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' : '') + ' frameborder="0" width="' + (mapWidth + 4) + '" height="' + (mapHeight + 4) + '"></iframe>');
-        } else {
+            } else {
-            var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
+                var url = "http://api.map.baidu.com/staticimage?center=" + center.lng + ',' + center.lat +
                     "&zoom=" + zoom + "&width=" + size.width + '&height=' + size.height + "&markers=" + point.lng + ',' + point.lat;
-            editor.execCommand('inserthtml', '<img width="'+ size.width +'"height="'+ size.height +'" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' :'') + '/>');
+                editor.execCommand('inserthtml', '<img width="' + size.width + '"height="' + size.height + '" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' : '') + '/>');
-        }
+            }
-    };
+        };
-    document.getElementById("address").focus();
+        document.getElementById("address").focus();
-</script>
+    </script>
 
 
 </body>

public2/ueditor/dialogs/map/show.html

@@ -1,11 +1,15 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
-    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/>
+    <!-- 设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括不同语言文字以及特殊符号等 -->
-    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/>
+    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
+    <!-- 设置页面的关键词（keywords）元数据，用于搜索引擎优化（SEO），当用户在搜索引擎中搜索这些关键词时，有助于本页面被搜索到，这里列举了与百度地图及相关功能的一些关键词 -->
+    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
+    <!-- 设置页面的描述（description）元数据，同样用于 SEO，简要介绍了页面的主要功能是利用百度地图 API 来实现自定义地图，方便用户通过可视化方式生成地图 -->
     <title>百度地图API自定义地图</title>
+    <!-- 设置页面的标题，会显示在浏览器的标题栏中，清晰表明了页面是用于百度地图 API 自定义地图相关操作的 -->
     <!--引用百度地图API-->
     <style type="text/css">
         html, body {
@@ -13,25 +17,34 @@
             padding: 0;
             overflow: hidden;
         }
+        /* 对 html 和 body 元素设置样式，将外边距（margin）和内边距（padding）都设置为 0，去除默认的空白间隔，使页面布局从最外层开始更紧凑；同时将溢出（overflow）属性设置为 'hidden'，意味着超出页面可视范围的内容将被隐藏，常用于避免出现滚动条或者控制元素显示范围等情况，这里可能是为了让地图在特定容器内更好地展示，避免出现不必要的滚动条等布局问题 */
     </style>
     <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
+    <!-- 引入百度地图 API 的 JavaScript 文件，通过指定的版本号（v=1.1）以及启用相关服务（services=true）来加载百度地图功能相关的代码库，后续可以基于这个 API 进行地图的创建、操作以及各种交互功能的实现，不过这里 'key' 的值为空，实际应用中可能需要填入合法的 API 密钥来使用完整功能 -->
 </head>
 
 <body onload="initMap();">
-<!--百度地图容器-->
+    <!-- 为 body 元素绑定 onload 事件，当页面加载完成时，会自动执行名为 'initMap' 的 JavaScript 函数，该函数用于初始化地图相关的各种设置和操作，实现地图在页面上的加载与展示 -->
-<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
+    <!--百度地图容器-->
+    <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
+    <!-- 创建一个 div 元素，通过内联样式设置其宽度为 697 像素，高度为 550 像素，边框为 1 像素宽的浅灰色（#ccc）实线，并且赋予其 'dituContent' 的 id，这个 div 元素作为百度地图展示的容器，后续 JavaScript 代码会将创建的地图实例渲染到这个元素内部 -->
 </body>
 <script type="text/javascript">
     function getParam(name) {
         return location.href.match(new RegExp('[?#&]' + name + '=([^?#&]+)', 'i')) ? RegExp.$1 : '';
     }
+    // 定义一个名为 'getParam' 的函数，用于从当前页面的 URL 地址（location.href）中获取指定参数的值。函数内部通过创建一个正则表达式对象（RegExp），该正则表达式用于匹配 URL 中以 '?'、'#' 或 '&' 开头，紧接着是要查找的参数名（name 参数传入），然后是等号以及参数值（由非 '?'、'#' 和 '&' 组成的字符串）的模式，并且不区分大小写（'i' 修饰符）。接着使用 match 方法在 URL 中进行匹配，如果匹配成功，返回的结果数组中第一个元素（索引为 0）是完整匹配的字符串，第二个元素（索引为 1）就是提取到的参数值，通过返回 RegExp.$1 来获取该参数值；如果匹配失败，则返回空字符串，这样就可以方便地从 URL 中提取诸如地图的中心坐标、缩放级别等各种参数信息，用于后续地图初始化等操作。
+
     var map, marker;
+    // 声明两个变量，map 用于存储后续创建的百度地图实例对象，marker 用于存储地图上的标注（比如标记点等）对象，初始值都为 undefined，会在后续相应的函数中进行实例化和赋值操作。
+
     var centerParam = getParam('center');
     var zoomParam = getParam('zoom');
     var widthParam = getParam('width');
     var heightParam = getParam('height');
     var markersParam = getParam('markers');
     var markerStylesParam = getParam('markerStyles');
+    // 通过调用 'getParam' 函数，分别从页面 URL 中获取与地图相关的不同参数值，如 'center' 参数可能表示地图的中心坐标，'zoom' 参数表示地图的缩放级别，'width' 和 'height' 参数可能用于设置地图容器（或相关元素）的尺寸，'markers' 参数可能涉及地图标记点的坐标等信息，'markerStyles' 参数也许与标记点的样式相关，将这些获取到的参数值存储在对应的变量中，方便后续在地图初始化及操作过程中使用。
 
     //创建和初始化地图函数：
     function initMap() {
@@ -39,13 +52,17 @@
         if (!window.BMap) {
             return;
         }
+        // 首先判断 window 对象下是否存在 BMap（百度地图 API 的核心对象，用于创建地图等操作），如果不存在（可能是某些特定浏览器模式切换等情况导致未正确加载百度地图 API），则直接从函数中返回，不执行后续的地图初始化操作，避免出现 JavaScript 报错。
+
         var dituContent = document.getElementById('dituContent');
         dituContent.style.width = widthParam + 'px';
         dituContent.style.height = heightParam + 'px';
+        // 通过 document.getElementById 方法获取页面中 id 为 'dituContent' 的元素（也就是之前定义的地图容器 div 元素），然后根据从 URL 中获取到的 'widthParam' 和 'heightParam' 参数值，分别设置该元素的宽度和高度样式属性，动态调整地图容器的尺寸，使其符合传入的参数要求，以更好地展示地图。
 
         createMap();//创建地图
         setMapEvent();//设置地图事件
         addMapControl();//向地图添加控件
+        // 依次调用三个函数，分别用于创建地图实例、设置地图相关的交互事件以及向地图添加各种操作控件，这三个函数各自承担一部分地图初始化的功能，共同完成地图在页面上的完整初始化设置，使其具备基本的显示和交互功能。
 
         // 创建标注
         var markersArr = markersParam.split(',');
@@ -53,10 +70,13 @@
         marker = new BMap.Marker(point);
         marker.enableDragging();
         map.addOverlay(marker); // 将标注添加到地图中
+        // 首先将从 URL 中获取到的'markersParam' 参数值（代表标记点坐标信息的字符串）通过逗号进行分割，得到一个包含坐标值的数组（markersArr），然后使用数组中的前两个元素（坐标的横纵坐标值）创建一个百度地图的坐标点对象（通过 BMap.Point 构造函数）。接着使用这个坐标点对象创建一个地图标记（marker）对象（通过 BMap.Marker 构造函数），并启用该标记的拖拽功能（enableDragging 方法），最后将这个标记对象添加到地图实例（map）中，这样在地图上就可以显示出对应的标记点，并且用户可以通过鼠标拖动该标记点来改变其位置。
 
-        if(parent.editor && parent.document.body.contentEditable=="true") { //在编辑状态下
+        if (parent.editor && parent.document.body.contentEditable == "true") { //在编辑状态下
             setMapListener();//地图改变修改外层的iframe标签src属性
         }
+        // 判断父页面（parent）中是否存在编辑器（editor）对象，并且父页面的 document.body 的 contentEditable 属性是否为 "true"（表示内容可编辑状态），如果满足这两个条件，说明处于某种编辑场景下，此时调用'setMapListener' 函数，用于在地图发生变化（如移动、缩放、标记点拖动等情况）时，相应地修改外层的 iframe 标签的 src 属性，实现与外部编辑器等相关元素的交互联动，实时更新地图相关信息。
+
     }
 
     //创建地图函数：
@@ -65,6 +85,7 @@
         var centerArr = centerParam.split(',');
         var point = new BMap.Point(parseFloat(centerArr[0]), parseFloat(centerArr[1]));//定义一个中心点坐标
         map.centerAndZoom(point, parseInt(zoomParam));//设定地图的中心点和坐标并将地图显示在地图容器中
+        // 在名为 'createMap' 的函数内，首先通过 BMap.Map 构造函数创建一个百度地图实例，并将其关联到页面中 id 为 'dituContent' 的元素上，也就是把地图渲染到之前定义的地图容器 div 元素内，存储这个地图实例到 map 变量中。接着将从 URL 中获取到的 'centerParam' 参数值（代表地图中心坐标信息的字符串）通过逗号进行分割，得到坐标值数组（centerArr），然后将数组中的坐标值转换为数字类型（通过 parseFloat 函数）后创建一个百度地图的坐标点对象（point），该坐标点就是地图的中心点。最后通过 map.centerAndZoom 方法，传入这个中心点坐标对象以及从 URL 中获取并转换为整数类型（通过 parseInt 函数）的缩放级别参数（zoomParam），实现设定地图的中心位置和缩放级别，使地图能够按照指定的参数显示在地图容器中，完成地图的基本创建和定位操作。
     }
 
     //地图事件设置函数：
@@ -73,35 +94,46 @@
         map.enableScrollWheelZoom();//启用地图滚轮放大缩小
         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
         map.enableKeyboard();//启用键盘上下左右键移动地图
+        // 在'setMapEvent' 函数内，通过调用百度地图实例（map）的相关方法，启用地图的各种交互事件功能。'enableDragging' 方法启用地图的拖拽功能，允许用户通过鼠标拖动地图来改变显示区域；'enableScrollWheelZoom' 方法启用地图的滚轮缩放功能，用户可以通过滚动鼠标滚轮来放大或缩小地图；'enableDoubleClickZoom' 方法启用鼠标双击放大功能，使用户双击地图时能够放大地图查看细节（该功能默认是启用的，这里写上代码更明确表示启用此功能）；'enableKeyboard' 方法启用键盘控制功能，使得用户可以通过键盘的上下左右键来移动地图，增强地图的交互性和操作便捷性。
     }
 
     //地图控件添加函数：
     function addMapControl() {
         //向地图中添加缩放控件
-        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
+        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
         map.addControl(ctrl_nav);
+        // 首先创建一个百度地图的导航控件（NavigationControl）对象，通过传入配置对象来指定控件的一些属性，比如 'anchor' 属性设置控件在地图上的固定位置为左上角（BMAP_ANCHOR_TOP_LEFT），'type' 属性设置为大尺寸的导航控件（BMAP_NAVIGATION_CONTROL_LARGE），然后将这个创建好的导航控件添加到地图实例（map）中，方便用户通过该控件进行地图的缩放、平移等操作，提升地图使用的便捷性。
+
         //向地图中添加缩略图控件
-        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
+        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
         map.addControl(ctrl_ove);
+        // 创建一个百度地图的缩略图控件（OverviewMapControl）对象，配置其固定位置为右下角（BMAP_ANCHOR_BOTTOM_RIGHT），并将 'isOpen' 属性设置为 1，表示初始状态下缩略图控件是展开显示的，接着将该缩略图控件添加到地图实例中，使用户可以通过缩略图快速浏览地图的全貌以及定位到感兴趣的区域。
+
         //向地图中添加比例尺控件
-        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
+        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
         map.addControl(ctrl_sca);
+        // 创建一个百度地图的比例尺控件（ScaleControl）对象，设置其固定位置为左下角（BMAP_ANCHOR_BOTTOM_LEFT），然后将该比例尺控件添加到地图实例中，方便用户直观地查看地图的比例尺信息，了解地图上距离与实际距离的比例关系。
     }
 
     function setMapListener() {
         var editor = parent.editor, containerIframe,
             iframes = parent.document.getElementsByTagName('iframe');
+        // 在'setMapListener' 函数内，首先获取父页面（parent）中的编辑器（editor）对象（如果存在的话），声明一个变量 'containerIframe'（初始值为 undefined，用于后续存储特定的 iframe 元素），然后通过 getElementsByTagName 方法获取父页面中所有的 iframe 元素，存储在 'iframes' 数组中，这些操作都是为了后续查找与地图相关联的特定 iframe 元素以及和编辑器进行交互做准备。
+
         for (var key in iframes) {
             if (iframes[key].contentWindow == window) {
                 containerIframe = iframes[key];
                 break;
             }
         }
+        // 循环遍历获取到的所有 iframe 元素数组（iframes），通过比较每个 iframe 元素的 contentWindow 属性（代表该 iframe 内部的窗口对象）是否与当前窗口（window）相等，来查找出当前地图所在的那个 iframe 元素（也就是包含地图的外层 iframe），找到后将其赋值给 'containerIframe' 变量，用于后续操作。
+
         if (containerIframe) {
             map.addEventListener('moveend', mapListenerHandler);
             map.addEventListener('zoomend', mapListenerHandler);
             marker.addEventListener('dragend', mapListenerHandler);
         }
+        // 如果找到了对应的 'containerIframe' 元素，说明处于合适的编辑场景且找到了关联的 iframe，此时为地图实例（map）添加'moveend' 事件监听器（当地图移动结束时触发）、'zoomend' 事件监听器（当地图缩放操作结束时触发），以及为地图标记（marker）添加 'dragend' 事件监听器（当标记点拖动结束时触发），并且这些事件触发时都会执行'mapListenerHandler' 函数，用于在这些地图相关操作结束后进行相应的处理，比如更新 iframe 的 src 属性等操作，实现地图状态变化与外部编辑器的联动。
 
         function mapListenerHandler() {
             var zoom = map.getZoom(),
@@ -109,9 +141,10 @@
                 marker = window.marker.getPoint();
             containerIframe.src = containerIframe.src.
                 replace(new RegExp('([?#&])center=([^?#&]+)', 'i'), '$1center=' + center.lng + ',' + center.lat).
-                replace(new RegExp('([?#&])markers=([^?#&]+)', 'i'), '$1markers=' + marker.lng + ',' + marker.lat).
+                replace(new RegExp('([?#&])markers=([^?&]+)', 'i'), '$1markers=' + marker.lng + ',' + marker.lat).
-                replace(new RegExp('([?#&])zoom=([^?#&]+)', 'i'), '$1zoom=' + zoom);
+                replace(new RegExp('([?#&])zoom=([^?&]+)', 'i'), '$1zoom=' + zoom);
             editor.fireEvent('saveScene');
+            // 在'mapListenerHandler' 函数内，首先获取当前地图的缩放级别（通过 map.getZoom() 方法）存储在 'zoom' 变量中，获取地图的中心坐标（通过 map.getCenter() 方法）存储在 'center' 变量中，获取地图标记点的坐标（通过 window.marker.getPoint() 方法）存储在'marker' 变量中。然后通过字符串替换操作，使用正则表达式在 'containerIframe'（之前找到的包含地图的 iframe 元素）的 src 属性值中查找并替换与地图中心坐标、标记点坐标以及缩放级别相关的参数值，使其更新为当前地图的最新状态对应的参数值，从而实现外部编辑器中地图显示的实时更新。最后通过编辑器（editor）的 'fireEvent' 方法触发'saveScene' 事件（具体功能依赖编辑器的实现，可能用于保存地图相关场景状态等操作），完成整个地图状态变化后的联动处理流程。
         }
     }
 </script>

public2/ueditor/dialogs/music/music.css

@@ -1,30 +1,190 @@
-.wrapper{margin: 5px 10px;}
+/* 定义类名为.wrapper 的元素样式 */
+.wrapper{
+    margin: 5px 10px;
+    /* 设置元素的外边距，上下外边距为 5 像素，左右外边距为 10 像素，用于控制该元素与周围元素在页面中的间隔距离 */
+}
 
-.searchBar{height:30px;padding:7px 0 3px;text-align:center;}
+/* 定义类名为.searchBar 的元素样式 */
-.searchBtn{font-size:13px;height:24px;}
+.searchBar{
+    height: 30px;
+    padding: 7px 0 3px;
+    text-align: center;
+    /* 设置元素的高度为 30 像素，内边距方面，上方内边距为 7 像素，下方内边距为 3 像素，左右内边距为 0 像素，使元素内部内容在垂直方向上有一定间隔；同时将文本水平居中对齐，常用于包含搜索相关输入框、按钮等元素的容器，使其内部元素布局更规整 */
+}
 
-.resultBar{width:460px;margin:5px auto;border: 1px solid #CCC;border-radius: 5px;box-shadow: 2px 2px 5px #D3D6DA;overflow: hidden;}
+/* 定义类名为.searchBtn 的元素样式 */
+.searchBtn{
+    font-size: 13px;
+    height: 24px;
+    /* 设置元素的字体大小为 13 像素，高度为 24 像素，可用于按钮等交互元素，使其呈现出合适的尺寸和文字显示大小，方便用户操作与查看 */
+}
 
-.listPanel{overflow: hidden;}
+/* 定义类名为.resultBar 的元素样式 */
-.panelon{display:block;}
+.resultBar{
-.paneloff{display:none}
+    width: 460px;
+    margin: 5px auto;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px #D3D6DA;
+    overflow: hidden;
+    /* 设置元素的宽度为 460 像素，使其具有固定宽度；外边距方面，上下外边距为 5 像素，左右自动（auto）居中，让该元素在页面中水平居中显示；边框为 1 像素宽的浅灰色（#CCC）实线；添加 5 像素的圆角效果（border-radius），使边框角变得圆润，提升外观美感；添加阴影效果（box-shadow），营造出立体层次感；同时设置溢出内容隐藏（overflow: hidden），防止内部元素超出该容器范围显示，常用于展示搜索结果等内容的容器样式设置 */
+}
 
-.page{width:220px;margin:20px auto;overflow: hidden;}
+/* 定义类名为.listPanel 的元素样式 */
-.pageon{float:right;width:24px;line-height:24px;height:24px;margin-right: 5px;background: none;border: none;color: #000;font-weight: bold;text-align:center}
+.listPanel{
-.pageoff{float:right;width:24px;line-height:24px;height:24px;cursor:pointer;background-color: #fff;
+    overflow: hidden;
-   border: 1px solid #E7ECF0;color: #2D64B3;margin-right: 5px;text-decoration: none;text-align:center;}
+    /* 设置元素的溢出内容隐藏，通常用于包含多个子元素且希望控制子元素显示范围，避免出现滚动条或者超出部分不显示等布局情况，常作为列表展示相关的父容器样式 */
+}
 
-.m-box{width:460px;}
+/* 定义类名为.panelon 的元素样式 */
-.m-m{float: left;line-height: 20px;height: 20px;}
+.panelon{
-.m-h{height:24px;line-height:24px;padding-left: 46px;background-color:#FAFAFA;border-bottom: 1px solid #DAD8D8;font-weight: bold;font-size: 12px;color: #333;}
+    display: block;
-.m-l{float:left;width:40px; }
+    /* 将元素设置为块级元素显示，会独占一行，常用于控制元素的显示与隐藏逻辑，当需要显示某个面板或模块时应用此样式 */
-.m-t{float:left;width:140px;}
+}
-.m-s{float:left;width:110px;}
-.m-z{float:left;width:100px;}
-.m-try-t{float: left;width: 60px;;}
 
-.m-try{float:left;width:20px;height:20px;background:url('http://static.tieba.baidu.com/tb/editor/images/try_music.gif') no-repeat ;}
+/* 定义类名为.paneloff 的元素样式 */
-.m-trying{float:left;width:20px;height:20px;background:url('http://static.tieba.baidu.com/tb/editor/images/stop_music.gif') no-repeat ;}
+.paneloff{
+    display: none;
+    /* 将元素设置为隐藏状态，不显示在页面上，同样用于元素的显示与隐藏逻辑控制，比如隐藏不需要展示的面板或模块时应用此样式 */
+}
 
-.loading{width:95px;height:7px;font-size:7px;margin:60px auto;background:url(http://static.tieba.baidu.com/tb/editor/images/loading.gif) no-repeat}
+/* 定义类名为.page 的元素样式 */
-.empty{width:300px;height:40px;padding:2px;margin:50px auto;line-height:40px; color:#006699;text-align:center;}
+.page{
+    width: 220px;
+    margin: 20px auto;
+    overflow: hidden;
+    /* 设置元素的宽度为 220 像素，外边距上下为 20 像素且左右自动（auto）居中，使其在页面中水平居中显示；同样设置溢出内容隐藏，可用于分页相关的导航元素容器样式，控制内部分页链接等元素的布局范围 */
+}
+
+/* 定义类名为.pageon 的元素样式 */
+.pageon{
+    float: right;
+    width: 24px;
+    line-height: 24px;
+    height: 24px;
+    margin-right: 5px;
+    background: none;
+    border: none;
+    color: #000;
+    font-weight: bold;
+    text-align: center;
+    /* 将元素设置为右浮动（float: right），使其在父容器内靠右排列；宽度为 24 像素，高度为 24 像素，行高也为 24 像素，使文本在元素内垂直居中；右边距为 5 像素，与其他相邻元素隔开一定距离；背景设置为无（none），边框设置为无（none），文本颜色为黑色（#000），字体加粗（font-weight: bold），文本水平居中对齐（text-align: center），这种样式可能用于表示当前选中的分页链接等元素，使其在页面上突出显示 */
+}
+
+/* 定义类名为.pageoff 的元素样式 */
+.pageoff{
+    float: right;
+    width: 24px;
+    line-height: 24px;
+    height: 24px;
+    cursor: pointer;
+    background-color: #fff;
+    border: 1px solid #E7ECF0;
+    color: #2D64B3;
+    margin-right: 5px;
+    text-decoration: none;
+    text-align: center;
+    /* 同样设置为右浮动，尺寸方面与.pageon 类似，设置宽度、高度和行高都为 24 像素；鼠标指针悬停时变为手型（cursor: pointer），表示可点击交互；背景颜色为白色（#fff），边框为 1 像素宽的淡蓝色（#E7ECF0）实线；文本颜色为浅蓝色（#2D64B3），右边距为 5 像素，去除文本的下划线装饰（text-decoration: none），文本水平居中对齐，这种样式可能用于表示未选中的分页链接等可点击元素，通过不同的样式与.pageon 区分开来，便于用户识别和操作 */
+}
+
+/* 定义类名为.m-box 的元素样式 */
+.m-box{
+    width: 460px;
+    /* 设置元素的宽度为 460 像素，可作为一个整体的容器，控制内部相关元素的布局宽度范围 */
+}
+
+/* 定义类名为.m-m 的元素样式 */
+.m-m{
+    float: left;
+    line-height: 20px;
+    height: 20px;
+    /* 将元素设置为左浮动（float: left），使其在父容器内靠左排列；行高为 20 像素，高度也为 20 像素，可用于设置文本等内容在垂直方向上的对齐和显示高度，常用于包含多个并列信息的布局场景，比如列表项中的不同字段内容展示 */
+}
+
+/* 定义类名为.m-h 的元素样式 */
+.m-h{
+    height: 24px;
+    line-height: 24px;
+    padding-left: 46px;
+    background-color: #FAFAFA;
+    border-bottom: 1px solid #DAD8D8;
+    font-weight: bold;
+    font-size: 12px;
+    color: #333;
+    /* 设置元素的高度为 24 像素，行高与高度相同，使文本垂直居中；左边内边距为 46 像素，增加左侧空白间隔；背景颜色为浅灰色（#FAFAFA），底部添加 1 像素宽的稍深一点的灰色（#DAD8D8）边框，用于区分不同部分；字体加粗，字体大小为 12 像素，文本颜色为深灰色（#333），这种样式可能用于标题栏等元素，使其在页面上突出显示且与其他内容区分开来 */
+}
+
+/* 定义类名为.m-l 的元素样式 */
+.m-l{
+    float: left;
+    width: 40px;
+    /* 将元素设置为左浮动，宽度设置为 40 像素，常用于在一行内划分出固定宽度的区域，放置相应的内容，比如列表项中的某个字段内容展示 */
+}
+
+/* 定义类名为.m-t 的元素样式 */
+.m-t{
+    float: left;
+    width: 140px;
+    /* 将元素设置为左浮动，宽度设置为 140 像素，同样用于在一行内划分出特定宽度区域来展示相关内容，与其他浮动元素一起实现多列信息的布局展示 */
+}
+
+/* 定义类名为.m-s 的元素样式 */
+.m-s{
+    float: left;
+    width: 110px;
+    /* 将元素设置为左浮动，宽度设置为 110 像素，也是用于布局多列信息，按照设定的宽度分配空间展示不同内容 */
+}
+
+/* 定义类名为.m-z 的元素样式 */
+.m-z{
+    float: left;
+    width: 100px;
+    /* 将元素设置为左浮动，宽度设置为 100 像素，与其他浮动元素配合实现一行内多列信息展示的布局效果 */
+}
+
+/* 定义类名为.m-try-t 的元素样式 */
+.m-try-t{
+    float: left;
+    width: 60px;
+    /* 将元素设置为左浮动，宽度设置为 60 像素，可用于在布局中划分出特定宽度区域来放置相应的元素或展示内容 */
+}
+
+/* 定义类名为.m-try 的元素样式 */
+.m-try{
+    float: left;
+    width: 20px;
+    height: 20px;
+    background: url('http://static.tieba.baidu.com/tb/editor/images/try_music.gif') no-repeat ;
+    /* 将元素设置为左浮动，宽度为 20 像素，高度为 20 像素，并设置背景图片，图片不重复平铺（no-repeat），该样式可能用于展示一个特定的音乐播放相关的图标等元素，通过背景图片呈现出可视化的效果 */
+}
+
+/* 定义类名为.m-trying 的元素样式 */
+.m-trying{
+    float: left;
+    width: 20px;
+    height: 20px;
+    background: url('http://static.tieba.baidu.com/tb/editor/images/stop_music.gif') no-repeat ;
+    /* 同样设置为左浮动，尺寸与.m-try 相同，也是通过设置不同的背景图片（这里是停止音乐相关的图标图片）且不重复平铺，用于呈现另一种音乐相关操作的可视化图标元素，与.m-try 样式配合实现音乐播放相关的交互界面展示 */
+}
+
+/* 定义类名为.loading 的元素样式 */
+.loading{
+    width: 95px;
+    height: 7px;
+    font-size: 7px;
+    margin: 60px auto;
+    background: url(http://static.tieba.baidu.com/tb/editor/images/loading.gif) no-repeat;
+    /* 设置元素的宽度为 95 像素，高度为 7 像素，字体大小为 7 像素，外边距上下为 60 像素且左右自动（auto）居中，使其在页面中水平居中显示；通过设置背景图片（loading 相关的动图，通常用于表示加载状态）且不重复平铺，用于展示加载中的可视化效果，提示用户当前正在进行数据加载等操作 */
+}
+
+/* 定义类名为.empty 的元素样式 */
+.empty{
+    width: 300px;
+    height: 40px;
+    padding: 2px;
+    margin: 50px auto;
+    line-height: 40px;
+    color: #006699;
+    text-align: center;
+    /* 设置元素的宽度为 300 像素，高度为 40 像素，内边距为 2 像素，外边距上下为 50 像素且左右自动（auto）居中，使其在页面中水平居中显示；行高与高度相同，使文本垂直居中；文本颜色为浅蓝色（#006699），文本水平居中对齐，这种样式常用于当没有相关数据时，展示一个提示信息的区域，告知用户当前无数据等情况 */
+}

public2/ueditor/dialogs/music/music.html

@@ -2,31 +2,50 @@
 <html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能够正确显示各种字符 -->
     <title>插入音乐</title>
+    <!-- 设置页面的标题，该标题会显示在浏览器的标题栏中，清晰表明了此页面的功能与插入音乐相关 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，这个文件可能包含了页面中通用的函数、变量定义以及一些基础的业务逻辑代码等，具体功能依赖其内部的具体实现 -->
     <link rel="stylesheet" type="text/css" href="music.css">
+    <!-- 引入外部的 CSS 样式表文件（music.css），用于定义页面中各种元素的样式，使页面呈现出特定的布局和视觉效果 -->
 </head>
 <body>
-<div class="wrapper">
+    <div class="wrapper">
-    <div class="searchBar">
+        <!-- 创建一个类名为“wrapper”的 div 容器，其样式规则应该在引入的“music.css”样式表中定义，这个容器可能作为整个插入音乐功能模块相关元素的外层包裹，方便对内部元素进行统一的布局管理 -->
-        <input id="J_searchName" type="text"/>
+        <div class="searchBar">
-        <input type="button" class="searchBtn" id="J_searchBtn">
+            <!-- 创建一个类名为“searchBar”的 div 容器，从类名推测其可能用于放置与音乐搜索相关的元素，样式在“music.css”中定义 -->
+            <input id="J_searchName" type="text" />
+            <!-- 创建一个 id 为“J_searchName”的文本输入框元素，用户可以在此输入框中输入与音乐相关的搜索关键词，比如歌曲名称、歌手等信息 -->
+            <input type="button" class="searchBtn" id="J_searchBtn">
+            <!-- 创建一个 id 为“J_searchBtn”、类名为“searchBtn”的按钮元素（type="button"），其样式由“music.css”中定义的“.searchBtn”类来控制，这个按钮可能用于触发音乐搜索的操作 -->
+        </div>
+        <div class="resultBar" id="J_resultBar">
+            <!-- 创建一个类名为“resultBar”、id 为“J_resultBar”的 div 容器，从类名推测它是用于展示音乐搜索结果的区域，样式在“music.css”中定义 -->
+            <div class="loading" style="display:none"></div>
+            <!-- 创建一个类名为“loading”的 div 元素，用于展示加载状态（比如搜索音乐时的加载提示），初始设置为不显示（display:none），后续可通过 JavaScript 代码根据实际情况控制其显示隐藏，样式同样在“music.css”中定义 -->
+            <div class="empty"><var id="lang_input_tips"></var></div>
+            <!-- 创建一个类名为“empty”的 div 元素，内部嵌套一个带有特定 id（“lang_input_tips”）的 var 元素，该 var 元素的文本内容可能通过 JavaScript 动态设置，从类名推测这个区域可能用于在没有搜索到音乐结果等情况下显示相应的提示信息，样式在“music.css”中定义 -->
+        </div>
+        <div id="J_preview"></div>
+        <!-- 创建一个 id 为“J_preview”的 div 元素，从 id 推测它可能用于对选择的音乐进行预览展示等相关操作，具体功能依赖后续 JavaScript 代码的实现 -->
     </div>
-    <div class="resultBar" id="J_resultBar">
+</body>
-        <div class="loading" style="display:none"></div>
-        <div class="empty"><var id="lang_input_tips"></var></div>
-    </div>
-    <div id="J_preview"></div>
-</div>
 <script type="text/javascript" src="music.js"></script>
+<!-- 引入外部的 JavaScript 文件（music.js），这个文件大概率包含了与插入音乐功能紧密相关的业务逻辑代码，比如音乐搜索、预览、插入等具体操作的函数实现 -->
 <script type="text/javascript">
     var music = new Music;
+    // 创建一个名为“Music”的类的实例（假设“Music”类在前面引入的“music.js”文件或者其他能被正确识别的地方定义了），并将这个实例存储在“music”变量中，这个实例可能包含了一系列操作音乐的方法，用于后续执行音乐相关的功能操作。
+
     dialog.onok = function () {
         music.exec();
     };
+    // 将对话框（dialog，可能是页面上弹出的用于操作插入音乐的对话框，具体实现依赖相关代码环境）的“onok”事件（通常表示用户点击了对话框中的“确定”按钮）绑定到一个匿名函数上，当用户点击“确定”按钮时，会调用“music”实例的“exec”方法（“exec”方法应该在“Music”类的定义中实现了具体的业务逻辑，可能是执行插入音乐到某个地方等操作）。
+
     dialog.oncancel = function () {
         $G('J_preview').innerHTML = "";
     };
+    // 将对话框的“oncancel”事件（通常表示用户点击了对话框中的“取消”按钮）绑定到一个匿名函数上，当用户点击“取消”按钮时，通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为“J_preview”的元素，并将其 innerHTML 属性设置为空字符串，也就是清空该元素内的内容，可能用于取消操作时清除之前在预览区域显示的内容等情况。
 </script>
 </body>
 </html>

public2/ueditor/dialogs/music/music.js

@@ -1,52 +1,74 @@
 function Music() {
     this.init();
 }
+// 定义一个名为 'Music' 的构造函数，当创建 'Music' 类的实例时，会自动调用 'init' 方法，用于初始化音乐相关的一些设置和绑定事件等操作，这是面向对象编程中构造函数的常见用法，用于创建具有特定功能和属性的对象实例。
+
 (function () {
     var pages = [],
         panels = [],
         selectedItem = null;
+    // 创建三个私有变量，'pages' 数组用于存储分页相关的元素标识（可能是页面上分页按钮等元素的 ID 之类），'panels' 数组用于存储页面面板相关的元素标识（可能是用于展示不同页面内容的面板元素 ID），'selectedItem' 初始化为 null，用于记录用户选择的音乐相关信息（比如歌曲对象等），这几个变量在函数内部使用，外部无法直接访问，起到了数据封装的作用。
+
     Music.prototype = {
-        total:70,
+        total: 70,
-        pageSize:10,
+        pageSize: 10,
-        dataUrl:"http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.common",
+        dataUrl: "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.common",
-        playerUrl:"http://box.baidu.com/widget/flash/bdspacesong.swf",
+        playerUrl: "http://box.baidu.com/widget/flash/bdspacesong.swf",
+        // 在 'Music' 类的原型对象上定义了四个属性。'total' 表示总的数据量（可能是搜索结果的总数之类），初始值为 70；'pageSize' 表示每页显示的数据条数，初始值为 10，用于分页功能相关计算；'dataUrl' 定义了获取音乐数据的 API 地址，指向百度音乐的一个搜索接口，通过向这个接口发送请求来获取音乐相关信息；'playerUrl' 定义了音乐播放器对应的 Flash 文件的 URL 地址，用于后续创建音乐播放相关的 HTML 元素嵌入到页面中实现音乐播放功能。
 
-        init:function () {
+        init: function () {
             var me = this;
+            // 在 'init' 方法内部，首先将当前对象（this）赋值给变量'me'，方便在内部函数中引用外部对象的属性和方法，这是一种常见的解决 JavaScript 中 this 指针指向问题的技巧，尤其是在事件回调函数中使用时。
+
             domUtils.on($G("J_searchName"), "keyup", function (event) {
                 var e = window.event || event;
                 if (e.keyCode == 13) {
                     me.dosearch();
                 }
             });
+            // 使用 'domUtils'（可能是自定义的 DOM 操作工具对象，包含处理 DOM 事件绑定等功能的函数）的 'on' 方法，为页面中 id 为 'J_searchName' 的元素（可能是一个输入框，用于输入搜索关键词）绑定 'keyup' 键盘按键抬起事件监听器。在事件回调函数中，先处理浏览器兼容性问题（获取正确的事件对象，因为不同浏览器获取事件对象的方式略有不同，IE 使用 'window.event'，其他标准浏览器使用传入的参数 'event'），然后判断按下的键码（keyCode）是否为 13（回车键的键码），如果是回车键按下，则调用当前对象（通过'me' 引用）的 'dosearch' 方法，实现用户在输入框中输入关键词后按回车键触发搜索的功能。
+
+            domUtils.on($G("J_searchName"), "click", function () {
+                me.dosearch();
+            });
+            // 同样使用 'domUtils' 的 'on' 方法，为 id 为 'J_searchName' 的元素绑定 'click' 点击事件监听器，当用户点击该元素时，直接调用 'dosearch' 方法，不过通常输入框点击事件的使用场景较少，这里可能是一种额外的触发搜索方式或者是代码冗余（具体看实际需求），正常更常见的是通过回车键触发搜索。
+
             domUtils.on($G("J_searchBtn"), "click", function () {
                 me.dosearch();
             });
+            // 使用 'domUtils' 为页面中 id 为 'J_searchBtn' 的元素（可能是一个按钮，用于触发音乐搜索操作）绑定 'click' 点击事件监听器，当用户点击这个按钮时，调用 'dosearch' 方法，触发音乐搜索逻辑，这是比较常见的通过按钮点击来执行搜索功能的实现方式。
         },
-        callback:function (data) {
+
+        callback: function (data) {
             var me = this;
             me.data = data.song_list;
             setTimeout(function () {
                 $G('J_resultBar').innerHTML = me._renderTemplate(data.song_list);
             }, 300);
+            // 定义 'callback' 方法，用于接收从服务器获取音乐数据后的回调处理。首先将传入的 'data' 参数中的'song_list' 属性值（可能是包含歌曲信息的数组）赋值给当前对象（通过'me' 引用）的 'data' 属性，以便后续在其他方法中可以访问这些歌曲数据。然后使用'setTimeout' 函数，延迟 300 毫秒后执行一个匿名函数，在匿名函数内通过 '$G' 函数（可能是自定义的获取 DOM 元素的函数）获取页面中 id 为 'J_resultBar' 的元素，并将其 'innerHTML' 属性设置为调用 '_renderTemplate' 方法（后续定义）处理后的歌曲列表数据（data.song_list），实现将获取到的音乐数据渲染并展示到页面相应区域的功能，延迟执行可能是为了等待页面其他相关元素加载或准备好，避免出现数据渲染的错误或不一致情况。
         },
-        dosearch:function () {
+
+        dosearch: function () {
             var me = this;
             selectedItem = null;
             var key = $G('J_searchName').value;
-            if (utils.trim(key) == "")return false;
+            if (utils.trim(key) == "") return false;
             key = encodeURIComponent(key);
             me._sent(key);
+            // 定义 'dosearch' 方法，用于执行音乐搜索操作。首先将'selectedItem' 重置为 null，表示当前没有选中的歌曲。然后通过 '$G' 函数获取页面中 id 为 'J_searchName' 的输入框元素的值（用户输入的搜索关键词），并使用 'utils.trim' 函数（可能是自定义的去除字符串两端空白字符的函数）去除关键词两端的空白字符，如果处理后的关键词为空字符串，则直接返回 false，阻止搜索操作执行（因为没有有效的搜索内容）。如果关键词不为空，则使用 'encodeURIComponent' 函数对关键词进行 URL 编码，使其符合 URL 传参的格式要求，最后调用当前对象（通过'me' 引用）的 '_sent' 方法（后续定义），传入编码后的关键词，发起向服务器获取音乐数据的请求。
         },
-        doselect:function (i) {
+
+        doselect: function (i) {
             var me = this;
             if (typeof i == 'object') {
                 selectedItem = i;
             } else if (typeof i == 'number') {
                 selectedItem = me.data[i];
             }
+            // 定义 'doselect' 方法，用于处理用户选择音乐的操作。根据传入参数 'i' 的数据类型进行不同的处理，如果 'i' 是一个对象（可能是代表歌曲信息的对象），则直接将其赋值给'selectedItem'，表示选中了这个歌曲对象；如果 'i' 是一个数字，则将当前对象（通过'me' 引用）的 'data' 属性（之前存储的歌曲列表数据）中对应索引的歌曲对象赋值给'selectedItem'，这样就记录了用户选择的歌曲信息，方便后续进行播放、插入等相关操作。
         },
-        onpageclick:function (id) {
+
+        onpageclick: function (id) {
             var me = this;
             for (var i = 0; i < pages.length; i++) {
                 $G(pages[i]).className = 'pageoff';
@@ -54,8 +76,10 @@ function Music() {
             }
             $G('page' + id).className = 'pageon';
             $G('panel' + id).className = 'panelon';
+            // 定义 'onpageclick' 方法，用于处理分页点击事件。首先遍历 'pages' 和 'panels' 数组（之前存储了分页和面板相关元素的标识），通过 '$G' 函数获取对应的元素，并将它们的 'className' 属性分别设置为 'pageoff' 和 'paneloff'，也就是将所有分页按钮和对应面板设置为未选中状态（关闭状态）。然后通过 '$G' 函数获取当前点击的分页按钮（根据传入的 'id' 参数拼接出对应的元素 ID，如 'page' + id），将其 'className' 属性设置为 'pageon'（选中状态），同时将对应的面板（'panel' + id）的 'className' 设置为 'panelon'（显示状态），实现分页切换时相应页面内容显示和分页按钮状态切换的功能。
         },
-        listenTest:function (elem) {
+
+        listenTest: function (elem) {
             var me = this,
                 view = $G('J_preview'),
                 is_play_action = (elem.className == 'm-try'),
@@ -69,31 +93,39 @@ function Music() {
                 elem.className = 'm-trying';
                 view.innerHTML = me._buildMusicHtml(me._getUrl(true));
             }
+            // 定义 'listenTest' 方法，用于处理音乐试听相关操作。首先获取当前对象（通过'me' 引用）、页面中 id 为 'J_preview' 的元素（可能是用于音乐预览展示的区域），判断传入的元素（elem）的 'className' 是否为'm-try'，如果是则将 'is_play_action' 设置为 true，表示是播放操作（从类名推测'm-try' 可能代表播放相关的样式类）。接着调用 '_getTryingElem' 方法（后续定义）获取之前正在试听的元素（如果存在的话），如果存在，则将其 'className' 恢复为'm-try'（表示停止播放状态），并清空 'J_preview' 元素的 'innerHTML'（清除之前的试听内容）。如果是播放操作（'is_play_action' 为 true），则将传入元素（elem）的 'className' 修改为'm-trying'（可能代表正在播放的样式类），并通过调用 '_buildMusicHtml' 方法（后续定义）传入获取到的音乐播放 URL（通过 '_getUrl' 方法获取，且传入参数 true 表示是试听情况），将生成的包含音乐播放器的 HTML 代码设置为 'J_preview' 元素的 'innerHTML'，实现在预览区域播放音乐的功能。
         },
-        _sent:function (param) {
+
+        _sent: function (param) {
             var me = this;
             $G('J_resultBar').innerHTML = '<div class="loading"></div>';
 
             utils.loadFile(document, {
-                src:me.dataUrl + '&query=' + param + '&page_size=' + me.total + '&callback=music.callback&.r=' + Math.random(),
+                src: me.dataUrl + '&query=' + param + '&page_size=' + me.total + '&callback=music.callback&.r=' + Math.random(),
-                tag:"script",
+                tag: "script",
-                type:"text/javascript",
+                type: "text/javascript",
-                defer:"defer"
+                defer: "defer"
             });
+            // 定义 '_sent' 方法，用于向服务器发送获取音乐数据的请求。首先通过 '$G' 函数获取页面中 id 为 'J_resultBar' 的元素，并将其 'innerHTML' 属性设置为一个包含 'loading' 类名的 div 元素（从类名推测用于展示加载提示信息，样式可能在外部 CSS 文件中定义），用于提示用户正在加载数据。然后使用 'utils.loadFile' 函数（可能是自定义的加载文件的函数，这里用于加载 JavaScript 脚本文件），向 'document' 对象（页面的文档对象）添加一个 script 标签，设置其'src' 属性为拼接好的请求 URL，包含了之前定义的 'dataUrl'（基础 API 地址）、搜索关键词参数（param）、每页显示数量（page_size）、回调函数名称（callback=music.callback，表示数据获取成功后调用 'Music' 类的 'callback' 方法）以及一个随机数（用于避免缓存，确保每次请求都是新的，.r= + Math.random()），同时设置标签的 'tag' 为 "script"（表示是脚本标签），'type' 为 "text/javascript"（脚本类型），'defer' 属性为 "defer"（表示延迟加载，即页面解析完后再执行脚本，避免阻塞页面渲染），通过这种方式向服务器发起获取音乐数据的请求，并在获取成功后通过指定的回调函数处理数据。
         },
-        _removeHtml:function (str) {
+
+        _removeHtml: function (str) {
             var reg = /<\s*\/?\s*[^>]*\s*>/gi;
             return str.replace(reg, "");
+            // 定义 '_removeHtml' 方法，用于去除字符串中的 HTML 标签。通过创建一个正则表达式对象（reg），匹配以 '<' 开头，中间包含任意字符（除了 '>'），以 '>' 结尾的 HTML 标签（包括自闭和标签以及成对标签），不区分大小写（gi 修饰符），然后使用字符串的'replace' 方法将匹配到的 HTML 标签替换为空字符串，返回处理后的字符串，可用于清理歌曲信息等文本中的 HTML 标签，获取纯文本内容，比如歌曲标题、歌手名等文本信息的提取和清理。
         },
-        _getUrl:function (isTryListen) {
+
+        _getUrl: function (isTryListen) {
             var me = this;
             var param = 'from=tiebasongwidget&url=&name=' + encodeURIComponent(me._removeHtml(selectedItem.title)) + '&artist='
                 + encodeURIComponent(me._removeHtml(selectedItem.author)) + '&extra='
                 + encodeURIComponent(me._removeHtml(selectedItem.album_title))
-                + '&autoPlay='+isTryListen+'' + '&loop=true';
+                + '&autoPlay=' + isTryListen + '' + '&loop=true';
-            return  me.playerUrl + "?" + param;
+            return me.playerUrl + "?" + param;
+            // 定义 '_getUrl' 方法，用于获取音乐播放的 URL 参数。根据传入的 'isTryListen' 参数（布尔值，用于区分是试听还是正式插入播放等情况）构建请求参数 'param'，参数中包含了来源信息（from=tiebasongwidget）、歌曲名称（通过获取'selectedItem' 的 'title' 属性，去除其中的 HTML 标签后进行 URL 编码）、歌手信息（同理处理 'author' 属性）、额外信息（可能是专辑相关，处理 'album_title' 属性）以及自动播放（autoPlay 根据 'isTryListen' 设置为 true 或 false）和循环播放（loop=true）等设置，最后将构建好的参数拼接在 'playerUrl'（音乐播放器的 Flash 文件 URL）后面，返回完整的音乐播放 URL，用于后续创建音乐播放相关的 HTML 元素或者发起播放请求等操作。
         },
-        _getTryingElem:function () {
+
+        _getTryingElem: function () {
             var s = $G('J_listPanel').getElementsByTagName('span');
 
             for (var i = 0; i < s.length; i++) {
@@ -101,17 +133,22 @@ function Music() {
                     return s[i];
             }
             return null;
+            // 定义 '_getTryingElem' 方法，用于查找页面中正在试听的元素（通过样式类'm-trying' 判断）。首先通过 '$G' 函数获取页面中 id 为 'J_listPanel' 的元素，并获取其内部所有的'span' 标签元素，存储在's' 数组中。然后循环遍历这个数组，判断每个'span' 元素的 'className' 是否为'm-trying'，如果找到符合条件的元素，则返回该元素，表示找到了正在试听的元素；如果循环结束都没有找到，则返回 null，说明当前没有正在试听的元素。
         },
-        _buildMusicHtml:function (playerUrl) {
+
+        _buildMusicHtml: function (playerUrl) {
             var html = '<embed class="BDE_try_Music" allowfullscreen="false" pluginspage="http://www.macromedia.com/go/getflashplayer"';
             html += ' src="' + playerUrl + '"';
             html += ' width="1" height="1" style="position:absolute;left:-2000px;"';
             html += ' type="application/x-shockwave-flash" wmode="transparent" play="true" loop="false"';
             html += ' menu="false" allowscriptaccess="never" scale="noborder">';
             return html;
+            // 定义 '_buildMusicHtml' 方法，用于构建包含音乐播放器的 HTML 代码。根据传入的音乐播放 URL（playerUrl 参数），创建一个 '<embed>' 嵌入元素，设置其类名为 'BDE_try_Music'，禁止全屏（allowfullscreen="false"），指定 Flash 插件获取地址（pluginspage="http://www.macromedia.com/go/getflashplayer"），设置'src' 属性为传入的播放 URL，同时设置宽度和高度都为 1 像素，并通过样式将其定位到页面不可见的位置（left:-2000px，可能是为了在不需要显示播放器时隐藏它，又不影响页面布局），指定类型为 'application/x-shockwave-flash'，设置透明模式（wmode="transparent"）、自动播放（play="true"）、不循环播放（loop="false"）、隐藏菜单（menu="false"）、禁止脚本访问（allowscriptaccess="never"）以及无边框缩放（scale="noborder"）等属性，最后返回构建好的 HTML 代码，可用于插入到页面中实现音乐播放功能（虽然设置了隐藏位置，但在合适的情况下可以调整位置使其可见并播放音乐）。
         },
-        _byteLength:function (str) {
+
+        _byteLength: function (str) {
             return str.replace(/[^\u0000-\u007f]/g, "\u0061\u0061").length;
+            // 定义 '_byteLength' 方法，用于计算字符串的字节长度。通过正则表达式将字符串中非
         },
         _getMaxText:function (s) {
             var me = this;

public2/ueditor/dialogs/preview/preview.html

@@ -1,40 +1,56 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-    "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
 <html>
-    <head>
+<head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <style>
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能正确显示各种字符 -->
-            html,body{
+    <style>
-                height:100%;
+        html, body {
-                width:100%;
+            height: 100%;
-                padding:0;
+            width: 100%;
-                margin:0;
+            padding: 0;
-            }
+            margin: 0;
-            #preview{
+        }
-                width:100%;
+        /* 对 html 和 body 元素设置样式，将它们的高度和宽度都设置为 100%，使其占满整个浏览器视口的高度和宽度；同时把内边距（padding）和外边距（margin）都设为 0，去除默认的空白间隔，方便后续在页面内进行精确的布局操作 */
-                height:100%;
+        #preview {
-                padding:0;
+            width: 100%;
-                margin:0;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+        }
+            /* 针对 id 为 'preview' 的元素设置样式，同样将其宽度和高度设置为 100%，使其在父元素（这里就是 body 元素，由于 html 和 body 都占满视口了，所以它理论上也能占满视口）内占满整个空间，并且内边距和外边距都设为 0，为该元素内部内容展示提供一个完整的空间布局基础 */
+            #preview * {
+                font-family: sans-serif;
+                font-size: 16px;
             }
-            #preview *{font-family:sans-serif;font-size:16px;}
+        /* 对 id 为 'preview' 的元素内部的所有子元素（通过通配符 * 选择）设置字体相关样式，将字体族（font-family）设置为无衬线字体（sans-serif），字体大小（font-size）设置为 16 像素，统一内部文本的字体显示风格 */
-        </style>
+    </style>
-        <script type="text/javascript" src="../internal.js"></script>
+    <script type="text/javascript" src="../internal.js"></script>
-        <script src="../../ueditor.parse.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中通用的函数、变量定义以及一些基础的业务逻辑代码等，具体功能依赖其内部实现 -->
-        <title></title>
+    <script src="../../ueditor.parse.js"></script>
-    </head>
+    <!-- 引入相对路径为“../../ueditor.parse.js”的 JavaScript 文件，从文件名推测，这个文件可能与编辑器内容解析相关，用于对特定内容进行解析并展示等操作，具体功能要看该文件内的代码实现 -->
-    <body class="view">
+    <title></title>
-        <div id="preview" style="margin:8px">
+    <!-- 此处页面标题为空，通常可以设置一个有意义的标题，使其显示在浏览器的标题栏中 -->
+</head>
+<body class="view">
+    <!-- 设置 body 元素的类名为 'view'，可能会通过外部 CSS 文件（如果有相关样式定义的话）或者后续 JavaScript 代码基于这个类名来对 body 元素应用特定的样式或者进行相关操作；同时 body 元素作为页面内容的容器，内部会包含其他展示相关的元素 -->
+    <div id="preview" style="margin:8px">
+        <!-- 创建一个 id 为 'preview' 的 div 元素，该元素在样式上虽然前面通过 CSS 定义了一些基础样式（占满空间且无内边距外边距），但这里又通过内联样式设置了外边距为 8 像素，这可能会覆盖之前定义的外边距样式，使其与周围元素间隔开一定距离，从后续 JavaScript 代码可知，该元素用于展示相关内容（可能是编辑器内容等） -->
+    </div>
+</body>
+<script>
+    document.getElementById('preview').innerHTML = editor.getContent();
+    // 通过 document.getElementById 方法获取页面中 id 为 'preview' 的 div 元素，然后将其 innerHTML 属性设置为 editor.getContent() 的返回值。这里的 'editor' 应该是一个在之前引入的 JavaScript 文件（比如 '../internal.js' 或者其他相关文件中定义的编辑器对象），'getContent' 方法（具体功能依赖编辑器实现）可能用于获取编辑器中的内容（比如富文本内容等），并将这些内容展示到 'preview' 元素内部，实现内容的呈现。
 
-        </div>
+    uParse('#preview', {
-    </body>
+        rootPath: '../../',
-    <script>
+        chartContainerHeight: 500
-        document.getElementById('preview').innerHTML = editor.getContent();
+    })
-        uParse('#preview',{
+    // 调用 'uParse' 函数（可能是在引入的 'ueditor.parse.js' 文件中定义的函数），传入两个参数，第一个参数是选择器 '#preview'，表示要操作的目标元素是页面中 id 为 'preview' 的元素；第二个参数是一个对象，对象中设置了两个属性，'rootPath' 属性值为 '../../'，可能用于指定一些资源文件（比如图片、样式表等相关文件）的根路径，方便后续在解析过程中正确加载相关依赖；'chartContainerHeight' 属性值为 500，可能是与图表展示相关的容器高度设置（如果有图表解析展示功能的话），整体这个函数调用可能用于对 'preview' 元素内部的内容进行特定的解析处理，使其能正确展示各种格式的内容（比如解析富文本中的图片、图表等元素）。
-            rootPath : '../../',
+
-            chartContainerHeight:500
+    dialog.oncancel = function () {
-        })
+        document.getElementById('preview').innerHTML = '';
-        dialog.oncancel = function(){
+    }
-            document.getElementById('preview').innerHTML = '';
+        // 将对话框（dialog，可能是页面上弹出的用于操作相关内容的对话框，具体实现依赖相关代码环境）的 'oncancel' 事件（通常表示用户点击了对话框中的“取消”按钮）绑定到一个匿名函数上，当用户点击“取消”按钮时，通过 document.getElementById 方法获取页面中 id 为 'preview' 的元素，并将其 innerHTML 属性设置为空字符串，也就是清空该元素内的内容，可能用于取消操作时清除之前在 'preview' 元素中展示的内容等情况。
-        }
+</script>
-    </script>
 </html>

public2/ueditor/dialogs/scrawl/scrawl.css

@@ -1,51 +1,205 @@
+css
 /*common
+* 以下是通用样式部分的注释，这些样式通常会应用在页面多个元素上，用于设置一些基础的页面显示效果和元素外观风格。
 */
-body{margin: 0;}
+body{
-table{width:100%;}
+    margin: 0;
-table td{padding:2px 4px;vertical-align: middle;}
+    /* 将 body 元素的外边距设置为 0，去除页面默认的外边距，使页面内容能从浏览器视口边缘开始布局，方便进行整体的页面设计和元素定位 */
-a{text-decoration: none;}
+}
-em{font-style: normal;}
+table{
-.border_style1{border: 1px solid #ccc;border-radius: 5px;box-shadow:2px 2px 5px #d3d6da;}
+    width: 100%;
+    /* 设置表格元素的宽度为 100%，使其能占满父元素的宽度，常用于页面中需要自适应宽度的表格布局场景，确保表格能根据所在容器的宽度进行相应伸展 */
+}
+table td{
+    padding: 2px 4px;
+    vertical-align: middle;
+    /* 为表格中的单元格（td 元素）设置内边距，上下内边距为 2 像素，左右内边距为 4 像素，使单元格内的内容与边框之间有一定间隔；同时设置垂直对齐方式为居中（vertical-align: middle），让单元格内的内容（如文本、图片等）在垂直方向上处于中间位置，提升表格内容布局的美观度和可读性 */
+}
+a{
+    text-decoration: none;
+    /* 去除链接（a 元素）的默认下划线装饰效果，使链接文本在页面上显示更加简洁、美观，可根据实际设计需求通过其他方式（如颜色变化等）来体现链接的可点击性 */
+}
+em{
+    font-style: normal;
+    /* 将强调（em 元素）的默认斜体字体样式修改为正常字体样式，可能是为了统一文本显示风格，或者根据具体页面设计需要对 em 元素有不同的样式定义 */
+}
+.border_style1{
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px #d3d6da;
+    /* 定义一个名为 'border_style1' 的类选择器样式，用于添加具有特定边框效果的元素。设置边框为 1 像素宽的浅灰色（#ccc）实线，添加 5 像素的圆角效果（border-radius）使边框角变得圆润，增加页面元素的美观度；同时添加阴影效果（box-shadow），参数分别表示水平偏移、垂直偏移、模糊半径以及阴影颜色，营造出立体层次感，使元素在页面上更具立体感和视觉效果 */
+}
+
 /*module
+* 以下是模块相关样式部分的注释，这些样式主要针对页面中不同功能模块的元素进行样式设置，用于构建各个模块的特定布局和外观。
 */
-.main{margin: 8px;overflow: hidden;}
+.main{
+    margin: 8px;
+    overflow: hidden;
+    /* 创建一个名为'main' 的类选择器样式，设置外边距为 8 像素，使该元素与周围元素间隔开一定距离；同时设置溢出内容隐藏（overflow: hidden），用于控制内部元素的显示范围，避免出现滚动条或者超出部分不显示等布局情况，常用于作为页面主要内容区域的容器样式设置 */
+}
+
+.hot{
+    float: left;
+    height: 335px;
+    /* 将元素设置为左浮动（float: left），使其在父容器内靠左排列，常用于多列布局场景，让该元素与其他浮动元素或非浮动元素共同构成页面的布局结构；同时设置元素的高度为 335 像素，确定其在垂直方向上的尺寸大小 */
+}
+.drawBoard{
+    position: relative;
+    cursor: crosshair;
+    /* 设置元素的定位方式为相对定位（position: relative），相对定位的元素会相对于其原本在文档流中的位置进行定位调整，方便后续对其内部的绝对定位元素进行布局；同时将鼠标指针样式设置为十字线（cursor: crosshair），通常用于表示该区域可进行一些精准的绘制、选择等操作，从类名推测可能是与绘图相关的区域 */
+}
+.brushBorad{
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 998;
+    /* 设置元素的定位方式为绝对定位（position: absolute），绝对定位的元素会相对于最近的已定位祖先元素（如果没有则相对于 body 元素）进行定位，这里将其定位在父元素（可能是相对定位的容器）的左上角（left: 0，top: 0）；设置 z-index 为 998，用于控制元素在页面中的堆叠顺序，数值越大越在上面，确保该元素在合适的层级显示，可能是绘图相关的画板之类的元素，需要显示在特定层级上 */
+}
+.picBoard{
+    border: none;
+    text-align: center;
+    line-height: 300px;
+    cursor: default;
+    /* 去除元素的边框（border: none）；设置文本水平居中对齐（text-align: center），常用于包含图片等内容的元素，使其内部内容在水平方向上居中显示；设置行高为 300 像素（line-height: 300px），可用于垂直方向上的内容对齐或撑开元素高度等情况；将鼠标指针样式设置为默认指针（cursor: default），表示该区域没有特殊的交互操作提示 */
+}
+.operateBar{
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+    /* 设置元素的上边距为 10 像素，使其与上方元素隔开一定距离；设置字体大小为 12 像素，调整文本显示大小；设置文本水平居中对齐（text-align: center），可能用于操作按钮、提示信息等元素的容器，使其内部元素在水平方向上居中排列，看起来更加规整 */
+}
+.operateBar span{
+    margin-left: 10px;
+    /* 为 'operateBar' 内部的 span 元素设置左边距为 10 像素，使 span 元素之间或与其他相邻元素在水平方向上隔开一定距离，常用于在一行内排列多个相关的文本或图标元素等情况 */
+}
 
-.hot{float:left;height:335px;}
+.drawToolbar{
-.drawBoard{position: relative; cursor: crosshair;}
+    float: right;
-.brushBorad{position: absolute;left:0;top:0;z-index: 998;}
+    width: 110px;
-.picBoard{border: none;text-align: center;line-height: 300px;cursor: default;}
+    height: 300px;
-.operateBar{margin-top:10px;font-size:12px;text-align: center;}
+    overflow: hidden;
-.operateBar span{margin-left: 10px;}
+    /* 将元素设置为右浮动（float: right），使其在父容器内靠右排列，与其他左浮动或非浮动元素共同构成多列布局；设置宽度为 110 像素，高度为 300 像素，确定其在水平和垂直方向上的尺寸大小；设置溢出内容隐藏（overflow: hidden），用于控制内部元素的显示范围，避免出现滚动条或者超出部分不显示等布局情况，可能是用于放置绘图工具相关的操作栏容器样式设置 */
+}
+.colorBar{
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+    /* 设置元素的上边距为 10 像素，使其与上方元素隔开一定距离；设置字体大小为 12 像素，调整文本显示大小；设置文本水平居中对齐（text-align: center），可能是用于展示颜色选择相关元素的容器样式，使其内部的颜色块等元素在水平方向上居中排列 */
+}
+.colorBar a{
+    display: block;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #1006F1;
+    border-radius: 3px;
+    box-shadow: 2px 2px 5px #d3d6da;
+    opacity: 0.3;
+    /* 将链接（a 元素）设置为块级元素显示（display: block），使其独占一行，方便进行样式布局和交互操作设置；设置宽度为 10 像素，高度为 10 像素，确定元素的尺寸大小，可能用于表示颜色小块；添加 1 像素宽的蓝色（#1006F1）边框，设置 3 像素的圆角效果，添加阴影效果，营造出立体层次感；设置透明度为 0.3（opacity: 0.3），使颜色块呈现出半透明效果，常用于颜色选择区域的颜色样本展示样式设置 */
+}
+.sectionBar{
+    margin-top: 15px;
+    font-size: 12px;
+    text-align: center;
+    /* 设置元素的上边距为 15 像素，使其与上方元素隔开一定距离；设置字体大小为 12 像素，调整文本显示大小；设置文本水平居中对齐（text-align: center），可能是用于展示与绘图相关的某个功能分区（从类名推测）元素的容器样式，使其内部相关元素在水平方向上居中排列 */
+}
+.sectionBar a{
+    display: inline-block;
+    width: 10px;
+    height: 12px;
+    color: #888;
+    text-indent: -999px;
+    opacity: 0.3;
+    /* 将链接（a 元素）设置为内联块级元素显示（display: inline-block），使其既具有块级元素可以设置宽高的特点，又能像内联元素一样在一行内排列；设置宽度为 10 像素，高度为 12 像素，确定元素的尺寸大小；设置文本颜色为灰色（#888），通过 text-indent: -999px 将文本缩进很大的距离，使其在页面上不显示出来（可能是通过背景图片等方式来展示相应的功能图标）；设置透明度为 0.3，使其呈现半透明效果，可能用于表示不同功能选项的图标样式设置，通过不同的背景图片来区分不同功能 */
+}
+.size1{
+    background: url('images/size.png') 1px center no-repeat ;
+    /* 定义一个名为'size1' 的类选择器样式，设置背景图片为指定路径（'images/size.png'）下的图片文件，使其在元素内部从左边距 1 像素、垂直居中（center）的位置开始显示，且不重复平铺（no-repeat），从类名推测可能是用于表示某种绘图尺寸相关的图标样式，通过不同的背景图片位置来区分不同尺寸选项 */
+}
+.size2{
+    background: url('images/size.png') -10px center no-repeat;
+    /* 与'size1' 类似，也是设置背景图片为 'images/size.png'，但图片显示位置从左边距 -10 像素、垂直居中的位置开始，用于表示另一种绘图尺寸相关的图标样式 */
+}
+.size3{
+    background: url('images/size.png') -22px center no-repeat;
+    /* 同样设置背景图片为 'images/size.png'，图片显示位置从左边距 -22 像素、垂直居中的位置开始，作为又一种绘图尺寸相关的图标样式 */
+}
+.size4{
+    background: url('images/size.png') -35px center no-repeat;
+    /* 设置背景图片为 'images/size.png'，图片显示位置从左边距 -35 像素、垂直居中的位置开始，用于区分不同的绘图尺寸相关图标样式 */
+}
 
-.drawToolbar{float:right;width:110px;height:300px;overflow: hidden;}
+.addImgH{
-.colorBar{margin-top:10px;font-size: 12px;text-align: center;}
+    position: relative;
-.colorBar a{display:block;width: 10px;height: 10px;border:1px solid #1006F1;border-radius: 3px; box-shadow:2px 2px 5px #d3d6da;opacity: 0.3}
+    /* 设置元素的定位方式为相对定位，为其内部的绝对定位元素提供定位基准，从类名推测可能是与添加图片相关的元素容器，后续可在这个相对定位的基础上进行更精确的元素布局 */
-.sectionBar{margin-top:15px;font-size: 12px;text-align: center;}
+}
-.sectionBar a{display:inline-block;width:10px;height:12px;color: #888;text-indent: -999px;opacity: 0.3}
+.addImgH_form{
-.size1{background: url('images/size.png') 1px center no-repeat ;}
+    position: absolute;
-.size2{background: url('images/size.png') -10px center no-repeat;}
+    left: 18px;
-.size3{background: url('images/size.png') -22px center no-repeat;}
+    top: -1px;
-.size4{background: url('images/size.png') -35px center no-repeat;}
+    width: 75px;
+    height: 21px;
+    opacity: 0;
+    cursor: pointer;
+    /* 设置元素的定位方式为绝对定位，相对于最近的已定位祖先元素（这里就是相对定位的 'addImgH' 元素）定位到左边距 18 像素、上边距 -1 像素的位置；设置宽度为 75 像素，高度为 21 像素，确定元素的尺寸大小；设置透明度为 0（opacity: 0），使其初始状态为完全透明不可见，可能是用于隐藏实际的文件上传等表单元素，但又能通过设置为可点击（cursor: pointer）来触发添加图片的相关操作，通过一些交互逻辑使其在合适的时候变为可见状态 */
+}
+.addImgH_form input{
+    width: 100%;
+    /* 设置 'addImgH_form' 内部的 input 元素宽度为 100%，使其占满父元素的宽度，常用于表单输入框等元素，确保输入框能根据所在容器的宽度进行自适应伸展，方便用户输入相关信息 */
+}
 
-.addImgH{position: relative;}
-.addImgH_form{position: absolute;left: 18px;top: -1px;width: 75px;height: 21px;opacity: 0;cursor: pointer;}
-.addImgH_form input{width: 100%;}
 /*scrawl遮罩层
+* 以下是关于涂鸦遮罩层相关样式部分的注释，用于设置遮罩层在页面上的显示效果、位置以及透明度等属性，以实现特定的视觉遮挡和提示功能。
 */
-.maskLayerNull{display: none;}
+.maskLayerNull{
-.maskLayer{position: absolute;top:0;left:0;width: 100%; height: 100%;opacity: 0.7;
+    display: none;
-    background-color: #fff;text-align:center;font-weight:bold;line-height:300px;z-index: 1000;}
+    /* 将元素设置为隐藏状态（display: none），不显示在页面上，从类名推测可能是在不需要遮罩层显示时应用的样式，用于控制遮罩层的显示隐藏逻辑 */
+}
+.maskLayer{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+    background-color: #fff;
+    text-align: center;
+    font-weight: bold;
+    line-height: 300px;
+    z-index: 1000;
+    /* 设置元素的定位方式为绝对定位，使其相对于 body 元素（因为没有更近的已定位祖先元素）定位到页面的左上角（top: 0，left: 0），并设置宽度和高度都为 100%，使其占满整个页面的可视区域；设置透明度为 0.7（opacity: 0.7），使其呈现半透明效果，背景颜色为白色（#fff），用于在页面上覆盖一层半透明的白色遮罩；设置文本水平居中对齐（text-align: center），字体加粗（font-weight: bold），行高为 300 像素（line-height: 300px），可能用于在遮罩层上显示一些提示信息等内容；设置 z-index 为 1000，确保遮罩层在页面的最上层显示，遮挡住下方的元素，起到遮罩提示的作用 */
+}
+
 /*btn state
+* 以下是按钮不同状态相关样式部分的注释，通过设置不同类名下的按钮元素样式，用于区分按钮在不同交互状态（如可点击、不可点击等）下的外观显示差异，如背景图片、文本颜色、鼠标指针样式等方面的变化。
 */
-.previousStepH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/undoH.png');cursor: pointer;}
+.previousStepH.icon{
-.previousStepH .text{color:#888;cursor:pointer;}
+    display: inline-block;
-.previousStep .icon{display: inline-block;width:16px;height:16px;background-image: url('images/undo.png');cursor:default;}
+    width: 16px;
-.previousStep .text{color:#ccc;cursor:default;}
+    height: 16px;
+    background-image: url('images/undoH.png');
+    cursor: pointer;
+    /* 将类名为 'previousStepH' 内部的 '.icon' 元素（可能是用于表示按钮图标部分的元素）设置为内联块级元素显示（display: inline-block），使其可以设置宽高且能在一行内排列；设置宽度为 16 像素，高度为 16 像素，确定元素的尺寸大小；设置背景图片为指定路径（'images/undoH.png'）下的图片文件，用于显示特定的图标；将鼠标指针样式设置为指针（cursor: pointer），表示该元素可点击，从类名推测可能是表示“上一步”操作按钮在可点击的高亮状态下的图标样式 */
+}
+.previousStepH.text{
+    color: #888;
+    cursor: pointer;
+    /* 将类名为 'previousStepH' 内部的 '.text' 元素（可能是用于表示按钮文本部分的元素）设置文本颜色为灰色（#888），将鼠标指针样式设置为指针（cursor: pointer），表示该部分文本所在的按钮整体在这个状态下是可点击的，与前面的图标部分共同构成“上一步”操作按钮在可点击高亮状态下的样式 */
+}
+.previousStep.icon{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url('images/undo.png');
+    cursor: default;
+    /* 与 'previousStepH.icon' 类似，设置为内联块级元素显示，尺寸为 16 像素宽和 16 像素高，设置背景图片为 'images/undo.png'，但将鼠标指针样式设置为默认指针（cursor: default），表示该元素不可点击，从类名推测可能是表示“上一步”操作按钮在不可点击的普通状态下的图标样式 */
+}
+.previousStep.text{
+    color: #ccc;
+    cursor: default;
+    /* 将类名为 'previousStep' 内部的 '.text' 元素设置文本颜色为更浅的灰色（#ccc），鼠标指针样式设置为默认指针（cursor: default），表示该部分文本所在的按钮整体在这个状态下是不可点击的，与前面的图标部分共同构成“上一步”操作按钮在不可点击普通状态下的样式 */
+}
 
-.nextStepH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/redoH.png');cursor: pointer;}
-.nextStepH .text{color:#888;cursor:pointer;}
-.nextStep .icon{display: inline-block;width:16px;height:16px;background-image: url('images/redo.png');cursor:default;}
-.nextStep .text{color:#ccc;cursor:default;}
 
 .clearBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/emptyH.png');cursor: pointer;}
 .clearBoardH .text{color:#888;cursor:pointer;}

public2/ueditor/dialogs/scrawl/scrawl.html

@@ -2,94 +2,122 @@
 <html>
 <head>
     <title></title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <!-- 此处页面标题为空，通常可以设置一个有意义的标题，使其显示在浏览器的标题栏中 -->
-    <meta name="robots" content="noindex, nofollow"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能正确显示各种字符 -->
+    <meta name="robots" content="noindex, nofollow" />
+    <!-- 设置页面对于搜索引擎机器人（robots）的访问指令，'noindex' 表示不允许搜索引擎索引此页面内容，'nofollow' 表示搜索引擎在抓取此页面时不追踪页面上的链接，常用于那些不希望被搜索引擎收录或者不想传递链接权重的页面 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中通用的函数、变量定义以及一些基础的业务逻辑代码等，具体功能依赖其内部实现 -->
     <link rel="stylesheet" type="text/css" href="scrawl.css">
+    <!-- 引入外部的 CSS 样式表文件（scrawl.css），用于定义页面中各种元素的样式，使页面呈现出特定的布局和视觉效果 -->
 </head>
 <body>
-<div class="main" id="J_wrap">
+    <div class="main" id="J_wrap">
-    <div class="hot">
+        <!-- 创建一个类名为“main”且 id 为“J_wrap”的 div 容器，从类名推测它可能是页面主要内容区域的外层包裹元素，样式在引入的“scrawl.css”样式表中定义，id 可用于在 JavaScript 代码中方便地获取该元素进行操作 -->
-        <div class="drawBoard border_style1">
+        <div class="hot">
-            <canvas id="J_brushBoard" class="brushBorad" width="360" height="300"></canvas>
+            <!-- 创建一个类名为“hot”的 div 容器，可能用于放置页面中比较重要或者常用的功能模块相关元素，具体功能从后续内部元素可知与绘图等操作相关 -->
-            <div id="J_picBoard" class="picBoard" style="width: 360px;height: 300px"></div>
+            <div class="drawBoard border_style1">
-        </div>
+                <!-- 创建一个类名为“drawBoard”且应用了“border_style1”类样式（在“scrawl.css”中定义，可能有边框、圆角、阴影等效果）的 div 容器，从类名推测它是绘图相关的主要操作区域，用于放置绘图的画布、图片展示等元素 -->
-        <div id="J_operateBar" class="operateBar">
+                <canvas id="J_brushBoard" class="brushBorad" width="360" height="300"></canvas>
-            <span id="J_previousStep" class="previousStep">
+                <!-- 创建一个 id 为“J_brushBoard”、类名为“brushBorad”的 <canvas> 元素，<canvas> 元素通常用于在网页上通过 JavaScript 绘制图形、图像等内容，这里设置其宽度为 360 像素，高度为 300 像素，它作为绘图的实际画布区域，样式和定位等相关设置可能在“scrawl.css”中定义 -->
-                <em class="icon"></em>
+                <div id="J_picBoard" class="picBoard" style="width: 360px;height: 300px"></div>
-                <em class="text"><var id="lang_input_previousStep"></var></em>
+                <!-- 创建一个 id 为“J_picBoard”、类名为“picBoard”的 div 元素，并通过内联样式设置其宽度和高度都为 360 像素和 300 像素，从类名推测它可能用于展示图片等内容，与绘图操作相关，样式在“scrawl.css”中定义 -->
-            </span>
+            </div>
-            <span id="J_nextStep" class="nextStep">
+            <div id="J_operateBar" class="operateBar">
-                <em class="icon"></em>
+                <!-- 创建一个 id 为“J_operateBar”、类名为“operateBar”的 div 容器，从类名推测它是用于放置操作按钮等相关元素的操作栏，样式在“scrawl.css”中定义 -->
-                <em class="text"><var id="lang_input_nextsStep"></var></em>
+                <span id="J_previousStep" class="previousStep">
-            </span>
+                    <em class="icon"></em>
-            <span id="J_clearBoard" class="clearBoard">
+                    <em class="text"><var id="lang_input_previousStep"></var></em>
-                <em class="icon"></em>
+                </span>
-                <em class="text"><var id="lang_input_clear"></var></em>
+                <!-- 创建一个 id 为“J_previousStep”、类名为“previousStep”的 span 元素，内部包含两个 <em> 子元素，一个类名为“icon”（可能用于展示操作按钮的图标，样式在“scrawl.css”中定义），另一个类名为“text”，内部嵌套一个带有特定 id（“lang_input_previousStep”）的 <var> 元素，从类名和结构推测这个 span 元素整体代表“上一步”操作按钮，文本内容可能通过 JavaScript 动态设置 -->
-            </span>
+                <span id="J_nextStep" class="nextStep">
-            <span id="J_sacleBoard" class="scaleBoard">
+                    <em class="icon"></em>
-                <em class="icon"></em>
+                    <em class="text"><var id="lang_input_nextsStep"></var></em>
-                <em class="text"><var id="lang_input_ScalePic"></var></em>
+                </span>
-            </span>
+                <!-- 与“上一步”操作按钮类似，创建一个代表“下一步”操作按钮的 span 元素，id 为“J_nextStep”、类名为“nextStep”，内部结构也包含图标和文本部分，用于展示相应的操作提示和执行相关功能 -->
-        </div>
+                <span id="J_clearBoard" class="clearBoard">
-    </div>
+                    <em class="icon"></em>
-    <div class="drawToolbar border_style1">
+                    <em class="text"><var id="lang_input_clear"></var></em>
-        <div id="J_colorBar" class="colorBar"></div>
+                </span>
-        <div id="J_brushBar" class="sectionBar">
+                <!-- 创建一个代表“清除”操作按钮的 span 元素，id 为“J_clearBoard”、类名为“clearBoard”，同样由图标和文本部分组成，用于触发清除绘图等相关操作 -->
-            <em class="brushIcon"></em>
+                <span id="J_sacleBoard" class="scaleBoard">
-            <a href="javascript:void(0)" class="size1">1</a>
+                    <em class="icon"></em>
-            <a href="javascript:void(0)" class="size2">3</a>
+                    <em class="text"><var id="lang_input_ScalePic"></var></em>
-            <a href="javascript:void(0)" class="size3">5</a>
+                </span>
-            <a href="javascript:void(0)" class="size4">7</a>
+                <!-- 创建一个代表“缩放图片”操作按钮的 span 元素，id 为“J_sacleBoard”、类名为“scaleBoard”，包含图标和文本部分，用于执行图片缩放相关的操作 -->
-        </div>
-        <div id="J_eraserBar" class="sectionBar">
-            <em class="eraserIcon"></em>
-            <a href="javascript:void(0)" class="size1">1</a>
-            <a href="javascript:void(0)" class="size2">3</a>
-            <a href="javascript:void(0)" class="size3">5</a>
-            <a href="javascript:void(0)" class="size4">7</a>
-        </div>
-        <div class="sectionBar">
-            <div id="J_addImg" class="addImgH">
-                <em class="icon"></em>
-                <em class="text"><var id="lang_input_addPic"></var></em>
-                <form method="post" id="fileForm" enctype="multipart/form-data" class="addImgH_form" target="up">
-                    <input type="file" name="upfile" id="J_imgTxt"
-                           accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>
-                </form>
-                <iframe name="up" style="display: none"></iframe>
             </div>
         </div>
-        <div class="sectionBar">
+        <div class="drawToolbar border_style1">
-            <span id="J_removeImg" class="removeImg">
+            <!-- 创建一个类名为“drawToolbar”且应用了“border_style1”类样式的 div 容器，从类名推测它是绘图工具相关的操作栏容器，用于放置颜色选择、画笔大小、橡皮擦等绘图工具相关的元素，样式在“scrawl.css”中定义 -->
-                <em class="icon"></em>
+            <div id="J_colorBar" class="colorBar"></div>
-                <em class="text"><var id="lang_input_removePic"></var></em>
+            <!-- 创建一个 id 为“J_colorBar”、类名为“colorBar”的 div 容器，从类名和所在位置推测它是用于展示颜色选择相关元素的区域，样式在“scrawl.css”中定义，具体内容可能通过 JavaScript 动态生成或添加 -->
-            </span>
+            <div id="J_brushBar" class="sectionBar">
+                <em class="brushIcon"></em>
+                <a href="javascript:void(0)" class="size1">1</a>
+                <a href="javascript:void(0)" class="size2">3</a>
+                <a href="javascript:void(0)" class="size3">5</a>
+                <a href="javascript:void(0)" class="size4">7</a>
+            </div>
+            <!-- 创建一个 id 为“J_brushBar”、类名为“sectionBar”的 div 容器，内部包含一个类名为“brushIcon”的 <em> 元素（可能用于展示画笔相关的图标，样式在“scrawl.css”中定义）以及多个类名为“size1”、“size2”等的 <a> 元素（可能用于选择不同大小的画笔，样式和功能在“scrawl.css”及 JavaScript 代码中定义），从结构和类名推测这个区域用于选择画笔大小相关操作 -->
+            <div id="J_eraserBar" class="sectionBar">
+                <em class="eraserIcon"></em>
+                <a href="javascript:void(0)" class="size1">1</a>
+                <a href="javascript:void(0)" class="size2">3</a>
+                <a href="javascript:void(0)" class="size3">5</a>
+                <a href="javascript:void(0)" class="size4">7</a>
+            </div>
+            <!-- 与“J_brushBar”类似，创建一个用于橡皮擦相关操作的区域，包含橡皮擦图标（“eraserIcon”）以及用于选择橡皮擦大小的 <a> 元素（类名为“size1”等），用于实现橡皮擦大小选择等功能 -->
+            <div class="sectionBar">
+                <div id="J_addImg" class="addImgH">
+                    <em class="icon"></em>
+                    <em class="text"><var id="lang_input_addPic"></var></em>
+                    <form method="post" id="fileForm" enctype="multipart/form-data" class="addImgH_form" target="up">
+                        <input type="file" name="upfile" id="J_imgTxt"
+                               accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" />
+                    </form>
+                    <iframe name="up" style="display: none"></iframe>
+                </div>
+            </div>
+            <!-- 创建一个用于添加图片相关操作的区域，包含图标（“icon”）、文本提示（“text”）以及一个 <form> 表单元素，表单中包含一个文件上传类型（type="file"）的输入框（id 为“J_imgTxt”），用于选择要上传的图片文件，并且设置了可接受的图片文件类型；同时设置表单的编码类型（enctype）为“multipart/form-data”，用于处理包含文件上传的表单数据，表单类名为“addImgH_form”（样式在“scrawl.css”中定义），还有一个隐藏的 <iframe> 元素（name="up"，用于实现无刷新文件上传等相关功能，通过设置为隐藏避免影响页面布局），整体用于实现添加图片到绘图区域等操作 -->
+            <div class="sectionBar">
+                <span id="J_removeImg" class="removeImg">
+                    <em class="icon"></em>
+                    <em class="text"><var id="lang_input_removePic"></var></em>
+                </span>
+            </div>
+            <!-- 创建一个代表“移除图片”操作按钮的 span 元素，id 为“J_removeImg”、类名为“removeImg”，包含图标和文本部分，用于触发从绘图区域移除图片等相关操作 -->
         </div>
     </div>
-</div>
+    <div id="J_maskLayer" class="maskLayerNull"></div>
-<div id="J_maskLayer" class="maskLayerNull"></div>
+    <!-- 创建一个 id 为“J_maskLayer”、类名为“maskLayerNull”的 div 元素，从类名推测它是用于显示遮罩层的元素，初始样式为不显示（在“scrawl.css”中定义为 display: none），可能在特定操作（如绘图过程中的提示、遮挡等情况）下通过 JavaScript 代码修改样式使其显示，用于遮罩相关的功能实现 -->
-
+</body>
 <script type="text/javascript" src="scrawl.js"></script>
+<!-- 引入外部的 JavaScript 文件（scrawl.js），这个文件大概率包含了与绘图、操作等功能紧密相关的业务逻辑代码，比如绘图功能实现、操作按钮的交互逻辑、图片处理等具体操作的函数实现 -->
 <script type="text/javascript">
     var settings = {
-        drawBrushSize:3, //画笔初始大小
+        drawBrushSize: 3, //画笔初始大小
-        drawBrushColor:"#4bacc6", //画笔初始颜色
+        drawBrushColor: "#4bacc6", //画笔初始颜色
-        colorList:['c00000', 'ff0000', 'ffc000', 'ffff00', '92d050', '00b050', '00b0f0', '0070c0', '002060', '7030a0', 'ffffff',
+        colorList: ['c00000', 'ff0000', 'ffc000', 'ffff00', '92d050', '00b050', '00b0f0', '0070c0', '002060', '7030a0', 'ffffff',
             '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646'], //画笔选择颜色
-        saveNum:10  //撤销次数
+        saveNum: 10  //撤销次数
     };
+    // 创建一个名为“settings”的对象，用于存储绘图相关的一些设置参数。其中“drawBrushSize”属性表示画笔的初始大小为 3（具体单位可能根据绘图逻辑确定，可能是像素等）；“drawBrushColor”属性设置画笔的初始颜色为“#4bacc6”（一种蓝色调的颜色值）；“colorList”属性是一个数组，包含了多个颜色代码字符串，用于提供可供选择的画笔颜色列表；“saveNum”属性表示可撤销操作的次数为 10，这些设置参数会影响绘图工具的初始状态和相关功能。
 
-    var scrawlObj = new scrawl( settings );
+    var scrawlObj = new scrawl(settings);
     scrawlObj.isCancelScrawl = false;
+    // 创建一个名为“scrawl”的类（假设在引入的“scrawl.js”文件中定义）的实例“scrawlObj”，并传入前面定义的“settings”对象作为参数，用于初始化绘图相关的功能和属性，然后将“scrawlObj”的“isCancelScrawl”属性初始设置为 false，这个属性可能用于控制绘图操作是否取消等相关逻辑（比如在对话框取消操作等场景下进行相应设置）。
 
     dialog.onok = function () {
-        exec( scrawlObj );
+        exec(scrawlObj);
         return false;
     };
+    // 将对话框（dialog，可能是页面上弹出的用于操作绘图相关内容的对话框，具体实现依赖相关代码环境）的“onok”事件（通常表示用户点击了对话框中的“确定”按钮）绑定到一个匿名函数上，当用户点击“确定”按钮时，调用“exec”函数（假设在“scrawl.js”或者其他相关文件中定义），并传入“scrawlObj”实例作为参数，用于执行绘图相关的最终操作（比如保存绘图结果、应用绘图修改等），最后返回 false，可能用于阻止对话框默认的后续操作或者根据业务逻辑进行相关的交互控制。
+
     dialog.oncancel = function () {
         scrawlObj.isCancelScrawl = true;
     };
+    // 将对话框的“oncancel”事件（通常表示用户点击了对话框中的“取消”按钮）绑定到一个匿名函数上，当用户点击“取消”按钮时，将“scrawlObj”实例的“isCancelScrawl”属性设置为 true，用于在取消操作时设置相应的绘图状态，可能会触发一些清理绘图缓存、恢复到之前状态等相关逻辑，具体功能依赖“scrawl”类及相关代码的实现。
 </script>
 </body>
 </html>

public2/ueditor/dialogs/scrawl/scrawl.js

@@ -1,74 +1,111 @@
-/**
+// 创建一个名为 `scrawl` 的函数，它接受一个 `options` 参数，用于初始化绘图相关的配置选项。
- * Created with JetBrains PhpStorm.
+// 如果传入了 `options` 参数，会调用 `this.initOptions(options)` 方法来进行初始化操作，这是面向对象编程中常见的构造函数初始化逻辑。
- * User: xuheng
- * Date: 12-5-22
- * Time: 上午11:38
- * To change this template use File | Settings | File Templates.
- */
 var scrawl = function (options) {
     options && this.initOptions(options);
 };
+
+// 立即执行函数，用于创建一些私有变量，并在 `scrawl` 函数的原型对象上定义一系列方法，实现绘图及相关操作的具体功能。
+// 这种方式可以将一些变量和逻辑封装在一个局部作用域内，避免全局变量污染，同时实现代码的模块化组织。
 (function () {
+    // 获取页面中 id 为 `J_brushBoard` 的 `<canvas>` 元素，它作为绘图的主要画布。
+    // 通过 `getContext('2d')` 方法获取该画布的 2D 绘图上下文，用于后续进行图形绘制等操作。
+    // 创建两个变量，`drawStep` 数组用于存储绘图操作的步骤数据（用于实现撤销、重做功能），`drawStepIndex` 用于记录当前操作步骤的索引位置，作为操作步骤的指针。
     var canvas = $G("J_brushBoard"),
         context = canvas.getContext('2d'),
-        drawStep = [], //undo redo存储
+        drawStep = [], //undo redo 存储
-        drawStepIndex = 0; //undo redo指针
+        drawStepIndex = 0; //undo redo 指针
 
+    // 在 `scrawl` 函数的原型对象上定义一系列属性和方法，这些属性和方法会被 `scrawl` 类的实例所继承，用于实现绘图工具的各种功能，如绘图、操作按钮响应、颜色选择等。
     scrawl.prototype = {
-        isScrawl:false, //是否涂鸦
+        // `isScrawl` 属性用于标记是否正在进行涂鸦操作，初始值为 `false`。
-        brushWidth:-1, //画笔粗细
+        isScrawl: false, //是否涂鸦
-        brushColor:"", //画笔颜色
+        // `brushWidth` 属性用于记录画笔的粗细，初始值为 `-1`，后续会根据配置或用户选择进行更新。
-
+        brushWidth: -1, //画笔粗细
-        initOptions:function (options) {
+        // `brushColor` 属性用于记录画笔的颜色，初始值为空字符串，同样会根据配置或操作进行相应设置。
+        brushColor: "", //画笔颜色
+
+        // `initOptions` 方法用于初始化绘图工具的各种配置和事件监听器，接受一个 `options` 参数，包含了绘图相关的各种设置选项。
+        initOptions: function (options) {
             var me = this;
-            me.originalState(options);//初始页面状态
+            // 调用 `originalState` 方法，根据传入的 `options` 初始化页面的初始状态，如画笔大小、颜色等。
-            me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
+            me.originalState(options);
-
+            // 调用 `_buildToolbarColor` 方法，根据传入的颜色列表 `options.colorList` 动态生成颜色选择区域的 HTML 结构，并添加到页面中相应的元素内。
-            me._addBoardListener(options.saveNum);//添加画板处理
+            me._buildToolbarColor(options.colorList);
-            me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
+
-            me._addColorBarListener();//添加颜色选择处理
+            // 调用 `_addBoardListener` 方法，添加对画板的各种鼠标事件监听器，用于处理绘图操作，传入可撤销操作的次数 `options.saveNum`，用于控制操作记录相关逻辑。
-            me._addBrushBarListener();//添加画笔大小处理
+            me._addBoardListener(options.saveNum);
-            me._addEraserBarListener();//添加橡皮大小处理
+            // 调用 `_addOPerateListener` 方法，添加对操作按钮（如撤销、重做、清除画板等按钮）的点击事件监听器，传入 `options.saveNum`，用于相关操作的逻辑处理。
-            me._addAddImgListener();//添加增添背景图片处理
+            me._addOPerateListener(options.saveNum);
-            me._addRemoveImgListenter();//删除背景图片处理
+            // 调用 `_addColorBarListener` 方法，添加对颜色选择区域的点击事件监听器，用于处理用户选择颜色的操作。
-            me._addScalePicListenter();//添加缩放处理
+            me._addColorBarListener();
-            me._addClearSelectionListenter();//添加清楚选中状态处理
+            // 调用 `_addBrushBarListener` 方法，添加对画笔大小选择区域的点击事件监听器，用于处理用户选择画笔大小的操作。
-
+            me._addBrushBarListener();
-            me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
+            // 调用 `_addEraserBarListener` 方法，添加对橡皮擦大小选择区域的点击事件监听器，用于处理用户选择橡皮擦大小的操作。
-            me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
+            me._addEraserBarListener();
-            me._clearSelection();//清楚选中状态
+            // 调用 `_addAddImgListener` 方法，添加对添加图片功能相关元素（如文件上传输入框）的事件监听器，用于处理添加背景图片的操作。
+            me._addAddImgListener();
+            // 调用 `_addRemoveImgListenter` 方法，添加对移除图片按钮的点击事件监听器，用于处理删除背景图片的操作。
+            me._addRemoveImgListenter();
+            // 调用 `_addScalePicListenter` 方法，添加对缩放图片按钮的点击事件监听器，用于处理图片缩放的操作。
+            me._addScalePicListenter();
+            // 调用 `_addClearSelectionListenter` 方法，添加对文档的鼠标移动事件监听器，用于清除选中状态，避免一些操作受选中内容的影响。
+            me._addClearSelectionListenter();
+
+            // 调用 `_originalColorSelect` 方法，根据传入的初始画笔颜色 `options.drawBrushColor`，初始化颜色选择区域中对应颜色的选中状态显示。
+            me._originalColorSelect(options.drawBrushColor);
+            // 调用 `_originalBrushSelect` 方法，根据传入的初始画笔大小 `options.drawBrushSize`，初始化画笔大小选择区域中对应大小的选中状态显示。
+            me._originalBrushSelect(options.drawBrushSize);
+            // 调用 `_clearSelection` 方法，清除页面中一些元素的可选中状态，避免误操作等情况。
+            me._clearSelection();
         },
 
-        originalState:function (options) {
+        // `originalState` 方法用于设置绘图的初始状态，根据传入的 `options` 参数来初始化画笔宽度、颜色以及画布的一些属性，如背景颜色、线条样式等。
+        originalState: function (options) {
             var me = this;
 
-            me.brushWidth = options.drawBrushSize;//同步画笔粗细
+            // 将当前对象的 `brushWidth` 属性设置为传入的 `options` 中的 `drawBrushSize` 值，实现画笔粗细的同步设置。
-            me.brushColor = options.drawBrushColor;//同步画笔颜色
+            me.brushWidth = options.drawBrushSize;
-
+            // 将当前对象的 `brushColor` 属性设置为传入的 `options` 中的 `drawBrushColor` 值，实现画笔颜色的同步设置。
-            context.lineWidth = me.brushWidth;//初始画笔大小
+            me.brushColor = options.drawBrushColor;
-            context.strokeStyle = me.brushColor;//初始画笔颜色
+
-            context.fillStyle = "transparent";//初始画布背景颜色
+            // 设置绘图上下文的线条宽度为当前对象的 `brushWidth` 值，确定初始画笔大小。
-            context.lineCap = "round";//去除锯齿
+            context.lineWidth = me.brushWidth;
+            // 设置绘图上下文的线条颜色为当前对象的 `brushColor` 值，确定初始画笔颜色。
+            context.strokeStyle = me.brushColor;
+            // 设置绘图上下文的填充颜色为透明（"transparent"），即画布初始背景为透明，可能后续会根据具体绘制情况进行填充或覆盖等操作。
+            context.fillStyle = "transparent";
+            // 设置绘图上下文的线条端点样式为圆形（"round"），用于去除绘制线条时的锯齿效果，使线条看起来更平滑。
+            context.lineCap = "round";
+            // 执行填充操作，由于填充颜色为透明，这里实际不会有可见的填充效果，但可能是为了确保一些默认设置生效或者后续有相关逻辑基于此操作。
             context.fill();
         },
-        _buildToolbarColor:function (colorList) {
+
+        // `_buildToolbarColor` 方法用于动态生成颜色选择区域的 HTML 结构，根据传入的颜色列表 `colorList` 创建一个表格形式的颜色块展示区域，并将其添加到页面中 id 为 `J_colorBar` 的元素内。
+        _buildToolbarColor: function (colorList) {
             var tmp = null, arr = [];
+            // 创建一个表格开始标签，并将其添加到 `arr` 数组中，用于构建颜色选择区域的整体 HTML 结构。
             arr.push("<table id='J_colorList'>");
+            // 循环遍历传入的 `colorList` 数组，每个元素代表一种颜色代码。
             for (var i = 0, color; color = colorList[i++];) {
+                // 每 5 个颜色块为一行，当是新的一行开头（索引减 1 后能被 5 整除且不是第一个颜色块时），添加一个表格行结束标签，并添加一个新的表格行开始标签。
                 if ((i - 1) % 5 == 0) {
-                    if (i != 1) {
+                    if (i!= 1) {
                         arr.push("</tr>");
                     }
                     arr.push("<tr>");
                 }
+                // 将颜色代码转换为完整的颜色值格式（添加 `#` 前缀），并创建一个包含该颜色作为背景色的 `<a>` 元素，用于表示一个颜色块，添加到 `arr` 数组中。
                 tmp = '#' + color;
                 arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
             }
+            // 添加表格行结束标签和表格结束标签，完成整个表格结构的构建。
             arr.push("</tr></table>");
+            // 将构建好的 HTML 结构通过设置页面中 `J_colorBar` 元素的 `innerHTML` 属性添加到页面中，实现颜色选择区域的展示。
             $G("J_colorBar").innerHTML = arr.join("");
         },
 
-        _addBoardListener:function (saveNum) {
+        // `_addBoardListener` 方法用于添加对画板（`<canvas>` 元素）的鼠标事件监听器，处理鼠标按下、移动、抬起和移出等操作，实现绘图功能以及操作步骤的记录，用于撤销、重做等功能实现。
+        _addBoardListener: function (saveNum) {
             var me = this,
                 margin = 0,
                 startX = -1,
@@ -78,12 +115,15 @@ var scrawl = function (options) {
                 isMouseUp = false,
                 buttonPress = 0, button, flag = '';
 
+            // 获取页面中 `J_wrap` 元素的左边距值（通过 `getComputedStyle` 方法获取计算后的样式属性值，并将其转换为整数类型），用于后续计算鼠标在画布上的实际坐标，考虑到元素的外边距等布局因素。
             margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
+            // 将当前画布的初始图像数据（通过 `getImageData` 方法获取整个画布的像素数据）添加到 `drawStep` 数组中，作为操作步骤记录的起始状态，同时将 `drawStepIndex` 加 1，表示操作步骤索引前进一位。
             drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
             drawStepIndex += 1;
 
+            // 使用 `domUtils`（可能是自定义的 DOM 操作工具对象，包含处理 DOM 事件绑定等功能的函数）的 `on` 方法，为 `canvas` 元素绑定多个鼠标事件（"mousedown"、"mousemove"、"mouseup"、"mouseout"）的监听器，在事件回调函数中根据不同的鼠标事件类型进行相应的绘图和操作记录处理。
             domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
-                button = browser.webkit ? e.which : buttonPress;
+                button = browser.webkit? e.which : buttonPress;
                 switch (e.type) {
                     case 'mousedown':
                         buttonPress = 1;
@@ -92,21 +132,23 @@ var scrawl = function (options) {
                         isMouseUp = false;
                         isMouseMove = false;
                         me.isScrawl = true;
-                        startX = e.clientX - margin;//10为外边距总和
+                        startX = e.clientX - margin;
                         startY = e.clientY - margin;
                         context.beginPath();
                         break;
-                    case 'mousemove' :
+                        // 当鼠标按下时，记录鼠标按钮状态，设置相关操作标记为 `true`，标记当前正在进行涂鸦操作，计算鼠标在画布上的起始坐标（考虑外边距因素），并开始一个新的绘图路径，为后续绘制线条做准备。
+
+                    case 'mousemove':
                         if (!flag && button == 0) {
                             return;
                         }
                         if (!flag && button) {
-                            startX = e.clientX - margin;//10为外边距总和
+                            startX = e.clientX - margin;
                             startY = e.clientY - margin;
                             context.beginPath();
                             flag = 1;
                         }
-                        if (isMouseUp || !isMouseDown) {
+                        if (isMouseUp ||!isMouseDown) {
                             return;
                         }
                         var endX = e.clientX - margin,
@@ -119,9 +161,12 @@ var scrawl = function (options) {
                         startY = endY;
                         isMouseMove = true;
                         break;
+                        // 当鼠标移动时，如果不符合某些条件（如未开始绘图或者鼠标按钮未按下等情况）则直接返回不做处理。
+                        // 如果是正常的绘图移动操作，计算鼠标当前位置坐标，将绘图路径移动到起始坐标位置，然后绘制一条从起始坐标到当前坐标的线条，并更新起始坐标为当前坐标，标记当前正在进行鼠标移动操作，用于后续判断是否绘制连续线条等情况。
+
                     case 'mouseup':
                         buttonPress = 0;
-                        if (!isMouseDown)return;
+                        if (!isMouseDown) return;
                         if (!isMouseMove) {
                             context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
                             context.fillStyle = context.strokeStyle;
@@ -135,17 +180,25 @@ var scrawl = function (options) {
                         startX = -1;
                         startY = -1;
                         break;
+                        // 当鼠标抬起时，重置鼠标按钮状态，如果未进行过鼠标按下操作则直接返回。
+                        // 如果鼠标按下后没有移动过（即只是点击操作），则在点击位置绘制一个填充的圆形（根据画笔宽度作为半径），填充颜色与画笔颜色相同。
+                        // 关闭当前绘图路径，调用 `_saveOPerate` 方法保存当前操作步骤（传入可撤销操作次数 `saveNum`），重置相关操作标记和起始坐标，完成一次绘图操作的记录。
+
                     case 'mouseout':
                         flag = '';
                         buttonPress = 0;
                         if (button == 1) return;
                         context.closePath();
                         break;
+                        // 当鼠标移出画布区域时，重置相关操作标记和鼠标按钮状态，如果鼠标右键按下则直接返回，关闭当前绘图路径，避免出现一些异常的绘图状态。
                 }
             });
         },
-        _addOPerateListener:function (saveNum) {
+
+        // `_addOPerateListener` 方法用于添加对操作按钮（如撤销、重做、清除画板等按钮）的点击事件监听器，根据不同按钮的点击操作执行相应的绘图状态修改、操作步骤处理等功能。
+        _addOPerateListener: function (saveNum) {
             var me = this;
+            // 为页面中 id 为 `J_previousStep` 的元素（可能是“上一步”操作按钮）添加点击事件监听器，当点击该按钮时，执行撤销操作相关的逻辑。
             domUtils.on($G("J_previousStep"), "click", function () {
                 if (drawStepIndex > 1) {
                     drawStepIndex -= 1;
@@ -155,6 +208,9 @@ var scrawl = function (options) {
                     drawStepIndex == 1 && me.btn2disable("J_previousStep");
                 }
             });
+            // 如果当前操作步骤索引大于 1（表示有可撤销的操作步骤），则将操作步骤索引减 1，清空整个画布内容（通过 `clearRect` 方法），然后将上一步的图像数据（通过 `putImageData` 方法）绘制到画布上，实现撤销操作；同时将“下一步”按钮设置为可点击状态（通过 `btn2Highlight` 方法），如果操作步骤索引回到了 1，则将“上一步”按钮设置为不可点击状态（通过 `btn2disable` 方法）。
+
+            // 为页面中 id 为 `J_nextStep` 的元素（可能是“下一步”操作按钮）添加点击事件监听器，当点击该按钮时，执行重做操作相关的逻辑。
             domUtils.on($G("J_nextStep"), "click", function () {
                 if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
                     context.clearRect(0, 0, context.canvas.width, context.canvas.height);
@@ -164,6 +220,9 @@ var scrawl = function (options) {
                     drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
                 }
             });
+            // 如果当前操作步骤索引大于 0 且小于总操作步骤数（表示有可重做的操作步骤），则清空整个画布内容，将当前步骤对应的图像数据绘制到画布上，实现重做操作；同时将“上一步”按钮设置为可点击状态，当操作步骤索引达到总步骤数时，将“下一步”按钮设置为不可点击状态。
+
+            // 为页面中 id 为 `J_clearBoard` 的元素（可能是“清除画板”操作按钮）添加点击事件监听器，当点击该按钮时，执行清除画板的操作以及相关的状态重置逻辑。
             domUtils.on($G("J_clearBoard"), "click", function () {
                 context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                 drawStep = [];

public2/ueditor/dialogs/searchreplace/searchreplace.html

@@ -1,102 +1,160 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
     <title></title>
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <!-- 此处页面标题为空，通常可以设置一个有意义的标题，使其显示在浏览器的标题栏中 -->
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    <!-- 通过 HTTP 头部等价属性（http-equiv）设置页面的内容类型为 HTML 文本格式，字符编码为 UTF-8，确保页面能正确显示各种字符 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入相对路径为“../internal.js”的 JavaScript 文件，该文件可能包含了页面中通用的函数、变量定义以及一些基础的业务逻辑代码等，具体功能依赖其内部实现 -->
     <style type="text/css">
-        .warpper{ position:relative;width: 380px; height: 100%; margin: 10px auto;}
+        .warpper {
-        .tabbody{height: 160px;}
+            position: relative;
-        .tabbody table{width:100%;border-collapse: separate;border-spacing: 3px;}
+            width: 380px;
-        .tabbody .panel{width:373px;height:100%;padding-left: 5px;position: absolute;background-color: #fff;}
+            height: 100%;
-        .tabbody input.int{ width:190px;height:21px;border:1px solid #d7d7d7;line-height:21px;}
+            margin: 10px auto;
-        .tabbody input.btn{padding: 0 5px; text-align:center;line-height:24px; text-decoration: none;height:24px;background:url("../../themes/default/images/dialog-title-bg.png") repeat-x;border:1px solid #ccc; }
+        }
+        /* 定义一个名为 '.warpper' 的类选择器样式，设置元素的定位方式为相对定位（position: relative），方便其内部的绝对定位元素进行布局参照；设置宽度为 380 像素，高度为 100%（通常会占满父元素的高度，这里可能是占满 body 元素的可视高度）；设置外边距为上下 10 像素，左右自动（auto，使元素在水平方向上居中对齐），用于控制该元素在页面中的位置和大小，从类名推测它可能是整个搜索替换功能模块的外层包裹容器 */
+        .tabbody {
+            height: 160px;
+        }
+            /* 定义一个名为 '.tabbody' 的类选择器样式，设置元素的高度为 160 像素，从类名和后续结构推测它可能是用于放置搜索和替换相关操作表单等内容的区域 */
+            .tabbody table {
+                width: 100%;
+                border-collapse: separate;
+                border-spacing: 3px;
+            }
+            /* 针对类名为 '.tabbody' 内部的表格（table 元素）设置样式，将表格宽度设置为 100%，使其占满父元素的宽度；设置边框合并方式为分离（border-collapse: separate），表示边框之间会有间隔；设置边框间距为 3 像素（border-spacing: 3px），使表格单元格之间有一定的空白间隔，增强表格的可读性和布局美观度 */
+            .tabbody.panel {
+                width: 373px;
+                height: 100%;
+                padding-left: 5px;
+                position: absolute;
+                background-color: #fff;
+            }
+            /* 针对类名为 '.tabbody' 内部的类名为 '.panel' 的元素设置样式，设置宽度为 373 像素，高度为 100%（通常占满父元素的高度，这里就是 '.tabbody' 元素的高度或者根据自身定位情况占满相应的空间）；设置左边距为 5 像素的内边距（padding-left: 5px）；设置定位方式为绝对定位（position: absolute），会相对于最近的已定位祖先元素进行定位，常用于在特定区域内精确布局元素；设置背景颜色为白色（#fff），从后续结构推测它可能是用于放置具体搜索或替换操作相关表单元素的面板容器，通过绝对定位可以方便地切换显示不同的面板 */
+            .tabbody input.int {
+                width: 190px;
+                height: 21px;
+                border: 1px solid #d7d7d7;
+                line-height: 21px;
+            }
+            /* 针对类名为 '.tabbody' 内部的类名为 'int' 的输入框（input 元素）设置样式，设置宽度为 190 像素，高度为 21 像素，确定输入框的尺寸大小；设置边框为 1 像素宽的浅灰色（#d7d7d7）实线；设置行高为 21 像素（line-height: 21px），通常用于垂直方向上文本在输入框内的对齐等情况，从类名推测这些输入框可能是用于输入一些常规文本信息的输入框样式 */
+            .tabbody input.btn {
+                padding: 0 5px;
+                text-align: center;
+                line-height: 24px;
+                text-decoration: none;
+                height: 24px;
+                background: url("../../themes/default/images/dialog-title-bg.png") repeat-x;
+                border: 1px solid #ccc;
+            }
+        /* 针对类名为 '.tabbody' 内部的类名为 'btn' 的输入框（input 元素，从类型推测可能是按钮类型，比如提交按钮等）设置样式，设置上下内边距为 0，左右内边距为 5 像素（padding: 0 5px），用于控制按钮内部文本与边框的间隔；设置文本水平居中对齐（text-align: center）和行高为 24 像素（line-height: 24px），使按钮文本在垂直和水平方向上都能较好地居中显示；去除文本的下划线装饰（text-decoration: none）；设置高度为 24 像素；设置背景图片为指定路径下的图片文件（"../../themes/default/images/dialog-title-bg.png"）并进行水平重复平铺（repeat-x），用于创建具有特定背景样式的按钮；设置边框为 1 像素宽的灰色（#ccc）实线，整体定义了按钮的外观样式 */
     </style>
 </head>
 <body>
-<div class="warpper" id="searchtab">
+    <div class="warpper" id="searchtab">
-    <div id="head" class="tabhead">
+        <!-- 创建一个类名为 'warpper' 且 id 为'searchtab' 的 div 容器，应用了前面定义的 '.warpper' 类样式，作为整个搜索替换功能模块的外层包裹元素，id 可用于在 JavaScript 代码中方便地获取该元素进行操作 -->
-        <span  tabsrc="find" class="focus"><var id="lang_tab_search"></var></span>
+        <div id="head" class="tabhead">
-        <span  tabsrc="replace" ><var id="lang_tab_replace"></var></span>
+            <!-- 创建一个 id 为 'head'、类名为 'tabhead' 的 div 容器，从类名推测它可能是用于放置选项卡头部相关元素的区域，后续结构显示它包含了用于切换搜索和替换功能的选项卡标签 -->
-    </div>
+            <span tabsrc="find" class="focus"><var id="lang_tab_search"></var></span>
-    <div class="tabbody">
+            <!-- 创建一个 span 元素，设置了一个自定义属性 'tabsrc' 值为 'find'，并应用了 'focus' 类（可能用于表示当前选中状态的样式，具体样式在 CSS 中定义或者通过 JavaScript 动态添加），内部嵌套一个带有特定 id（'lang_tab_search'）的 <var> 元素，从属性和结构推测这个 span 元素代表“搜索”选项卡标签，文本内容可能通过 JavaScript 动态设置或者根据页面语言等相关配置来显示对应的文字描述 -->
-        <div class="panel" id="find">
+            <span tabsrc="replace"><var id="lang_tab_replace"></var></span>
-            <table>
+            <!-- 与“搜索”选项卡标签类似，创建一个代表“替换”选项卡标签的 span 元素，'tabsrc' 属性值为'replace'，内部嵌套 <var> 元素（id 为 'lang_tab_replace'），用于显示“替换”相关的文字描述，初始状态未应用 'focus' 类，可能表示非当前选中状态 -->
-                <tr>
-                    <td width="80"><var id="lang_search1"></var>: </td>
-                    <td><input id="findtxt" type="text" class="int" /></td>
-                </tr>
-                <!--<tr>-->
-
-                    <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg"></var></span></td>-->
-                <!--</tr>-->
-                <tr>
-                    <td><var id="lang_case_sensitive1"></var></td>
-                    <td>
-                        <input id="matchCase" type="checkbox" />
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <input id="nextFindBtn" type="button" class="btn" />
-                        <input id="preFindBtn" type="button" class="btn" />
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        &nbsp;
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2">
-                        <span id="search-msg" style="color:red"></span>
-                    </td>
-                </tr>
-            </table>
         </div>
-        <div class="panel" id="replace">
+        <div class="tabbody">
-            <table>
+            <!-- 创建一个类名为 'tabbody' 的 div 容器，应用了前面定义的 '.tabbody' 类样式，作为放置搜索和替换相关操作表单等内容的区域 -->
-                <tr>
+            <div class="panel" id="find">
-                    <td width="80"><var id="lang_search2"></var>: </td>
+                <!-- 创建一个类名为 'panel' 且 id 为 'find' 的 div 容器，应用了 '.panel' 类样式并通过 id 区分不同的面板，这个是用于“搜索”功能相关表单元素的面板容器，通过绝对定位等方式可实现与“替换”面板的切换显示 -->
-                    <td><input id="findtxt1" type="text" class="int"  /></td>
+                <table>
-                </tr>
+                    <tr>
-                <!--<tr>-->
+                        <td width="80"><var id="lang_search1"></var>: </td>
-
+                        <td><input id="findtxt" type="text" class="int" /></td>
+                    </tr>
+                    <!-- 创建一个表格行（tr 元素），包含两个单元格（td 元素）。第一个单元格设置宽度为 80 像素，并嵌套一个带有特定 id（'lang_search1'）的 <var> 元素，用于显示“搜索”相关的提示文字（如“查找内容”等），后面跟着一个冒号；第二个单元格包含一个 id 为 'findtxt'、类名为 'int' 的文本输入框（input 元素），用于用户输入要查找的内容，应用了前面定义的 '.int' 类样式，确定输入框的外观样式 -->
+                    <!--<tr>-->
+                    <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg"></var></span></td>-->
+                    <!--</tr>-->
+                    <!-- 这部分是被注释掉的代码，从结构和变量名推测可能原本是用于显示与搜索内容是否为正则表达式相关的提示信息（设置为红色字体，通过 <span> 元素包裹 <var> 元素来显示相应文字），但目前未在页面上生效，可能是功能暂未启用或者后续有添加相关逻辑的计划 -->
+                    <tr>
+                        <td><var id="lang_case_sensitive1"></var></td>
+                        <td>
+                            <input id="matchCase" type="checkbox" />
+                        </td>
+                    </tr>
+                    <!-- 创建一个表格行，第一个单元格包含一个带有特定 id（'lang_case_sensitive1'）的 <var> 元素，用于显示与大小写敏感相关的提示文字（如“区分大小写”等）；第二个单元格包含一个 id 为'matchCase' 的复选框（input 元素，类型为 'checkbox'），用于用户选择查找操作是否区分大小写 -->
+                    <tr>
+                        <td colspan="2">
+                            <input id="nextFindBtn" type="button" class="btn" />
+                            <input id="preFindBtn" type="button" class="btn" />
+                        </td>
+                    </tr>
+                    <!-- 创建一个表格行，通过 'colspan="2"' 将单元格合并为一个跨两列的单元格，里面包含两个 id 分别为 'nextFindBtn' 和 'preFindBtn'、类名为 'btn' 的按钮（input 元素，类型为 'button'），从 id 和类名推测这两个按钮可能分别用于执行“下一个查找”和“上一个查找”的操作，应用了前面定义的 '.btn' 类样式，具有相应的按钮外观 -->
+                    <tr>
+                        <td colspan="2">
+                            &nbsp;
+                        </td>
+                    </tr>
+                    <!-- 创建一个空的表格行，里面只有一个空格字符实体（&nbsp;），可能用于在表格布局中增加一些空白间隔，使页面布局看起来更规整 -->
+                    <tr>
+                        <td colspan="2">
+                            <span id="search-msg" style="color:red"></span>
+                        </td>
+                    </tr>
+                    <!-- 创建一个表格行，通过 'colspan="2"' 将单元格合并为一个跨两列的单元格，里面包含一个 id 为'search-msg'、设置颜色为红色（style="color:red"）的 <span> 元素，从 id 和样式推测它可能用于显示查找操作过程中的一些提示信息（如未找到内容等错误提示），初始为空内容，后续通过 JavaScript 动态设置文本内容 -->
+                </table>
+            </div>
+            <div class="panel" id="replace">
+                <!-- 创建一个类名为 'panel' 且 id 为'replace' 的 div 容器，与前面的 'find' 面板类似，这个是用于“替换”功能相关表单元素的面板容器 -->
+                <table>
+                    <tr>
+                        <td width="80"><var id="lang_search2"></var>: </td>
+                        <td><input id="findtxt1" type="text" class="int" /></td>
+                    </tr>
+                    <!-- 创建一个表格行，第一个单元格设置宽度为 80 像素，并嵌套一个带有特定 id（'lang_search2'）的 <var> 元素，用于显示与“替换”相关的查找内容提示文字（如“查找内容”等），后面跟着一个冒号；第二个单元格包含一个 id 为 'findtxt1'、类名为 'int' 的文本输入框，用于用户输入要查找的内容，以便进行替换操作，应用了 '.int' 类样式 -->
+                    <!--<tr>-->
                     <!--<td colspan="2"><span style="color:red"><var id="lang_searchReg1"></var></span></td>-->
-                <!--</tr>-->
+                    <!--</tr>-->
-                <tr>
+                    <!-- 这部分同样是被注释掉的代码，推测可能与前面类似是用于显示与替换内容是否为正则表达式相关的提示信息，但目前未生效 -->
-                    <td><var id="lang_replace"></var>: </td>
+                    <tr>
-                    <td><input id="replacetxt" type="text" class="int" /></td>
+                        <td><var id="lang_replace"></var>: </td>
-                </tr>
+                        <td><input id="replacetxt" type="text" class="int" /></td>
-                <tr>
+                    </tr>
-                    <td><var id="lang_case_sensitive2"></var></td>
+                    <!-- 创建一个表格行，第一个单元格包含一个带有特定 id（'lang_replace'）的 <var> 元素，用于显示“替换为”相关的提示文字；第二个单元格包含一个 id 为'replacetxt'、类名为 'int' 的文本输入框，用于用户输入要替换成的内容，应用了 '.int' 类样式 -->
-                    <td>
+                    <tr>
-                        <input id="matchCase1" type="checkbox" />
+                        <td><var id="lang_case_sensitive2"></var></td>
-                    </td>
+                        <td>
-                </tr>
+                            <input id="matchCase1" type="checkbox" />
-                <tr>
+                        </td>
-                    <td colspan="2">
+                    </tr>
-                        <input id="nextReplaceBtn" type="button" class="btn" />
+                    <!-- 创建一个表格行，第一个单元格包含一个带有特定 id（'lang_case_sensitive2'）的 <var> 元素，用于显示与替换操作大小写敏感相关的提示文字；第二个单元格包含一个 id 为'matchCase1' 的复选框，用于用户选择替换操作是否区分大小写 -->
-                        <input id="preReplaceBtn" type="button" class="btn" />
+                    <tr>
-                        <input id="repalceBtn" type="button" class="btn" />
+                        <td colspan="2">
-                        <input id="repalceAllBtn" type="button" class="btn" />
+                            <input id="nextReplaceBtn" type="button" class="btn" />
-                    </td>
+                            <input id="preReplaceBtn" type="button" class="btn" />
-                </tr>
+                            <input id="repalceBtn" type="button" class="btn" />
-                <tr>
+                            <input id="repalceAllBtn" type="button" class="btn" />
-                    <td colspan="2">
+                        </td>
-                        &nbsp;
+                    </tr>
-                    </td>
+                    <!-- 创建一个表格行，通过 'colspan="2"' 将单元格合并为一个跨两列的单元格，里面包含四个 id 分别为 'nextReplaceBtn'、'preReplaceBtn'、'repalceBtn'、'repalceAllBtn'、类名为 'btn' 的按钮，从 id 推测这些按钮可能分别用于执行“下一个替换”、“上一个替换”、“替换”、“全部替换”等操作，应用了 '.btn' 类样式 -->
-                </tr>
+                    <tr>
-                <tr>
+                        <td colspan="2">
-                    <td colspan="2">
+                            &nbsp;
-                        <span id="replace-msg" style="color:red"></span>
+                        </td>
-                    </td>
+                    </tr>
-                </tr>
+                    <!-- 创建一个空的表格行，里面只有一个空格字符实体，用于增加表格布局的空白间隔 -->
-            </table>
+                    <tr>
+                        <td colspan="2">
+                            <span id="replace-msg" style="color:red"></span>
+                        </td>
+                    </tr>
+                    <!-- 创建一个表格行，通过 'colspan="2"' 将单元格合并为一个跨两列的单元格，里面包含一个 id 为'replace-msg'、颜色为红色的 <span> 元素，用于显示替换操作过程中的提示信息（如替换成功、失败等相关提示），初始为空内容，后续通过 JavaScript 动态设置 -->
+                </table>
+            </div>
         </div>
     </div>
-</div>
+    <script type="text/javascript" src="searchreplace.js"></script>
-<script type="text/javascript" src="searchreplace.js"></script>
+    <!-- 引入外部的 JavaScript 文件（searchreplace.js），这个文件大概率包含了与搜索和替换功能紧密相关的业务逻辑代码，比如选项卡切换逻辑、按钮点击事件处理、查找替换算法实现等具体操作的函数实现 -->
 </body>
 </html>

public2/ueditor/dialogs/searchreplace/searchreplace.js

@@ -6,119 +6,149 @@
  * To change this template use File | Settings | File Templates.
  */
 
-//清空上次查选的痕迹
+// 清空上次查找选择的痕迹相关变量设置
+// 将 `editor` 对象（可能是整个编辑器相关的全局对象，包含了编辑器的各种状态和操作方法等）的 `firstForSR` 属性设置为 0，这个属性可能用于记录查找操作的起始相关状态，重置为初始值表示清除上次查找的起始相关痕迹。
+// 将 `editor` 对象的 `currentRangeForSR` 属性设置为 `null`，该属性可能用于记录当前查找操作涉及的文本范围相关信息，设置为 `null` 即清除上次查找操作对应的文本范围记录。
 editor.firstForSR = 0;
 editor.currentRangeForSR = null;
-//给tab注册切换事件
+
-/**
+// 给选项卡（tab）注册切换事件相关的函数定义及逻辑实现部分
- * tab点击处理事件
+
- * @param tabHeads
+// `clickHandler` 函数用于处理选项卡头部标签的点击事件，实现切换选项卡时的样式更改以及对应内容面板的显示隐藏切换功能。
- * @param tabBodys
+// 接受三个参数：`tabHeads` 是包含所有选项卡头部标签元素的数组，`tabBodys` 是包含所有对应内容面板元素的数组，`obj` 是当前被点击的选项卡头部标签元素。
- * @param obj
+function clickHandler(tabHeads, tabBodys, obj) {
- */
+    // 遍历所有的选项卡头部标签元素，将它们的类名（className）清空，用于去除之前可能存在的表示选中状态等的类样式，为重新设置选中样式做准备。
-function clickHandler( tabHeads,tabBodys,obj ) {
+    for (var k = 0, len = tabHeads.length; k < len; k++) {
-    //head样式更改
-    for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
         tabHeads[k].className = "";
     }
+    // 将当前被点击的选项卡头部标签元素（`obj`）设置为 'focus' 类名，通过 CSS 中对 'focus' 类的样式定义（可能是设置不同的背景色、字体颜色等样式来突出显示当前选中的选项卡）来体现当前选项卡处于选中状态。
     obj.className = "focus";
-    //body显隐
+
-    var tabSrc = obj.getAttribute( "tabSrc" );
+    // 处理选项卡对应内容面板的显示隐藏切换逻辑。
-    for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
+    var tabSrc = obj.getAttribute("tabSrc");
+    for (var j = 0, length = tabBodys.length; j < length; j++) {
         var body = tabBodys[j],
-            id = body.getAttribute( "id" );
+            id = body.getAttribute("id");
-        if ( id != tabSrc ) {
+        // 如果当前内容面板的 `id` 与被点击选项卡头部标签元素的 `tabSrc` 属性值不相等，说明不是当前要显示的面板，则将其 `z-index` 设置为 1（通过 `z-index` 控制元素在页面中的堆叠顺序，较低的值表示在更下层，可能会被上层元素遮挡），使其处于隐藏或者靠后的显示层级。
+        if (id!= tabSrc) {
             body.style.zIndex = 1;
         } else {
+            // 如果 `id` 与 `tabSrc` 属性值相等，说明是当前要显示的面板，则将其 `z-index` 设置为 200，使其处于较高的显示层级，显示在最上层，实现显示当前选中选项卡对应的内容面板，隐藏其他面板的效果。
             body.style.zIndex = 200;
         }
     }
-
 }
 
-/**
+// `switchTab` 函数用于实现整个选项卡切换的功能，通过查找页面中指定 `tabParentId` 对应的父元素及其子元素，为每个选项卡头部标签添加点击事件监听器，在点击时调用 `clickHandler` 函数来完成切换操作。
- * TAB切换
+// 接受一个参数 `tabParentId`，它可以是选项卡的父节点的 `ID`，也可以直接是选项卡所在的父节点对象本身，用于定位到包含选项卡头部和内容面板的父元素。
- * @param tabParentId  tab的父节点ID或者对象本身
+function switchTab(tabParentId) {
- */
+    // 通过 `$G` 函数（可能是自定义的用于获取页面元素的函数，根据传入的 `ID` 或者对象本身来获取对应的 DOM 元素）获取指定 `tabParentId` 的子元素数组，假设第一个子元素包含选项卡头部标签，第二个子元素包含对应的内容面板元素。
-function switchTab( tabParentId ) {
+    var tabElements = $G(tabParentId).children,
-    var tabElements = $G( tabParentId ).children,
         tabHeads = tabElements[0].children,
         tabBodys = tabElements[1].children;
 
-    for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
+    for (var i = 0, length = tabHeads.length; i < length; i++) {
         var head = tabHeads[i];
-        if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
+        // 如果当前选项卡头部标签已经有 'focus' 类名（表示当前处于选中状态），则直接调用 `clickHandler` 函数进行一次初始化的切换操作设置，确保页面加载时当前选中的选项卡对应的样式和面板显示是正确的。
+        if (head.className === "focus") clickHandler(tabHeads, tabBodys, head);
+        // 为每个选项卡头部标签添加点击事件监听器，当点击某个选项卡头部标签时，调用 `clickHandler` 函数，并传入对应的 `tabHeads`、`tabBodys` 和当前点击的标签元素（`this`）作为参数，实现选项卡的切换操作逻辑。
         head.onclick = function () {
-            clickHandler(tabHeads,tabBodys,this);
+            clickHandler(tabHeads, tabBodys, this);
         }
     }
 }
-$G('searchtab').onmousedown = function(){
+
+// 为页面中 `id` 为 `searchtab` 的元素添加鼠标按下事件监听器，当在该元素上按下鼠标时，清空页面中 `id` 为 `search-msg` 和 `replace-msg` 的元素的内容（innerHTML）。
+// 推测 `search-msg` 和 `replace-msg` 元素是用于显示查找和替换操作相关提示信息的区域，通过清空它们的内容，实现清除之前可能存在的提示信息，为下一次操作显示新的提示做准备。
+$G('searchtab').onmousedown = function () {
     $G('search-msg').innerHTML = '';
     $G('replace-msg').innerHTML = ''
 }
-//是否区分大小写
+
+// `getMatchCase` 函数用于获取指定 `id` 对应的复选框元素的选中状态，返回一个布尔值，表示是否选中。
+// 接受一个参数 `id`，即要获取选中状态的复选框元素的 `ID`，通过 `$G` 函数获取该元素，然后判断其 `checked` 属性（复选框的选中状态属性，`true` 表示选中，`false` 表示未选中），并返回对应的布尔值。
 function getMatchCase(id) {
-    return $G(id).checked ? true : false;
+    return $G(id).checked? true : false;
 }
-//查找
+
+// 以下是各个操作按钮的点击事件处理函数，分别对应不同的查找、替换操作逻辑
+
+// “下一个查找”按钮（`id` 为 `nextFindBtn`）的点击事件处理函数
+// 点击该按钮时，获取页面中 `id` 为 `findtxt` 的输入框中的值作为要查找的字符串，如果该值为空（即用户未输入查找内容），则直接返回 `false`，不执行后续查找操作。
+// 然后创建一个包含查找字符串、查找方向（这里设置为 1，可能表示正向查找，具体含义依赖业务逻辑定义）以及是否区分大小写（通过调用 `getMatchCase` 函数获取 `matchCase` 复选框的选中状态来确定）等信息的对象 `obj`，并将其作为参数传递给 `frCommond` 函数来执行实际的查找操作。
+// 如果 `frCommond` 函数返回 `false`（表示查找失败或者未找到匹配内容等情况），则创建一个书签（bookmark，可能用于记录当前文本选择的位置信息，方便后续恢复位置等操作），在页面中 `id` 为 `search-msg` 的元素内显示 `lang.getEnd`（可能是预定义的表示查找结束等相关提示信息的字符串，具体内容依赖语言配置等情况），并将文本选择范围移动到书签位置并选中该范围（可能用于突出显示查找的起始位置等情况）。
 $G("nextFindBtn").onclick = function (txt, dir, mcase) {
     var findtxt = $G("findtxt").value, obj;
     if (!findtxt) {
         return false;
     }
     obj = {
-        searchStr:findtxt,
+        searchStr: findtxt,
-        dir:1,
+        dir: 1,
-        casesensitive:getMatchCase("matchCase")
+        casesensitive: getMatchCase("matchCase")
     };
     if (!frCommond(obj)) {
         var bk = editor.selection.getRange().createBookmark();
         $G('search-msg').innerHTML = lang.getEnd;
         editor.selection.getRange().moveToBookmark(bk).select();
-
-
     }
 };
+
+// “下一个替换”按钮（`id` 为 `nextReplaceBtn`）的点击事件处理函数
+// 点击该按钮时，获取页面中 `id` 为 `findtxt1` 的输入框中的值作为要查找的字符串，如果该值为空则返回 `false`，不执行后续操作。
+// 创建一个包含查找字符串、查找方向（设置为 1，可能表示正向查找）以及是否区分大小写（通过 `getMatchCase` 函数获取 `matchCase1` 复选框的选中状态确定）等信息的对象 `obj`，并传递给 `frCommond` 函数执行实际的替换相关操作（具体替换逻辑在 `frCommond` 函数内部或者依赖其调用的其他函数实现）。
 $G("nextReplaceBtn").onclick = function (txt, dir, mcase) {
     var findtxt = $G("findtxt1").value, obj;
     if (!findtxt) {
         return false;
     }
     obj = {
-        searchStr:findtxt,
+        searchStr: findtxt,
-        dir:1,
+        dir: 1,
-        casesensitive:getMatchCase("matchCase1")
+        casesensitive: getMatchCase("matchCase1")
     };
     frCommond(obj);
 };
+
+// “上一个查找”按钮（`id` 为 `preFindBtn`）的点击事件处理函数
+// 与“下一个查找”按钮逻辑类似，获取 `findtxt` 输入框的值作为查找字符串，为空则返回 `false`。
+// 创建包含查找字符串、查找方向（设置为 -1，可能表示反向查找）以及是否区分大小写信息的对象 `obj`，传递给 `frCommond` 函数执行查找操作，如果查找失败（`frCommond` 函数返回 `false`），则在 `search-msg` 元素内显示 `lang.getStart`（可能是表示查找起始等相关提示信息的字符串）。
 $G("preFindBtn").onclick = function (txt, dir, mcase) {
     var findtxt = $G("findtxt").value, obj;
     if (!findtxt) {
         return false;
     }
     obj = {
-        searchStr:findtxt,
+        searchStr: findtxt,
-        dir:-1,
+        dir: -1,
-        casesensitive:getMatchCase("matchCase")
+        casesensitive: getMatchCase("matchCase")
     };
     if (!frCommond(obj)) {
         $G('search-msg').innerHTML = lang.getStart;
     }
-};
+}
+
+// “上一个替换”按钮（`id` 为 `preReplaceBtn`）的点击事件处理函数
+// 类似“下一个替换”按钮逻辑，获取 `findtxt1` 输入框的值作为查找字符串，为空则返回 `false`，创建相应对象并传递给 `frCommond` 函数执行替换相关操作。
 $G("preReplaceBtn").onclick = function (txt, dir, mcase) {
     var findtxt = $G("findtxt1").value, obj;
     if (!findtxt) {
         return false;
     }
     obj = {
-        searchStr:findtxt,
+        searchStr: findtxt,
-        dir:-1,
+        dir: -1,
-        casesensitive:getMatchCase("matchCase1")
+        casesensitive: getMatchCase("matchCase1")
     };
     frCommond(obj);
-};
+}
-//替换
+
+// “替换”按钮（`id` 为 `repalceBtn`）的点击事件处理函数
+// 点击该按钮时，首先触发编辑器（`editor`）的 `clearLastSearchResult` 事件（可能用于清除上次查找替换操作留下的一些结果相关状态，比如之前选中的文本范围等，确保本次操作不受上次影响）。
+// 获取 `findtxt1` 和 `replacetxt` 输入框的值，分别作为要查找和替换成的字符串，并去除字符串两端的空白字符（通过正则表达式 `/^\s|\s$/g` 进行匹配替换）。
+// 如果要查找的字符串为空则返回 `false`，不执行替换操作。
+// 接着判断要查找和替换的字符串是否相等（包括不区分大小写情况下相等，通过 `toLowerCase` 方法将字符串转换为小写后进行比较），如果相等也返回 `false`，不进行无意义的替换操作。
+// 最后创建一个包含查找字符串、查找方向（设置为 1）、是否区分大小写以及替换字符串等信息的对象 `obj`，并传递给 `frCommond` 函数执行实际的替换操作。
 $G("repalceBtn").onclick = function () {
     editor.trigger('clearLastSearchResult');
     var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,
@@ -130,14 +160,18 @@ $G("repalceBtn").onclick = function () {
         return false;
     }
     obj = {
-        searchStr:findtxt,
+        searchStr: findtxt,
-        dir:1,
+        dir: 1,
-        casesensitive:getMatchCase("matchCase1"),
+        casesensitive: getMatchCase("matchCase1"),
-        replaceStr:replacetxt
+        replaceStr: replacetxt
     };
     frCommond(obj);
-};
+}
-//全部替换
+
+// “全部替换”按钮（`id` 为 `repalceAllBtn`）的点击事件处理函数
+// 与“替换”按钮类似，获取 `findtxt1` 和 `replacetxt` 输入框的值并去除两端空白字符，为空则返回 `false`，判断两者相等情况（包括不区分大小写相等情况），相等则返回 `false`，不执行操作。
+// 创建一个包含查找字符串、是否区分大小写、替换字符串以及 `all` 属性设置为 `true`（表示执行全部替换操作，区别于单个替换）的对象 `obj`，传递给 `frCommond` 函数执行全部替换操作，获取返回的替换次数 `num`（如果替换成功，`frCommond` 函数可能返回替换的次数）。
+// 如果 `num` 有值（即替换次数大于 0，表示有进行替换操作），则在页面中 `replace-msg` 元素内显示替换次数相关的提示信息，通过 `lang.countMsg.replace` 方法（可能是根据预定义的字符串模板，将其中的 `{#count}` 占位符替换为实际的替换次数 `num`）来生成具体的提示内容，向用户展示替换的结果情况。
 $G("repalceAllBtn").onclick = function () {
     var findtxt = $G("findtxt1").value.replace(/^\s|\s$/g, ""), obj,
         replacetxt = $G("replacetxt").value.replace(/^\s|\s$/g, "");
@@ -148,23 +182,26 @@ $G("repalceAllBtn").onclick = function () {
         return false;
     }
     obj = {
-        searchStr:findtxt,
+        searchStr: findtxt,
-        casesensitive:getMatchCase("matchCase1"),
+        casesensitive: getMatchCase("matchCase1"),
-        replaceStr:replacetxt,
+        replaceStr: replacetxt,
-        all:true
+        all: true
     };
     var num = frCommond(obj);
     if (num) {
         $G('replace-msg').innerHTML = lang.countMsg.replace("{#count}", num);
     }
-};
+}
-//执行
+
+// `frCommond` 函数用于执行实际的查找替换命令，它接受一个对象参数 `obj`（包含查找替换相关的各种信息，如查找字符串、替换字符串、是否区分大小写、查找方向等），并调用 `editor` 对象的 `execCommand` 方法（可能是编辑器提供的用于执行各种命令操作的接口函数），传入 `searchreplace` 命令和 `obj` 参数，将实际的查找替换操作转发给编辑器内部进行处理，最后返回 `execCommand` 方法的执行结果，用于判断操作是否成功等情况。
 var frCommond = function (obj) {
     return editor.execCommand("searchreplace", obj);
 };
-switchTab("searchtab");
 
+// 调用 `switchTab` 函数，传入 `searchtab`（可能是包含搜索和替换选项卡的父元素的 `ID`），启动选项卡切换功能的初始化设置，确保页面加载时选项卡的初始状态和切换逻辑正常工作。
+switchTab("searchtab");
 
-dialog.onclose = function(){
+// 为对话框（`dialog`，可能是与查找替换操作相关的弹出式对话框，用于显示一些提示信息、操作确认等功能）的关闭事件（`onclose`）添加监听器，当对话框关闭时，触发编辑器的 `clearLastSearchResult` 事件，用于清除查找替换操作相关的一些遗留状态，保证下次操作的初始状态正确。
+dialog.onclose = function () {
     editor.trigger('clearLastSearchResult')
 };

public2/ueditor/dialogs/snapscreen/snapscreen.html

@@ -1,58 +1,120 @@
 <!DOCTYPE HTML>
 <html>
-    <head>
+<head>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <!-- 设置页面的字符编码为utf-8，确保能正确显示各种字符 -->
-        <title></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <script type="text/javascript" src="../internal.js"></script>
+    <title></title>
-        <style type="text/css">
+    <!-- 引入外部的JavaScript文件，路径为相对路径的../internal.js -->
-            *{color: #838383}
+    <script type="text/javascript" src="../internal.js"></script>
-            html,body {
+    <style type="text/css">
-                font-size: 12px;
+        /* 通配选择器，将页面中所有元素的文字颜色设置为#838383 */
-                width:100%;
+        * {
-                height:100%;
+            color: #838383
-                overflow: hidden;
+        }
-                margin:0px;
+        /* 对html和body元素进行样式设置 */
-                padding:0px;
+        html, body {
-            }
+            /* 设置字体大小为12px */
-            h2 { font-size: 16px; margin: 20px auto;}
+            font-size: 12px;
-            .content{
+            /* 宽度占满整个视口宽度 */
-                padding:5px 15px 0 15px;
+            width: 100%;
-                height:100%;
+            /* 高度占满整个视口高度 */
-            }
+            height: 100%;
-            dt,dd { margin-left: 0; padding-left: 0;}
+            /* 超出部分隐藏，防止出现滚动条等情况 */
-            dt a { display: block;
+            overflow: hidden;
-                    height: 30px;
+            /* 外边距设置为0，去除默认的外边距 */
-                    line-height: 30px;
+            margin: 0px;
-                    width: 55px;
+            /* 内边距设置为0，去除默认的内边距 */
-                    background: #EFEFEF;
+            padding: 0px;
-                    border: 1px solid #CCC;
+        }
-                    padding: 0 10px;
+
-                    text-decoration: none;
+        h2 {
-            }
+            /* 设置h2标题的字体大小为16px，并且上下外边距自动，水平居中 */
-            dt a:hover{
+            font-size: 16px;
-                background: #e0e0e0;
+            margin: 20px auto;
-                border-color: #999
+        }
-            }
+
-            dt a:active{
+        .content {
-                background: #ccc;
+            /* 设置内边距，上内边距5px，右内边距15px，下内边距0，左内边距15px */
-                border-color: #999;
+            padding: 5px 15px 0 15px;
-                color: #666;
+            /* 高度占满父元素高度 */
+            height: 100%;
+        }
+
+        dt, dd {
+            /* 去除默认的左外边距和左内边距 */
+            margin-left: 0;
+            padding-left: 0;
+        }
+
+            dt a {
+                /* 将a标签设置为块级元素，使其能设置宽高等属性 */
+                display: block;
+                /* 设置高度为30px */
+                height: 30px;
+                /* 设置行高为30px，使文字垂直居中 */
+                line-height: 30px;
+                /* 设置宽度为55px */
+                width: 55px;
+                /* 设置背景颜色为#EFEFEF */
+                background: #EFEFEF;
+                /* 设置边框为1px的实线，颜色为#CCC */
+                border: 1px solid #CCC;
+                /* 设置左右内边距为10px */
+                padding: 0 10px;
+                /* 去除默认的下划线等文本装饰效果 */
+                text-decoration: none;
             }
-            dd { line-height:20px;margin-top: 10px;}
+
-            span{ padding-right:4px;}
+                dt a:hover {
-            input{width:210px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0px; margin: 0px; }
+                    /* 鼠标悬停时的背景颜色设置为#e0e0e0 */
-
+                    background: #e0e0e0;
-
+                    /* 鼠标悬停时的边框颜色设置为#999 */
-        </style>
+                    border-color: #999
-    </head>
+                }
-    <body>
+
-        <div class="content">
+                dt a:active {
-            <h2><var id="lang_showMsg"></var></h2>
+                    /* 鼠标点击激活时的背景颜色设置为#ccc */
-            <dl>
+                    background: #ccc;
-                <dt><a href="../../third-party/snapscreen/UEditorSnapscreen.exe" target="_blank" id="downlink"><var id="lang_download"></var></a></dt>
+                    /* 鼠标点击激活时的边框颜色设置为#999 */
-                <dd><var id="lang_step1"></var></dd>
+                    border-color: #999;
-                <dd><var id="lang_step2"></var></dd>
+                    /* 鼠标点击激活时的文字颜色设置为#666 */
-            </dl>
+                    color: #666;
-        </div>
+                }
-    </body>
+
+        dd {
+            /* 设置行高为20px，并且距离上方元素有10px的外边距 */
+            line-height: 20px;
+            margin-top: 10px;
+        }
+
+        span {
+            /* 设置右边内边距为4px */
+            padding-right: 4px;
+        }
+
+        input {
+            /* 设置输入框宽度为210px，高度为21px，背景颜色为白色，边框为1px的实线，颜色为#d7d7d7，内外边距都设置为0 */
+            width: 210px;
+            height: 21px;
+            background: #FFF;
+            border: 1px solid #d7d7d7;
+            padding: 0px;
+            margin: 0px;
+        }
+    </style>
+</head>
+<body>
+    <div class="content">
+        <!-- 这里应该是通过脚本动态设置显示的消息内容，id为lang_showMsg -->
+        <h2><var id="lang_showMsg"></var></h2>
+        <dl>
+            <!-- dt里的a标签，设置了链接，点击可在新窗口打开对应的可执行文件，id为downlink，链接文本内容应该也是通过脚本动态设置，id为lang_download -->
+            <dt><a href="../../third-party/snapscreen/UEditorSnapscreen.exe" target="_blank" id="downlink"><var id="lang_download"></var></a></dt>
+            <!-- 这里的var标签内容应该也是通过脚本动态设置，用于显示步骤相关信息，id为lang_step1 -->
+            <dd><var id="lang_step1"></var></dd>
+            <!-- 同理，这里也是用于显示步骤相关信息，id为lang_step2 -->
+            <dd><var id="lang_step2"></var></dd>
+        </dl>
+    </div>
+</body>
 </html>

public2/ueditor/dialogs/spechars/spechars.html

@@ -1,21 +1,49 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
+          "http://www.w3.org/TR/html4/loose.dtd">
+<!-- 文档类型声明，表明这是遵循HTML 4.01 Transitional规范的HTML文档，并且指定了对应的DTD（文档类型定义）文件的位置 -->
 <html>
 <head>
+    <!-- 页面标题，目前为空，可根据实际需求设置具体显示的标题内容 -->
     <title></title>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <!-- 设置页面的内容类型为text/html，字符编码为utf-8，确保能正确解析和显示各种字符 -->
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <!-- 引入外部的JavaScript文件，路径为相对路径的../internal.js，通常这里面包含了页面所需的一些通用的脚本逻辑 -->
     <script type="text/javascript" src="../internal.js"></script>
     <style type="text/css">
-        html,body{overflow:hidden;}
+        /* 对html和body元素设置样式，使其超出部分隐藏，防止出现滚动条等情况，一般用于页面布局控制，让页面整体显示更规整 */
-        #specharsTab{width: 97%;margin: 10px auto; zoom:1;position: relative}
+        html, body {
-        .tabbody {height:447px;}
+            overflow: hidden;
-        .tabbody span{ margin: 5px 3px;text-align: center;display:inline-block;width: 40px;height:16px;line-height: 16px;cursor: pointer; }
+        }
+        /* 设置id为specharsTab的元素的样式，宽度占父元素的97%，上下外边距为10px且水平居中，zoom:1用于解决IE浏览器下的一些兼容问题，position: relative表示相对定位，方便内部元素基于它进行定位等操作 */
+        #specharsTab {
+            width: 97%;
+            margin: 10px auto;
+            zoom: 1;
+            position: relative
+        }
+        /* 设置类名为tabbody的元素的样式，高度为447px，用于控制这类元素在页面中的高度呈现 */
+        .tabbody {
+            height: 447px;
+        }
+            /* 设置类名为tabbody下的span元素的样式，上下外边距为5px，左右外边距为3px，文本水平居中，将其显示为行内块元素（既有行内元素特点又能设置宽高等块级元素特性），宽度为40px，高度为16px，行高为16px以让文本垂直居中，并且鼠标悬停时变为手型指针，表示可交互 */
+            .tabbody span {
+                margin: 5px 3px;
+                text-align: center;
+                display: inline-block;
+                width: 40px;
+                height: 16px;
+                line-height: 16px;
+                cursor: pointer;
+            }
     </style>
 </head>
 <body>
+    <!-- 创建一个id为specharsTab的div元素，作为页面中的一个主要容器，后续相关内容会放置在它内部 -->
     <div id="specharsTab">
+        <!-- 创建两个div元素，分别设置了不同的id和类名，id为tabHeads的元素应用了tabhead类，可能用于页面中某个选项卡头部相关内容的布局；id为tabBodys的元素应用了tabbody类，结合前面的样式定义，可能用于选项卡主体内容的布局等 -->
         <div id="tabHeads" class="tabhead"></div><div id="tabBodys" class="tabbody"></div>
     </div>
-<script type="text/javascript" src="spechars.js"></script>
+    <!-- 引入外部的JavaScript文件spechars.js，通常这里面包含了和当前页面特定功能相关的脚本代码，比如操作上述选项卡等交互逻辑 -->
+    <script type="text/javascript" src="spechars.js"></script>
 </body>
 </html>

public2/ueditor/dialogs/spechars/spechars.js

@@ -4,8 +4,11 @@
  * Date: 12-9-26
  * Time: 下午1:09
  * To change this template use File | Settings | File Templates.
+ * 上面这部分是代码的文件头注释，通常由开发工具自动生成，包含了创建文件所使用的编辑器（JetBrains PhpStorm）、作者（xuheng）、创建日期以及关于修改模板相关的提示信息等，主要用于代码的溯源和基本信息记录
  */
+// 定义一个名为charsContent的数组，数组中每个元素都是一个对象，用于存储不同类型的字符相关信息
 var charsContent = [
+    // 第一个对象，代表一种字符类型（这里可能是特殊符号之类的，从包含的字符推测），有name、title、content三个属性
     { name:"tsfh", title:lang.tsfh, content:toArray("、,。,·,ˉ,ˇ,¨,〃,々,—,～,‖,…,‘,’,“,”,〔,〕,〈,〉,《,》,「,」,『,』,〖,〗,【,】,±,×,÷,∶,∧,∨,∑,∏,∪,∩,∈,∷,√,⊥,∥,∠,⌒,⊙,∫,∮,≡,≌,≈,∽,∝,≠,≮,≯,≤,≥,∞,∵,∴,♂,♀,°,′,″,℃,＄,¤,￠,￡,‰,§,№,☆,★,○,●,◎,◇,◆,□,■,△,▲,※,→,←,↑,↓,〓,〡,〢,〣,〤,〥,〦,〧,〨,〩,㊣,㎎,㎏,㎜,㎝,㎞,㎡,㏄,㏎,㏑,㏒,㏕,︰,￢,￤,℡,ˊ,ˋ,˙,–,―,‥,‵,℅,℉,↖,↗,↘,↙,∕,∟,∣,≒,≦,≧,⊿,═,║,╒,╓,╔,╕,╖,╗,╘,╙,╚,╛,╜,╝,╞,╟,╠,╡,╢,╣,╤,╥,╦,╧,╨,╩,╪,╫,╬,╭,╮,╯,╰,╱,╲,╳,▁,▂,▃,▄,▅,▆,▇,<2C>,█,▉,▊,▋,▌,▍,▎,▏,▓,▔,▕,▼,▽,◢,◣,◤,◥,☉,⊕,〒,〝,〞")},
     { name:"lmsz", title:lang.lmsz, content:toArray("ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ,ⅶ,ⅷ,ⅸ,ⅹ,Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ,Ⅷ,Ⅸ,Ⅹ,Ⅺ,Ⅻ")},
     { name:"szfh", title:lang.szfh, content:toArray("⒈,⒉,⒊,⒋,⒌,⒍,⒎,⒏,⒐,⒑,⒒,⒓,⒔,⒕,⒖,⒗,⒘,⒙,⒚,⒛,⑴,⑵,⑶,⑷,⑸,⑹,⑺,⑻,⑼,⑽,⑾,⑿,⒀,⒁,⒂,⒃,⒄,⒅,⒆,⒇,①,②,③,④,⑤,⑥,⑦,⑧,⑨,⑩,㈠,㈡,㈢,㈣,㈤,㈥,㈦,㈧,㈨,㈩")},
@@ -16,42 +19,73 @@ var charsContent = [
     { name:"yyyb", title:lang.yyyb, content:toArray("i:,i,e,æ,ʌ,ə:,ə,u:,u,ɔ:,ɔ,a:,ei,ai,ɔi,əu,au,iə,εə,uə,p,t,k,b,d,g,f,s,ʃ,θ,h,v,z,ʒ,ð,tʃ,tr,ts,dʒ,dr,dz,m,n,ŋ,l,r,w,j,")},
     { name:"zyzf", title:lang.zyzf, content:toArray("ㄅ,ㄆ,ㄇ,ㄈ,ㄉ,ㄊ,ㄋ,ㄌ,ㄍ,ㄎ,ㄏ,ㄐ,ㄑ,ㄒ,ㄓ,ㄔ,ㄕ,ㄖ,ㄗ,ㄘ,ㄙ,ㄚ,ㄛ,ㄜ,ㄝ,ㄞ,ㄟ,ㄠ,ㄡ,ㄢ,ㄣ,ㄤ,ㄥ,ㄦ,ㄧ,ㄨ")}
 ];
+
+// 定义一个立即执行函数，传入charsContent作为参数，用于创建选项卡相关的DOM结构以及绑定交互逻辑
 (function createTab(content) {
+    // 循环遍历传入的content数组（也就是charsContent）
     for (var i = 0, ci; ci = content[i++];) {
+        // 创建一个<span>元素，后续用于作为选项卡的标题之类的显示元素
         var span = document.createElement("span");
+        // 给创建的<span>元素设置一个自定义属性tabSrc，值为当前对象的name属性（用于后续识别和关联）
         span.setAttribute("tabSrc", ci.name);
+        // 将当前对象的title属性值设置为<span>元素的innerHTML，也就是显示的文本内容
         span.innerHTML = ci.title;
+        // 如果是第一个选项卡（索引为1，因为索引从0开始，这里实际是第二个元素，但符合通常第一个选项卡默认选中的逻辑），给它添加名为"focus"的类名，用于样式上突出显示（比如改变背景色等）
         if (i == 1)span.className = "focus";
+        // 给<span>元素绑定点击事件处理函数
         domUtils.on(span, "click", function () {
+            // 获取id为tabHeads的元素的所有子元素（可能是所有选项卡标题元素）
             var tmps = $G("tabHeads").children;
+            // 循环遍历这些子元素，将它们的类名都清空，用于取消之前的选中状态样式
             for (var k = 0, sk; sk = tmps[k++];) {
                 sk.className = "";
             }
+            // 获取id为tabBodys的元素的所有子元素（可能是各个选项卡对应的内容区域元素）
             tmps = $G("tabBodys").children;
+            // 循环遍历这些子元素，将它们的display样式设置为"none"，也就是隐藏起来
             for (var k = 0, sk; sk = tmps[k++];) {
                 sk.style.display = "none";
             }
+            // 将当前点击的<span>元素的类名设置为"focus"，表示选中状态
             this.className = "focus";
+            // 根据当前点击<span>元素的tabSrc属性值，获取对应的id的元素，并将其display样式设置为空字符串（一般就是显示出来，恢复默认显示状态）
             $G(this.getAttribute("tabSrc")).style.display = "";
         });
+        // 将创建并设置好的<span>元素添加到id为tabHeads的元素中，作为其子元素
         $G("tabHeads").appendChild(span);
+        // 在添加的<span>元素后面插入一个换行的文本节点，用于排版美化之类的（可能影响页面布局呈现效果）
         domUtils.insertAfter(span, document.createTextNode("\n"));
+
+        // 创建一个<div>元素，用于作为选项卡的内容区域容器
         var div = document.createElement("div");
+        // 设置该<div>元素的id为当前对象的name属性值，方便后续通过id查找和操作
         div.id = ci.name;
-        div.style.display = (i == 1) ? "" : "none";
+        // 如果是第一个选项卡（索引为1），将其display样式设置为空字符串（显示出来），否则设置为"none"（隐藏起来）
+        div.style.display = (i == 1)? "" : "none";
+        // 获取当前对象的content属性值（是一个数组，包含了具体的字符内容）
         var cons = ci.content;
+        // 循环遍历这个content数组
         for (var j = 0, con; con = cons[j++];) {
+            // 创建一个<span>元素，用于显示单个字符
             var charSpan = document.createElement("span");
+            // 将当前字符内容设置为<span>元素的innerHTML，也就是显示出来
             charSpan.innerHTML = con;
+            // 给这个用于显示字符的<span>元素绑定点击事件处理函数
             domUtils.on(charSpan, "click", function () {
+                // 调用editor对象的execCommand方法，执行"insertHTML"命令，将当前点击的<span>元素的innerHTML（也就是字符内容）插入到编辑器中（这里的editor应该是外部定义好的编辑器相关对象）
                 editor.execCommand("insertHTML", this.innerHTML);
+                // 调用dialog对象的close方法，关闭对话框（这里的dialog应该也是外部定义好的相关对象，用于展示这个字符选择的界面等）
                 dialog.close();
             });
+            // 将创建并设置好的用于显示字符的<span>元素添加到对应的选项卡内容区域的<div>元素中
             div.appendChild(charSpan);
         }
+        // 将整个选项卡内容区域的<div>元素添加到id为tabBodys的元素中，作为其子元素
         $G("tabBodys").appendChild(div);
     }
 })(charsContent);
+
+// 定义一个函数toArray，用于将传入的字符串按照逗号进行分割，返回分割后的数组
 function toArray(str) {
     return str.split(",");
-}
+}

public2/ueditor/dialogs/table/edittable.css

@@ -1,84 +1,137 @@
+/* 对body元素设置样式 */
 body{
+    /* 超出body元素范围的内容隐藏起来，避免出现滚动条等情况，用于控制页面整体的显示范围 */
     overflow: hidden;
+    /* 设置body元素的宽度为540px，限定整个页面主体的宽度 */
     width: 540px;
 }
+
+/* 定义名为wrapper的类选择器样式，通常用于包裹页面中的一部分内容区域 */
 .wrapper {
+    /* 设置上下外边距，上外边距为10px，下外边距自动（会根据父元素宽度等情况自动调整，实现水平居中效果），左外边距为0，让其在水平方向上相对父元素居中显示 */
     margin: 10px auto 0;
+    /* 设置字体大小为12px，统一该区域内文字的字号 */
     font-size: 12px;
+    /* 超出该元素范围的内容隐藏起来，避免内部元素溢出显示异常 */
     overflow: hidden;
+    /* 设置宽度为520px，确定这个包裹区域的宽度 */
     width: 520px;
+    /* 设置高度为315px，确定这个包裹区域的高度 */
     height: 315px;
 }
 
+/* 定义名为clear的类选择器样式，一般用于清除浮动带来的影响，确保后续元素的布局正常 */
 .clear {
+    /* 清除左右两侧的浮动元素，使该元素不会受到前面浮动元素的影响，能按正常流布局显示 */
     clear: both;
 }
 
-.wrapper .left {
+/* 对同时应用了wrapper类和left类的元素设置样式，通常用于布局中靠左边的部分内容 */
+.wrapper.left {
+    /* 让元素向左浮动，使其能在同一行内从左到右依次排列（前提是有足够宽度），常用于多栏布局 */
     float: left;
-    margin-left: 10px;;
+    /* 设置左外边距为10px，拉开与左边元素或容器边界的距离 */
+    margin-left: 10px;
 }
 
-.wrapper .right {
+/* 对同时应用了wrapper类和right类的元素设置样式，通常用于布局中靠右边的部分内容 */
+.wrapper.right {
+    /* 让元素向右浮动，使其能在同一行内从右到左依次排列（前提是有足够宽度），常用于多栏布局 */
     float: right;
+    /* 设置左边框为2px的点状边框，颜色为#EDEDED，用于视觉上区分左右两部分内容区域 */
     border-left: 2px dotted #EDEDED;
+    /* 设置左内边距为15px，增加内部内容与左边框的距离，使显示更美观 */
     padding-left: 15px;
 }
 
+/* 定义名为section的类选择器样式，可能用于页面中不同的功能或内容板块 */
 .section {
+    /* 设置下外边距为15px，拉开与下方相邻元素的距离，增加板块之间的间隔 */
     margin-bottom: 15px;
+    /* 设置宽度为240px，限定每个板块的宽度 */
     width: 240px;
+    /* 超出该元素范围的内容隐藏起来，避免内部元素溢出显示异常 */
     overflow: hidden;
 }
 
+/* 对类名为section下的h3元素设置样式，一般用于板块内的标题样式设置 */
 .section h3 {
+    /* 设置字体加粗，突出标题显示效果 */
     font-weight: bold;
+    /* 设置上下内边距为5px，增加标题内容的上下空白区域，使其更美观 */
     padding: 5px 0;
+    /* 设置下外边距为10px，拉开与下方相邻元素（比如标题下方的列表等内容）的距离 */
     margin-bottom: 10px;
+    /* 设置下边框为1px的实线边框，颜色为#EDEDED，用于视觉上对标题区域进行区分 */
     border-bottom: 1px solid #EDEDED;
+    /* 设置字体大小为12px，统一板块标题的字号 */
     font-size: 12px;
 }
 
+/* 对类名为section下的ul元素设置样式，通常用于设置板块内的无序列表样式 */
 .section ul {
+    /* 去除列表默认的项目符号样式，可能会根据后续需求自定义列表项的显示样式 */
     list-style: none;
+    /* 超出该元素范围的内容隐藏起来，避免内部元素溢出显示异常 */
     overflow: hidden;
+    /* 清除左右两侧的浮动元素，确保列表在布局中正常显示，不受前面浮动元素影响 */
     clear: both;
-
 }
 
+/* 对类名为section下的li元素设置样式，用于设置板块内列表项的样式 */
 .section li {
+    /* 让列表项向左浮动，使其能在同一行内从左到右依次排列（前提是有足够宽度），实现多列布局效果等 */
     float: left;
-    width: 120px;;
+    /* 设置列表项的宽度为120px，控制每个列表项的水平占宽情况 */
+    width: 120px;
 }
 
-.section .tone {
+/* 对类名为section下的tone类元素设置样式，可能是特定用途的元素样式，比如表示某种色调之类的元素 */
-    width: 80px;;
+.section.tone {
+    /* 设置宽度为80px，限定该类元素的宽度 */
+    width: 80px;
 }
 
-.section .preview {
+/* 对类名为section下的preview类元素设置样式，可能用于展示预览相关内容的元素 */
+.section.preview {
+    /* 设置宽度为220px，限定该类元素的宽度 */
     width: 220px;
 }
 
-.section .preview table {
+/* 对类名为section下的preview类中的table元素设置样式，用于设置表格的整体样式 */
+.section.preview table {
+    /* 设置表格内容水平居中对齐 */
     text-align: center;
+    /* 设置表格内容垂直居中对齐，使表格内文字等内容在单元格中垂直方向上处于中间位置 */
     vertical-align: middle;
+    /* 设置表格内文字颜色为#666，统一表格内容的文字颜色 */
     color: #666;
 }
 
-.section .preview caption {
+/* 对类名为section下的preview类中的caption元素设置样式，一般用于表格标题的样式设置 */
+.section.preview caption {
+    /* 设置字体加粗，突出表格标题显示效果 */
     font-weight: bold;
 }
 
-.section .preview td {
+/* 对类名为section下的preview类中的td元素设置样式，用于设置表格数据单元格的样式 */
+.section.preview td {
+    /* 设置边框宽度为1px，四条边的边框样式都为实线，后续可通过border-color等属性设置边框颜色等 */
     border-width: 1px;
     border-style: solid;
+    /* 设置单元格的高度为22px，统一表格数据单元格的高度 */
     height: 22px;
 }
 
-.section .preview th {
+/* 对类名为section下的preview类中的th元素设置样式，用于设置表格表头单元格的样式 */
+.section.preview th {
+    /* 设置边框样式为实线，通过border-color属性可以设置不同边的边框颜色 */
     border-style: solid;
+    /* 设置边框颜色，上边框宽度为2px，左右下边框宽度为1px，且颜色都为#DDD */
     border-color: #DDD;
     border-width: 2px 1px 1px 1px;
+    /* 设置单元格的高度为22px，统一表格表头单元格的高度 */
     height: 22px;
+    /* 设置表头单元格的背景颜色为#F7F7F7，用于视觉上区分表头和数据单元格 */
     background-color: #F7F7F7;
 }

public2/ueditor/dialogs/table/edittable.html

@@ -1,64 +1,100 @@
 <!DOCTYPE html>
+<!-- 文档类型声明，表明这是一个HTML文档，遵循HTML相关标准规范 -->
 <html>
 <head>
+    <!-- 页面标题，目前为空，后续可根据实际需求设置具体显示的标题内容 -->
     <title></title>
+    <!-- 引入外部的JavaScript文件，路径为相对路径的../internal.js，通常这个文件包含了页面通用的一些脚本逻辑 -->
     <script type="text/javascript" src="../internal.js"></script>
+    <!-- 引入外部的CSS样式表文件，类型为text/css，文件名为edittable.css，用于设置页面的样式 -->
     <link rel="stylesheet" type="text/css" href="edittable.css">
 </head>
 <body>
-<div class="wrapper">
+    <!-- 创建一个应用了wrapper类的div元素，作为页面内容的一个主要包裹容器，方便对内部元素进行整体布局等操作 -->
-    <div class="left">
+    <div class="wrapper">
-        <div class="section">
+        <!-- 创建一个应用了left类的div元素，通常用于页面布局中靠左边的部分内容展示 -->
-            <h3><var id="lang_tableStyle"></var></h3>
+        <div class="left">
-            <ul>
+            <!-- 创建一个应用了section类的div元素，可能代表页面中的一个功能或内容板块 -->
-                <li>
+            <div class="section">
-                    <label onselectstart="return false"><input type="checkbox" id="J_title" name="style"/><var id="lang_insertTitle"></var></label>
+                <!-- 创建一个h3标题元素，其内部的文本内容通过id为lang_tableStyle的变量来动态设置（一般会通过脚本在运行时替换成实际文本） -->
-                </li>
+                <h3><var id="lang_tableStyle"></var></h3>
-                <li>
+                <ul>
-                    <label onselectstart="return false"><input type="checkbox" id="J_titleCol" name="style"/><var id="lang_insertTitleCol"></var></label>
+                    <!-- 创建一个li列表项元素 -->
-                </li>
+                    <li>
-            </ul>
+                        <!-- 创建一个label标签，设置了onselectstart属性为"return false"，用于禁止在该标签内容上进行文本选中操作 -->
-            <ul>
+                        <label onselectstart="return false">
-                <li>
+                            <!-- 创建一个复选框类型的input元素，设置了id为J_title，name为style，用于表单交互，比如选择某种表格样式相关的功能 -->
-                    <label onselectstart="return false"><input type="checkbox" id="J_caption" name="style"/><var id="lang_insertCaption"></var></label>
+                            <input type="checkbox" id="J_title" name="style" />
-                </li>
+                            <!-- 内部的文本内容通过id为lang_insertTitle的变量来动态设置（运行时替换为实际文本） -->
-                <li>
+                            <var id="lang_insertTitle"></var>
-                    <label onselectstart="return false"><input type="checkbox" id="J_sorttable" name="style"/><var id="lang_orderbycontent"></var></label>
+                        </label>
-                </li>
+                    </li>
-            </ul>
+                    <li>
-            <div class="clear"></div>
+                        <label onselectstart="return false">
-        </div>
+                            <input type="checkbox" id="J_titleCol" name="style" />
-        <div class="section">
+                            <var id="lang_insertTitleCol"></var>
-            <h3><var id="lang_tableSize"></var></h3>
+                        </label>
-            <ul>
+                    </li>
-                <li>
+                </ul>
-                    <label><input type="radio" id="J_autoSizeContent" name="size"/><var id="lang_autoSizeContent"></var></label>
+                <ul>
-                </li>
+                    <li>
-                <li>
+                        <label onselectstart="return false">
-                    <label><input type="radio" id="J_autoSizePage" name="size"/><var id="lang_autoSizePage"></var></label>
+                            <input type="checkbox" id="J_caption" name="style" />
-                </li>
+                            <var id="lang_insertCaption"></var>
-            </ul>
+                        </label>
-            <div class="clear"></div>
+                    </li>
-        </div>
+                    <li>
-        <div class="section">
+                        <label onselectstart="return false">
-            <h3><var id="lang_borderStyle"></var></h3>
+                            <input type="checkbox" id="J_sorttable" name="style" />
-            <ul>
+                            <var id="lang_orderbycontent"></var>
-                <li>
+                        </label>
-                    <span><var id="lang_color"></var></span>
+                    </li>
-                    <input type="text" class="tone" id="J_tone" readonly='readonly' />
+                </ul>
-                </li>
+                <!-- 引入一个应用了clear类的div元素，用于清除前面元素浮动带来的影响，确保后续布局正常 -->
-            </ul>
+                <div class="clear"></div>
-            <div class="clear"></div>
+            </div>
+            <div class="section">
+                <h3><var id="lang_tableSize"></var></h3>
+                <ul>
+                    <li>
+                        <label>
+                            <!-- 创建一个单选框类型的input元素，id为J_autoSizeContent，name为size，用于表单交互中选择表格尺寸相关的设置 -->
+                            <input type="radio" id="J_autoSizeContent" name="size" />
+                            <var id="lang_autoSizeContent"></var>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            <input type="radio" id="J_autoSizePage" name="size" />
+                            <var id="lang_autoSizePage"></var>
+                        </label>
+                    </li>
+                </ul>
+                <div class="clear"></div>
+            </div>
+            <div class="section">
+                <h3><var id="lang_borderStyle"></h3>
+                <ul>
+                    <li>
+                        <!-- 创建一个span元素，内部文本内容通过id为lang_color的变量动态设置 -->
+                        <span><var id="lang_color"></var></span>
+                        <!-- 创建一个文本框类型的input元素，应用了tone类，设置为只读状态，id为J_tone，可能用于显示某种颜色相关的值等 -->
+                        <input type="text" class="tone" id="J_tone" readonly='readonly' />
+                    </li>
+                </ul>
+                <div class="clear"></div>
+            </div>
         </div>
-    </div>
+        <div class="right">
-    <div class="right">
+            <div class="section">
-        <div class="section">
+                <h3><var id="lang_example"></var></h3>
-            <h3><var id="lang_example"></var></h3>
+                <!-- 创建一个应用了preview类且id为J_preview的div元素，可能用于展示表格相关的示例内容 -->
-            <div class="preview" id="J_preview">
+                <div class="preview" id="J_preview">
+                </div>
             </div>
         </div>
     </div>
-</div>
+    <!-- 引入外部的JavaScript文件edittable.js，通常包含了和当前页面编辑表格功能相关的具体脚本逻辑 -->
-<script type="text/javascript" src="edittable.js"></script>
+    <script type="text/javascript" src="edittable.js"></script>
 </body>
 </html>

public2/ueditor/dialogs/table/edittable.js

@@ -4,8 +4,11 @@
  * Date: 12-12-19
  * Time: 下午4:55
  * To change this template use File | Settings | File Templates.
+ * 上面这部分是代码的文件头注释，包含了创建文件所使用的编辑器（JetBrains PhpStorm）、作者（xuheng）、创建日期以及关于修改模板相关的提示信息等，主要用于代码的溯源和基本信息记录
  */
+// 定义一个立即执行函数，用于创建一个独立的作用域，避免变量污染全局环境
 (function () {
+    // 获取页面中id为J_title的元素，通常这些元素可能是与表格编辑相关的表单元素（如复选框等），以下类似的获取操作同理
     var title = $G("J_title"),
         titleCol = $G("J_titleCol"),
         caption = $G("J_caption"),
@@ -16,74 +19,103 @@
         me,
         preview = $G("J_preview");
 
+    // 定义一个名为editTable的构造函数，用于创建编辑表格相关功能的对象实例
     var editTable = function () {
         me = this;
+        // 调用对象自身的init方法进行初始化操作
         me.init();
     };
+    // 将editTable的原型对象进行扩展，添加一系列方法，用于实现具体的表格编辑相关功能
     editTable.prototype = {
+        // init方法，用于初始化各种状态、绑定事件等操作
         init:function () {
+            // 创建一个UE.ui.ColorPicker实例，用于选择颜色，传入编辑器对象（这里的editor应该是外部定义好的编辑器相关对象）
             var colorPiker = new UE.ui.ColorPicker({
                     editor:editor
                 }),
+                // 创建一个UE.ui.Popup实例，用于弹出颜色选择器相关的界面，传入编辑器对象，并将颜色选择器作为其内容
                 colorPop = new UE.ui.Popup({
                     editor:editor,
                     content:colorPiker
                 });
 
+            // 根据编辑器中"inserttitle"命令的状态（-1可能表示未启用之类的情况）来设置title复选框的选中状态
             title.checked = editor.queryCommandState("inserttitle") == -1;
             titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
             caption.checked = editor.queryCommandState("insertcaption") == -1;
             sorttable.checked = editor.queryCommandState("enablesort") == 1;
 
+            // 获取编辑器中"enablesort"命令的状态
             var enablesortState = editor.queryCommandState("enablesort"),
                 disablesortState = editor.queryCommandState("disablesort");
 
-            sorttable.checked = !!(enablesortState < 0 && disablesortState >=0);
+            // 根据"enablesort"和"disablesort"命令的状态来设置sorttable复选框的选中和禁用状态，并设置提示标题（如果两个状态都小于0可能表示不可用情况等）
-            sorttable.disabled = !!(enablesortState < 0 && disablesortState < 0);
+            sorttable.checked =!!(enablesortState < 0 && disablesortState >=0);
-            sorttable.title = enablesortState < 0 && disablesortState < 0 ? lang.errorMsg:'';
+            sorttable.disabled =!!(enablesortState < 0 && disablesortState < 0);
+            sorttable.title = enablesortState < 0 && disablesortState < 0? lang.errorMsg:'';
 
+            // 调用对象自身的方法创建表格，传入相关复选框的选中状态作为参数
             me.createTable(title.checked, titleCol.checked, caption.checked);
+            // 调用对象自身的方法设置表格自动尺寸相关逻辑
             me.setAutoSize();
+            // 调用对象自身的方法设置表格颜色，传入获取到的颜色值作为参数
             me.setColor(me.getColor());
 
+            // 给title元素绑定点击事件处理函数，点击时调用对象自身的titleHanler方法
             domUtils.on(title, "click", me.titleHanler);
+            // 给titleCol元素绑定点击事件处理函数，点击时调用对象自身的titleColHanler方法
             domUtils.on(titleCol, "click", me.titleColHanler);
+            // 给caption元素绑定点击事件处理函数，点击时调用对象自身的captionHanler方法
             domUtils.on(caption, "click", me.captionHanler);
+            // 给sorttable元素绑定点击事件处理函数，点击时调用对象自身的sorttableHanler方法
             domUtils.on(sorttable, "click", me.sorttableHanler);
+            // 给autoSizeContent元素绑定点击事件处理函数，点击时调用对象自身的autoSizeContentHanler方法
             domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
+            // 给autoSizePage元素绑定点击事件处理函数，点击时调用对象自身的autoSizePageHanler方法
             domUtils.on(autoSizePage, "click", me.autoSizePageHanler);
 
+            // 给tone元素绑定点击事件处理函数，点击时显示颜色选择器弹出框，并定位到tone元素位置
             domUtils.on(tone, "click", function () {
                 colorPop.showAnchor(tone);
             });
+            // 给document文档对象绑定鼠标按下事件处理函数，点击时隐藏颜色选择器弹出框
             domUtils.on(document, 'mousedown', function () {
                 colorPop.hide();
             });
+            // 给颜色选择器添加"pickcolor"事件的监听器，当选择颜色时调用对象自身的setColor方法设置颜色，并隐藏弹出框
             colorPiker.addListener("pickcolor", function () {
                 me.setColor(arguments[1]);
                 colorPop.hide();
             });
+            // 给颜色选择器添加"picknocolor"事件的监听器，当不选择颜色（比如取消选择）时调用对象自身的setColor方法设置为空颜色，并隐藏弹出框
             colorPiker.addListener("picknocolor", function () {
                 me.setColor("");
                 colorPop.hide();
             });
         },
 
+        // 创建表格的方法，根据传入的是否有标题、标题列、标题说明等参数来构建表格的HTML结构
         createTable:function (hasTitle, hasTitleCol, hasCaption) {
             var arr = [],
                 sortSpan = '<span>^</span>';
+            // 将表格开始标签添加到数组中，后续通过join方法拼接成完整的HTML字符串
             arr.push("<table id='J_example'>");
+            // 如果传入的hasCaption为true，表示有标题说明，则添加标题说明的HTML结构到数组中
             if (hasCaption) {
                 arr.push("<caption>" + lang.captionName + "</caption>")
             }
+            // 如果传入的hasTitle为true，表示有标题行，则添加标题行的HTML结构到数组中
             if (hasTitle) {
                 arr.push("<tr>");
+                // 如果同时有标题列（hasTitleCol为true），则添加标题列的表头单元格HTML结构到数组中
                 if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>"); }
+                // 循环添加5个普通表头单元格的HTML结构到数组中
                 for (var j = 0; j < 5; j++) {
                     arr.push("<th>" + lang.titleName + "</th>");
                 }
                 arr.push("</tr>");
             }
+            // 循环添加6行表格数据行的HTML结构到数组中
             for (var i = 0; i < 6; i++) {
                 arr.push("<tr>");
                 if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>") }
@@ -92,68 +124,94 @@
                 }
                 arr.push("</tr>");
             }
+            // 将表格结束标签添加到数组中
             arr.push("</table>");
+            // 将拼接好的HTML字符串设置为preview元素的innerHTML，用于在页面中显示表格示例
             preview.innerHTML = arr.join("");
+            // 调用对象自身的updateSortSpan方法更新排序相关的显示内容（比如排序箭头等）
             this.updateSortSpan();
         },
+        // 处理title复选框点击事件的方法
         titleHanler:function () {
             var example = $G("J_example"),
                 frg=document.createDocumentFragment(),
+                // 获取表格中第一个td单元格的边框颜色，用于后续设置颜色等操作
                 color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
                 colCount = example.rows[0].children.length;
 
+            // 如果title复选框被选中
             if (title.checked) {
+                // 在表格的第一行插入新行（用于添加标题行）
                 example.insertRow(0);
+                // 循环根据表头列数量创建表头单元格元素，并添加到文档片段中
                 for (var i = 0, node; i < colCount; i++) {
                     node = document.createElement("th");
                     node.innerHTML = lang.titleName;
                     frg.appendChild(node);
                 }
+                // 将包含表头单元格的文档片段添加到新插入的第一行中
                 example.rows[0].appendChild(frg);
 
             } else {
+                // 如果title复选框取消选中，移除表格的第一行（也就是移除标题行）
                 domUtils.remove(example.rows[0]);
             }
+            // 调用对象自身的setColor方法设置表格颜色，传入获取到的颜色值
             me.setColor(color);
+            // 调用对象自身的updateSortSpan方法更新排序相关的显示内容
             me.updateSortSpan();
         },
+        // 处理titleCol复选框点击事件的方法
         titleColHanler:function () {
             var example = $G("J_example"),
                 color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
                 colArr = example.rows,
                 colCount = colArr.length;
 
+            // 如果titleCol复选框被选中
             if (titleCol.checked) {
+                // 循环遍历每一行，在每行的第一个位置插入表头单元格元素
                 for (var i = 0, node; i < colCount; i++) {
                     node = document.createElement("th");
                     node.innerHTML = lang.titleName;
                     colArr[i].insertBefore(node, colArr[i].children[0]);
                 }
             } else {
+                // 如果titleCol复选框取消选中，循环移除每行的第一个元素（也就是移除之前添加的表头单元格）
                 for (var i = 0; i < colCount; i++) {
                     domUtils.remove(colArr[i].children[0]);
                 }
             }
+            // 调用对象自身的setColor方法设置表格颜色，传入获取到的颜色值
             me.setColor(color);
+            // 调用对象自身的updateSortSpan方法更新排序相关的显示内容
             me.updateSortSpan();
         },
+        // 处理caption复选框点击事件的方法
         captionHanler:function () {
             var example = $G("J_example");
+            // 如果caption复选框被选中
             if (caption.checked) {
+                // 创建一个caption元素（标题说明元素），设置其innerHTML为相应的文本内容
                 var row = document.createElement('caption');
                 row.innerHTML = lang.captionName;
+                // 将创建的caption元素插入到表格的第一个子元素位置（也就是作为标题说明）
                 example.insertBefore(row, example.firstChild);
             } else {
+                // 如果caption复选框取消选中，移除表格中的标题说明元素（通过获取第一个caption元素来移除）
                 domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
             }
         },
+        // 处理sorttable复选框点击事件的方法，主要是更新排序相关的显示内容
         sorttableHanler:function(){
             me.updateSortSpan();
         },
+        // 处理autoSizeContent单选框点击事件的方法，移除表格的宽度属性，使表格根据内容自适应宽度
         autoSizeContentHanler:function () {
             var example = $G("J_example");
             example.removeAttribute("width");
         },
+        // 处理autoSizePage单选框点击事件的方法，设置表格宽度为100%，并移除表格内每个td单元格的宽度属性，使表格根据页面宽度自适应
         autoSizePageHanler:function () {
             var example = $G("J_example");
             var tds = example.getElementsByTagName(example, "td");
@@ -162,6 +220,7 @@
             });
             example.setAttribute('width', '100%');
         },
+        // 更新排序相关显示内容的方法，比如添加或移除排序箭头等
         updateSortSpan: function(){
             var example = $G("J_example"),
                 row = example.rows[0];
@@ -178,6 +237,7 @@
                 });
             }
         },
+        // 获取表格颜色的方法，通过获取当前选择位置所在单元格的边框颜色来确定，如果没有获取到则返回默认颜色#DDDDDD
         getColor:function () {
             var start = editor.selection.getStart(), color,
                 cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
@@ -185,6 +245,7 @@
             if (!color)  color = "#DDDDDD";
             return color;
         },
+        // 设置表格颜色的方法，设置表格中所有td、th、caption元素的边框颜色，并更新tone元素（可能是显示颜色的输入框之类的）的值
         setColor:function (color) {
             var example = $G("J_example"),
                 arr = domUtils.getElementsByTagName(example, "td").concat(
@@ -198,6 +259,7 @@
             });
 
         },
+        // 设置表格自动尺寸的方法，默认选中autoSizePage单选框，并调用其对应的处理方法来设置表格尺寸
         setAutoSize:function () {
             var me = this;
             autoSizePage.checked = true;
@@ -205,8 +267,10 @@
         }
     };
 
+    // 创建一个editTable的实例，启动整个表格编辑相关的功能逻辑
     new editTable;
 
+    // 给dialog对象（可能是对话框相关对象）的onok属性设置一个函数，当点击对话框的确定按钮时执行以下逻辑
     dialog.onok = function () {
         editor.__hasEnterExecCommand = true;
 
@@ -216,6 +280,7 @@
             caption:"insertcaption deletecaption",
             sorttable:"enablesort disablesort"
         };
+        // 触发编辑器的'saveScene'事件
         editor.fireEvent('saveScene');
         for(var i in checks){
             var cmds = checks[i].split(" "),
@@ -228,8 +293,8 @@
         }
 
         editor.execCommand("edittable", tone.value);
-        autoSizeContent.checked ?editor.execCommand('adaptbytext') : "";
+        autoSizeContent.checked?editor.execCommand('adaptbytext') : "";
-        autoSizePage.checked ? editor.execCommand("adaptbywindow") : "";
+        autoSizePage.checked? editor.execCommand("adaptbywindow") : "";
         editor.fireEvent('saveScene');
 
         editor.__hasEnterExecCommand = false;

public2/ueditor/dialogs/table/edittd.html

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