From 5af57bce55492a21134155929f8699933948d39f Mon Sep 17 00:00:00 2001 From: STT <3315488997@qq.com> Date: Fri, 18 Apr 2025 20:02:24 +0800 Subject: [PATCH] 'sttnew' --- stt/axios.js | 2 +- stt/iconPickerFa.js | 478 ++++ stt/index.html | 229 ++ stt/login.html | 246 ++ stt/main.html | 287 +++ stt/org.js | 120 + stt/step.js | 135 ++ stt/store.js | 41 + stt/treetable.js | 301 +++ stt/wangEditor.js | 5451 +++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 7289 insertions(+), 1 deletion(-) create mode 100644 stt/iconPickerFa.js create mode 100644 stt/index.html create mode 100644 stt/login.html create mode 100644 stt/main.html create mode 100644 stt/org.js create mode 100644 stt/step.js create mode 100644 stt/store.js create mode 100644 stt/treetable.js create mode 100644 stt/wangEditor.js diff --git a/stt/axios.js b/stt/axios.js index c592ffb..1b6e305 100644 --- a/stt/axios.js +++ b/stt/axios.js @@ -1819,4 +1819,4 @@ axios.interceptors.response.use(function(response){ axios.defaults.baseURL="http://localhost:8888/dormitory" // 输出 axios exports('axios', axios); - )},)} \ No newline at end of file + )},)} diff --git a/stt/iconPickerFa.js b/stt/iconPickerFa.js new file mode 100644 index 0000000..42e944a --- /dev/null +++ b/stt/iconPickerFa.js @@ -0,0 +1,478 @@ + + +layui.define(['laypage', 'form'], function (exports) { + "use strict"; + + // 定义 IconPicker 构造函数 + var IconPicker = function () { + // 设置版本号为1.1 + this.v = '1.1'; + }, _MOD = 'iconPickerFa', + // 使用 _this 存储当前的 this 上下文 + _this = this, + // 引入 jQuery + $ = layui.jquery, + // 引入 laypage 模块 + laypage = layui.laypage, + // 引入 form 模块 + form = layui.form, + // 定义 BODY 选择器 + BODY = 'body', + // 定义提示信息 + TIPS = '请选择图标'; +}) + + + IconPicker.prototype.render = function (options) { + // 渲染图标选择器的方法 + var opts = options, + // DOM选择器 + elem = opts.elem, + // 数据类型：fontClass/unicode + url = opts.url, + // 是否分页：true/false + page = opts.page == null ? true : opts.page, + // 每页显示数量 + limit = opts.limit == null ? 12 : opts.limit, + // 是否开启搜索：true/false + search = opts.search == null ? true : opts.search, + // 每个图标格子的宽度：'43px'或'20%' + cellWidth = opts.cellWidth, + // 点击图标后的回调函数 + click = opts.click, + // 渲染成功后的回调函数 + success = opts.success, + // 存储图标数据的json对象 + data = {}, + // 唯一标识符，基于当前时间戳生成 + tmp = new Date().getTime(), + // 初始化时input的值 + ORIGINAL_ELEM_VALUE = $(elem).val(), + // 下拉标题的类名 + TITLE = 'layui-select-title', + // 下拉标题的唯一ID + TITLE_ID = 'layui-select-title-' + tmp, + // 图标选择器主体的唯一ID + ICON_BODY = 'layui-iconpicker-' + tmp, + // 图标选择器内容区域的唯一ID + PICKER_BODY = 'layui-iconpicker-body-' + tmp, + // 图标选择器分页区域的唯一ID + PAGE_ID = 'layui-iconpicker-page-' + tmp, + // 图标列表容器的类名 + LIST_BOX = 'layui-iconpicker-list-box', + // 表单项选中状态的类名 + selected = 'layui-form-selected', + // 表单项未选中状态的类名 + unselect = 'layui-unselect'; + + var a = { + // 初始化函数，设置基本数据并绑定事件 + init: function () { + // 从指定URL获取数据 + data = common.getData(url); + + // 隐藏元素、创建选择框、创建主体内容、切换选择状态 + a.hideElem().createSelect().createBody().toggleSelect(); + // 防止默认事件和监听输入事件 + a.preventEvent().inputListen(); + // 加载CSS样式 + common.loadCss(); + + // 如果成功回调函数存在，则调用成功处理函数 + if (success) { + success(this.successHandle()); + } + + // 返回当前对象以支持链式调用 + return a; + }, + // 处理成功后的数据返回 + successHandle: function () { + // 创建一个包含选项、数据、ID和元素的对象 + var d = { + options: opts, + data: data, + id: tmp, + elem: $('#' + ICON_BODY) + }; + // 返回创建的对象 + return d; + }, + + hideElem: function () { + // 隐藏指定的元素 + $(elem).hide(); + // 返回变量 a + return a; + }, + + createSelect: function () { + // 定义一个变量oriIcon，并赋值为包含图标类名的HTML字符串 + var oriIcon = ''; + + // 如果ORIGINAL_ELEM_VALUE为空字符串 + if (ORIGINAL_ELEM_VALUE === '') { + // 将ORIGINAL_ELEM_VALUE设置为默认图标类名'fa-adjust' + ORIGINAL_ELEM_VALUE = 'fa-adjust'; + } + createSelect: 该方法用于创建一个选择元素主要用于图标选择功能 + + // 创建原始图标的HTML字符串，使用ORIGINAL_ELEM_VALUE作为图标类名 + oriIcon = ''; + + // 关闭原始图标的HTML标签 + oriIcon += ''; + + // 创建选择器HTML字符串，包含标题和图标选择区域 + var selectHtml = '
' + + '
' + + '
' + + '' + + // 插入原始图标HTML + oriIcon + + '' + + // 添加一个用于显示边缘效果的图标 + '' + + '
' + + '
' + + '
' + + // 占位符内容，可能是将来要替换的内容 + '123' + + '
'; + + // 在目标元素之后插入生成的选择器HTML + $(elem).after(selectHtml); + + // 返回变量a（假设是函数的返回值） + return a; + toggleSelect: function () { + // 切换图标的选中状态 + var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge'; + a.event('click', item, function (e) { + // 获取图标元素 + var $icon = $('#' + ICON_BODY); + if ($icon.hasClass(selected)) { + // 如果图标已经被选中，则取消选中状态 + $icon.removeClass(selected).addClass(unselect); + } else { + // 隐藏其他picker + $('.layui-form-select').removeClass(selected); + // 显示当前picker并设置为选中状态 + $icon.addClass(selected).removeClass(unselect); + } + // 阻止事件冒泡 + e.stopPropagation(); + }); + } + return a; + }, + createBody: function () { + // 初始化搜索框的 HTML 内容为空字符串 + var searchHtml = ''; + + // 如果 search 为真，则创建搜索框的 HTML 结构 + if (search) { + searchHtml = '
' + + '' + + '' + + '
'; + } + } + + // 组合dom + // 创建包含图标选择器主体的HTML字符串，并设置其ID为PICKER_BODY + var bodyHtml = '
' + + // 添加搜索框的HTML内容 + searchHtml + + // 添加一个空的列表容器，用于显示图标列表 + '
' + + '
'; + + // 在指定的ICON_BODY元素中找到第一个带有layui-anim类的元素，并将其HTML内容替换为bodyHtml + $('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml); + + // 调用a对象的search方法，创建图标列表，检查图标状态，并进行分页处理 + a.search().createList().check().page(); + + // 返回对象a + return a; + createList: function (text) { + // 创建列表的函数，根据传入的文本过滤图标数据 + var d = data, // 获取全局数据 + l = d.length, // 获取数据长度 + pageHtml = '', // 初始化分页HTML字符串 + listHtml = $('
'); // 创建一个包含类名'layui-iconpicker-list'的div元素 + + // 计算分页数据 + var _limit = limit, // 每页显示数量 + _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 计算总页数，如果整除则直接除，否则加1取整 + _id = PAGE_ID; // 获取当前页面ID + + // 图标列表 + var icons = []; + + for (var i = 0; i < l; i++) { + var obj = d[i]; + + // 判断是否模糊查询，如果text存在且obj中不包含text则跳过当前循环 + if (text && obj.indexOf(text) === -1) { + continue; + } + + // 初始化样式字符串为空 + var style = ''; + // 如果自定义格子宽度不为空 + if (cellWidth !== null) { + // 将自定义的格子宽度添加到样式字符串中 + style += ' style="width:' + cellWidth + '"'; + } + + // 创建一个包含图标的HTML字符串 + var icon = '
'; + + // 在div中添加一个i元素，并设置其class为FontAwesome图标类名 + icon += ''; + + // 关闭div标签 + icon += '
'; + + // 将生成的图标HTML字符串添加到icons数组中 + icons.push(icon); + + // 查询出图标后再分页 + // 获取图标数组的长度 + l = icons.length; + + // 计算总页数，如果图标总数不能被每页限制数量整除，则总页数加1 + _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1); + + // 循环遍历每一页 + for (var i = 0; i < _pages; i++) { + // 创建一个新的div元素，用于存放当前页的图标，并设置其class和id + var lm = $('
'); + + // 循环遍历当前页的所有图标 + for (var j = i * _limit; j < (i + 1) * _limit && j < l; j++) { + // 将当前图标添加到当前页的div中 + lm.append(icons[j]); + } + + // 将当前页的div添加到列表的HTML中 + listHtml.append(lm); + } + // 根据图标的数量和每页显示的限制，将图标分页并添加到列表中 + + // 无数据 + if (l === 0) { + listHtml.append('

无数据

'); + } + + // 判断是否分页 + // 检查是否存在分页参数 + if (page) { + // 为图标选择器主体添加分页样式类 + $('#' + PICKER_BODY).addClass('layui-iconpicker-body-page'); + + // 生成分页HTML结构 + pageHtml = '
' + + '
' + + '1/' + + '' + _pages + '' + + ' (' + l + ')' + + '
' + + '
' + + ' ' + + ' ' + + '
' + + '
'; + } + +// 清空并更新列表和分页的HTML内容 +$('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml); +return a; +}, + + +preventEvent: function () { + // 定义需要绑定事件的元素选择器 + var item = '#' + ICON_BODY + ' .layui-anim'; + // 为元素绑定点击事件，阻止事件冒泡 + a.event('click', item, function (e) { + e.stopPropagation(); + }); + return a; +}, + // 分页功能 + page: function () { + // 获取分页操作图标的选择器 + var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .layui-icon'; + + // 解除之前绑定的点击事件 + $(icon).unbind('click'); + // 为分页操作图标绑定点击事件 + a.event('click', icon, function (e) { + // 获取当前点击的元素 + var elem = e.currentTarget, + // 获取总页数 + total = parseInt($('#' + PAGE_ID + '-pages').html()), + // 判断是否为上一页按钮 + isPrev = $(elem).attr('prev') !== undefined, + // 获取按钮上的页码索引 + index = parseInt($(elem).attr('data-index')), + // 获取当前显示页码的元素 + $cur = $('#' + PAGE_ID + '-current'), + // 获取当前显示的页码 + current = parseInt($cur.html()); + + // 分页数据 + if (isPrev && current > 1) { + // 如果点击的是上一页且当前页码大于1，则将当前页码减1 + current = current - 1; + // 更新上一页图标的data-index属性为新的当前页码 + $(icon + '[prev]').attr('data-index', current); + } else if (!isPrev && current < total) { + // 如果点击的是下一页且当前页码小于总页数，则将当前页码加1 + current = current + 1; + // 更新下一页图标的data-index属性为新的当前页码 + $(icon + '[next]').attr('data-index', current); + } + // 更新当前页码显示 + $cur.html(current); + + // 图标数据 + // 隐藏所有图标限制元素 + $('#' + ICON_BODY + ' .layui-iconpicker-icon-limit').hide(); + // 显示对应页码的图标限制元素 + $('#layui-iconpicker-icon-limit-' + tmp + current).show(); + // 阻止事件冒泡 + e.stopPropagation(); + }); + return a; + }, + + search: function () { + // 为图标搜索输入框绑定输入事件监听器 + var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input'; + a.event('input propertychange', item, function (e) { + // 获取输入框元素及其值 + var elem = e.target, + t = $(elem).val(); + // 根据输入值创建图标列表 + a.createList(t); + }); + // 返回模块对象 a + return a; + }, + + // 定义一个名为 check 的函数，用于处理图标选择器的点击事件 + check: function () { + // 选择图标项的 CSS 选择器 + var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item'; + // 为图标项添加点击事件监听器 + a.event('click', item, function (e) { + // 获取当前点击的图标元素和图标类名 + var el = $(e.currentTarget).find('.fa'), + icon = ''; + + // 分割图标的 class 属性，提取图标类名 + var clsArr = el.attr('class').split(/[\s\n]/), + cls = clsArr[1], + icon = cls; + // 更新标题区域显示的图标 + $('#' + TITLE_ID).find('.layui-iconpicker-item .fa').html('').attr('class', clsArr.join(' ')); + + // 移除所有图标的选中状态并设置当前图标的选中状态 + $('#' + ICON_BODY).removeClass(selected).addClass(unselect); + // 设置输入框的值为当前图标的类名 + $(elem).val(icon).attr('value', icon); + // 回调函数，如果存在则执行 + if (click) { + click({ + icon: icon + }); + } + + }); + // 返回对象 a + return a; + }, + // 监听原始input数值改变 + inputListen: function () { + // 获取元素并转换为jQuery对象 + var el = $(elem); + + // 为元素绑定'change'事件监听器 + a.event('change', elem, function () { + // 获取元素的当前值 + var value = el.val(); + }) + + // 返回对象a + return a; + }, + // 绑定事件到指定元素 + event: function (evt, el, fn) { + // 使用jQuery在BODY元素上绑定事件处理函数 + $(BODY).on(evt, el, fn); + } + + var common = { + // 加载CSS样式函数 + loadCss: function () { + var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height + + // 获取数据的函数 + getData: function (url) { + // 初始化图标列表数组 + var iconlist = []; + // 发起同步的AJAX请求以获取数据 + $.ajax({ + url: url, + type: 'get', + contentType: "application/x-www-form-urlencoded; charset=UTF-8", + async: false, + // 请求成功时的回调函数 + success: function (ret) { + // 正则表达式用于匹配图标名称 + var exp = /fa-var-(.*):/ig; + var result; + // 遍历匹配结果并将图标名称添加到列表中 + while ((result = exp.exec(ret)) != null) { + iconlist.push('fa-' + result[1]); + } + }, + // 请求失败时的回调函数 + error: function (xhr, textstatus, thrown) { + layer.msg('fa图标接口有误'); + } + }); + // 返回获取到的图标列表 + return iconlist; + } + }; + + a.init(); + return new IconPicker(); + }; + + + IconPicker.prototype.checkIcon = function (filter, iconName) { + // 根据过滤器找到对应的元素，获取其下一个元素中的图标项，并设置当前图标名为c + var el = $('*[lay-filter=' + filter + ']'), + p = el.next().find('.layui-iconpicker-item .fa'), + c = iconName; + + // 检查图标名是否包含'#xe'，如果包含则直接设置图标内容，否则设置图标类名为c + if (c.indexOf('#xe') > 0) { + p.html(c); + } else { + p.html('').attr('class', 'fa ' + c); + } + // 设置元素的value属性和实际值为当前图标名c + el.attr('value', c).val(c); + }; + + var iconPicker = new IconPicker(); + // 导出iconPicker模块 + exports(_MOD, iconPicker); + }); \ No newline at end of file diff --git a/stt/index.html b/stt/index.html new file mode 100644 index 0000000..7baaa85 --- /dev/null +++ b/stt/index.html @@ -0,0 +1,229 @@ + + + + + + + 高校宿舍管理系统 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + +
+ + +
+ + + + +
    + +
+ + + + +
+
+ + +
+
+ + +
+ +
+
+ + +
+ + +
+ +
+ +
+ +
+ + 主页/ + + 常规管理/ + + 系统设置 +
+
+ +
+
+
+ +
+ + + + + + + diff --git a/stt/login.html b/stt/login.html new file mode 100644 index 0000000..b382588 --- /dev/null +++ b/stt/login.html @@ -0,0 +1,246 @@ + + + + + + 后台管理-登陆 + + + + + + + + + + + + + + + + + + +
+ + +
+
+ ©版权所有 2020 研真教育 +
+ + + + + + \ No newline at end of file diff --git a/stt/main.html b/stt/main.html new file mode 100644 index 0000000..bbbda38 --- /dev/null +++ b/stt/main.html @@ -0,0 +1,287 @@ + + +
+ +
+ +
+ +
+ +
+ +
+ +
数据统计
+ +
+ +
+ + + + + + + + + + + + + + + + +
楼宇宿舍数量入住人数闲置数量使用率
+
+
+
+
+ +
报表统计
+
+ +
+
+
+
+
+
+
+ +
系统公告
+ +
+
+
+ +
版本信息
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
项目名称 + 高校宿舍管理系统 +
当前版本v1.0.0
后端技术SpringBoot
前端技术Layui框架
+
+
+
+
+
+
+ diff --git a/stt/org.js b/stt/org.js new file mode 100644 index 0000000..a6f49f7 --- /dev/null +++ b/stt/org.js @@ -0,0 +1,120 @@ +layui.define(['ztree', 'jquery','axios'], function (exports) { + "use strict"; + // 定义模块名称为 'selectOrg' + let MOD_NAME = 'selectOrg', + // 引入 layui 的 jQuery 模块 + $ = layui.jquery, + // 引入 layui 的 axios 模块 + axios = layui.axios, + // 引入 layui 的 ztree 模块 + ztree = layui.ztree; + // 定义 selectOrg 类 + let selectOrg = function () { + // 初始化版本号为 '1.1.0' + this.v = '1.1.0'; + }; + + selectOrg.prototype.render = function (opt) { + // 获取目标元素 + let elem = $(opt.elem); + // 获取渲染完成后的回调函数，默认为空函数 + let tableDone = opt.done || function(){}; + // 设置表格高度，默认为315px + opt.height = opt.height || 315; + // 设置表格最小宽度，默认为300px + opt.width = opt.width || 300; + // 为元素绑定点击事件，防止事件冒泡 + elem.off('click').on('click', function(e) { + // 阻止事件冒泡 + e.stopPropagation(); + // 如果页面上已经存在treeSelect元素，则返回false + if($('div.treeSelect').length >= 1){ + return false; + } + // 计算treeSelect的top和left位置 + let t = elem.offset().top + elem.outerHeight()+"px"; + let l = elem.offset().left +"px"; + // 构建treeSelect的HTML结构 + let treeBox = '
'; + // 如果opt.checked为真，则添加确定按钮 + if(opt.checked){ + treeBox += '
'; + } + // 添加ztree容器 + treeBox += '
'; + treeBox += '
'; + // 将treeBox转换为jQuery对象 + treeBox = $(treeBox); + // 将treeBox添加到body元素中 + $('body').append(treeBox); + + + + let setting = { + // 定义树结构的基本数据格式 + data: { + simpleData: { + enable: true // 启用简单数据模式 + } + }, + // 定义点击事件的回调函数 + callback:{ + onClick:function (event, treeId, treeNode) { + // 如果未选中任何节点 + if(!opt.checked){ + $('.treeSelect').remove(); // 移除树选择元素 + opt.done([treeNode]); // 执行完成回调函数并传递当前点击的节点 + } + } + }, + // 定义树节点的选中状态 + check:{ + enable: opt.checked // 根据外部传入的 opt.checked 决定是否启用节点选中功能 + } + }; + + // 使用 axios 获取组织树数据，并初始化 ztree + axios.get('org/tree').then(function (response) { + // 初始化 ztree，传入目标元素、配置和数据 + ztree.init($("#ztree_xx"), setting, response.data); + + // 获取 ztree 对象 + let treeObj = ztree.getZTreeObj("ztree_xx"); + if(opt.checked){ + // 如果 opt.checked 为真，初始化 checked 节点 + opt.selected.forEach(v=>{ + // 根据 id 获取节点 + let checkNodes = treeObj.getNodesByParam("id", v, null); + // 设置节点为选中状态 + treeObj.checkNode(checkNodes[0], true); + }); + // 确定按钮点击事件，获取选中的节点并处理 + $('.tree-sure').click(function () { + // 获取所有选中的节点 + let arr = treeObj.getCheckedNodes(true); + // 调用 done 方法处理选中的节点 + opt.done(arr); + // 更新 opt.selected 为选中节点的 id 数组 + opt.selected = arr.map(item=>item.id); + // 移除树框 + treeBox.remove(); + }); + } + + }).catch(function (error) { + // 捕获并打印错误信息 + console.log(error); + }); + // 监听文档的 mouseup 事件，用于移除树选择框 + $(document).mouseup(function(e){ + // 获取用户设置的容器元素和树选择框元素 + let userSet_con = $(''+opt.elem+',.treeSelect'); + // 如果点击的目标不是用户设置的容器或其子元素，则移除树选择框 + if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){ + treeBox.remove(); + } + }); + + }); // elem end + // 导出模块，创建新的 selectOrg 实例 + exports(MOD_NAME, new selectOrg()); \ No newline at end of file diff --git a/stt/step.js b/stt/step.js new file mode 100644 index 0000000..7e36b04 --- /dev/null +++ b/stt/step.js @@ -0,0 +1,135 @@ +layui.define(['layer', 'carousel'], function (exports) { + // 引入 jQuery 模块 + var $ = layui.jquery; + // 引入 layer 模块 + var layer = layui.layer; + // 引入 carousel 模块 + var carousel = layui.carousel; + + // 添加步骤条dom节点 + var renderDom = function (elem, stepItems, postion) { + // 初始化步骤条的 HTML 字符串 + var stepDiv = '
'; + // 遍历步骤项数组，生成每个步骤项的 HTML + for (var i = 0; i < stepItems.length; i++) { + // 为每个步骤项添加一个包含类名 "step-item" 的 div 标签 + stepDiv += '
'; + // 线 + // 检查当前索引是否小于步骤项数组的最后一个索引 + if (i < (stepItems.length - 1)) { + // 如果当前索引小于目标位置 + if (i < postion) { + // 添加已完成的步骤项尾部HTML代码 + stepDiv += '
'; + } else { + // 添加未完成的步骤项尾部HTML代码 + stepDiv += '
'; + } + } + + // 数字 + // 获取当前步骤的编号 + var number = stepItems[i].number; + + // 如果当前步骤没有编号，则使用默认编号（步骤索引加1） + if (!number) { + number = i + 1; + } + + // 根据当前步骤的位置生成相应的HTML代码 + if (i == postion) { + // 如果当前步骤是活动步骤，添加活动状态的样式 + stepDiv += '
' + number + '
'; + } else if (i < postion) { + // 如果当前步骤在活动步骤之前，添加已完成状态的样式 + stepDiv += '
'; + } else { + // 如果当前步骤在活动步骤之后，添加未完成状态的样式 + stepDiv += '
' + number + '
'; + } + + // 获取当前步骤的标题和描述 + var title = stepItems[i].title; + var desc = stepItems[i].desc; + + // 如果标题或描述存在，则创建包含标题和描述的HTML结构 + if (title || desc) { + stepDiv += '
'; + + // 如果标题存在，添加标题的HTML结构 + if (title) { + stepDiv += '
' + title + '
'; + } + + // 如果描述存在，添加描述的HTML结构 + if (desc) { + stepDiv += '
' + desc + '
'; + } + + stepDiv += '
'; + } + + // 关闭当前步骤的div标签 + stepDiv += '
'; + } + + // 关闭所有步骤的容器div标签 + stepDiv += '
'; + + // 将生成的HTML插入到指定的元素中 + $(elem).prepend(stepDiv); + + // 计算每一个条目的宽度，使其平均分布 + var bfb = 100 / stepItems.length; + $('.step-item').css('width', bfb + '%'); +}; + + var step = { + // 渲染步骤条 + render: function (param) { + param.indicator = 'none'; // 不显示指示器 + param.arrow = 'always'; // 始终显示箭头 + param.autoplay = false; // 关闭自动播放 + if (!param.stepWidth) { + param.stepWidth = '400px'; // 如果未设置步骤条宽度，则默认为400px + } + + // 渲染轮播图 + carousel.render(param); + + // 渲染步骤条 + var stepItems = param.stepItems; + renderDom(param.elem, stepItems, 0); // 初始渲染步骤条DOM元素 + $('.lay-step').css('width', param.stepWidth); // 设置步骤条的宽度 + + //监听轮播切换事件 + carousel.on('change(' + param.filter + ')', function (obj) { + $(param.elem).find('.lay-step').remove(); // 移除旧的步骤条DOM元素 + renderDom(param.elem, stepItems, obj.index); // 根据当前索引重新渲染步骤条DOM元素 + $('.lay-step').css('width', param.stepWidth); // 设置步骤条的宽度 + }); + + // 隐藏左右箭头按钮 + $(param.elem).find('.layui-carousel-arrow').css('display', 'none'); + + // 去掉轮播图的背景颜色 + $(param.elem).css('background-color', 'transparent'); + }, + // 下一步 + next: function (elem) { + // 触发点击事件，使轮播图切换到下一张 + $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click'); + }, + // 上一步 + pre: function (elem) { + // 触发点击事件，使轮播图切换到上一张 + $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click'); + } + }; + + // 加载外部CSS文件 + layui.link(layui.cache.base + 'step-lay/step.css'); + + // 导出模块 + exports('step', step); +}); diff --git a/stt/store.js b/stt/store.js new file mode 100644 index 0000000..182f5b0 --- /dev/null +++ b/stt/store.js @@ -0,0 +1,41 @@ +layui.define([], function (exports) { + // 定义一个存储模块，用于处理本地存储操作 + exports("store", store = { + // 设置 token 到本地存储 + setToken: function (token) { + // 将传入的 token 值保存到 localStorage 中，键名为 "token" + localStorage.setItem("token", token) + }, + // 从本地存储获取 token + getToken: function () { + // 从本地存储中获取名为 "token" 的项并返回其值 + return localStorage.getItem("token"); + }, + // 清除本地存储中的 token + clear: function () { + return localStorage.removeItem("token"); + }, + // 设置登录信息到本地存储 + setLoginInfo: function (obj, type) { + // 如果传入的用户对象存在 + if (obj) { + // 将用户名存储到本地存储中 + localStorage.setItem("userName", obj.name); + // 将用户类型存储到本地存储中 + localStorage.setItem("type", type); + } + } + } + }, + // 从本地存储获取用户名 + getLoginInfo: function () { + // 从localStorage中获取键为"userName"的值并返回 + return localStorage.getItem("userName"); + } + }, + // 从本地存储获取登录类型 + getLoginType: function () { + return localStorage.getItem("type"); + } + }); +}); \ No newline at end of file diff --git a/stt/treetable.js b/stt/treetable.js new file mode 100644 index 0000000..5fad3f9 --- /dev/null +++ b/stt/treetable.js @@ -0,0 +1,301 @@ +layui.define(['layer', 'table'], function (exports) { + // 引入jQuery库 + var $ = layui.jquery; + // 引入layer模块 + var layer = layui.layer; + // 引入table模块 + var table = layui.table; + + var treetable = { + + render: function (param) { + // 检查参数是否合法 + if (!treetable.checkParam(param)) { + // 如果参数不合法，直接返回 + return; + } + // 获取数据 + if (param.data) { + // 如果参数中包含数据，则直接初始化树表 + treetable.init(param, param.data); + } else { + // 如果参数中不包含数据，则通过AJAX请求获取数据并初始化树表 + $.getJSON(param.url, param.where, function (res) { + treetable.init(param, res.data); + }); + } + }, + }; + }); + + // 渲染表格 + init: function (param, data) { + // 存储处理后的数据 + var mData = []; + // 保存回调函数 + var doneCallback = param.done; + // 获取传入的节点数据 + var tNodes = data; + // 补上id和pid字段 + for (var i = 0; i < tNodes.length; i++) { + var tt = tNodes[i]; + // 检查tt对象是否有id属性，如果没有则进行以下操作 + if (!tt.id) { + // 如果param对象中没有treeIdName属性，提示错误信息并返回 + if (!param.treeIdName) { + layer.msg('参数treeIdName不能为空', {icon: 5}); + return; + } + // 将tt对象的id属性设置为tt对象中对应treeIdName属性的值 + tt.id = tt[param.treeIdName]; + } + + // 检查tt对象是否有pid属性，如果没有则进行以下操作 + if (!tt.pid) { + // 如果param对象中没有treePidName属性，提示错误信息并返回 + if (!param.treePidName) { + layer.msg('参数treePidName不能为空', {icon: 5}); + return; + } + // 将tt对象的pid属性设置为tt对象中对应treePidName属性的值 + tt.pid = tt[param.treePidName]; + } + + + + var sort = function (s_pid, data) { + // 遍历数据数组中的每一个元素 + for (var i = 0; i < data.length; i++) { + // 如果当前元素的父节点ID等于传入的父节点ID + if (data[i].pid == s_pid) { + // 获取mData数组的长度 + var len = mData.length; + // 如果mData数组不为空且最后一个元素的ID等于传入的父节点ID + if (len > 0 && mData[len - 1].id == s_pid) { + // 将最后一个元素的isParent属性设置为true + mData[len - 1].isParent = true; + } + // 将当前元素添加到mData数组中 + mData.push(data[i]); + // 递归调用sort函数，处理当前元素的子节点 + sort(data[i].id, data); + } + } + }; + sort(param.treeSpid, tNodes); + // 对树形节点进行排序 + + param.url = undefined; + // 将参数中的URL设置为undefined + + param.data = mData; + // 将处理后的数据赋值给参数的data属性 + + param.page = { + count: param.data.length, + limit: param.data.length + }; + // 设置分页信息，count和limit都为数据的长度 + + param.cols[0][param.treeColIndex].templet = function (d) { + // 定义树表列的模板函数 + + var mId = d.id; + // 获取当前节点的ID + + var mPid = d.pid; + // 获取当前节点的父节点ID + + var isDir = d.isParent; + // 判断当前节点是否为目录（是否有子节点） + + var emptyNum = treetable.getEmptyNum(mPid, mData); + // 计算当前节点前面的空位数量 + + var iconHtml = ''; + // 初始化图标HTML字符串 + + for (var i = 0; i < emptyNum; i++) { + iconHtml += ''; + // 根据空位数量生成相应数量的空位图标 + } + if (isDir) { + // 如果是目录，添加两个图标：一个三角形和一个图层图标 + iconHtml += ' '; + } else { + // 如果是文件，添加一个文件图标 + iconHtml += ''; + } + // 添加两个空格作为间隔 + iconHtml += '  '; + // 根据是否是目录设置类型为'dir'或'file' + var ttype = isDir ? 'dir' : 'file'; + // 创建包含图标和名称的HTML字符串 + var vg = ''; + // 返回完整的HTML字符串 + return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '' + + param.done = function (res, curr, count) { + // 在目标元素后插入一个带有'class'为'treeTable'的元素 + $(param.elem).next().addClass('treeTable'); + + // 隐藏'treeTable'中的分页控件 + $('.treeTable .layui-table-page').css('display', 'none'); + + // 设置'treeTable'元素的'treeLinkage'属性 + $(param.elem).next().attr('treeLinkage', param.treeLinkage); + + // 如果设置了默认关闭树形结构，则折叠所有节点 + if (param.treeDefaultClose) { + treetable.foldAll(param.elem); + } + + // 如果存在回调函数，则执行回调函数 + if (doneCallback) { + doneCallback(res, curr, count); + } + }; + + // 渲染表格 + table.render(param); + }, + // 计算缩进的数量 + getEmptyNum: function (pid, data) { + // 初始化缩进数量为0 + var num = 0; + // 如果pid不存在，直接返回缩进数量0 + if (!pid) { + return num; + } + // 临时变量tPid用于存储当前节点的父节点ID + var tPid; + // 遍历数据数组 + for (var i = 0; i < data.length; i++) { + if (pid == data[i].id) { + // 如果当前节点的父ID与目标ID匹配，则计数器加1 + num += 1; + // 更新tPid为当前节点的父ID + tPid = data[i].pid; + // 跳出循环 + break; + } + return num + treetable.getEmptyNum(tPid, data); + // 返回当前节点及其子节点的数量总和 + }, + // 展开/折叠行 + toggleRows: function ($dom, linkage) { + // 获取当前行的lay-ttype属性值 + var type = $dom.attr('lay-ttype'); + // 如果类型是'file'，直接返回 + if ('file' == type) { + return; + } + // 获取当前行的lay-tid属性值 + var mId = $dom.attr('lay-tid'); + // 判断当前行是否处于打开状态 + var isOpen = $dom.hasClass('open'); + if (isOpen) { + // 如果当前状态是打开的，移除 'open' 类 + $dom.removeClass('open'); + } else { + // 如果当前状态是关闭的，添加 'open' 类 + $dom.addClass('open'); + } + + // 遍历当前元素最近的父级 中的所有 元素 + $dom.closest('tbody').find('tr').each(function () { + // 获取当前行中的树表图标元素 + var $ti = $(this).find('.treeTable-icon'); + // 获取图标元素的父节点 ID + var pid = $ti.attr('lay-tpid'); + // 获取图标元素的类型（目录或文件） + var ttype = $ti.attr('lay-ttype'); + // 判断图标元素是否处于打开状态 + var tOpen = $ti.hasClass('open'); + + // 如果当前行的父节点 ID 与目标 ID 相同 + if (mId == pid) { + if (isOpen) { + // 如果当前状态是打开的，隐藏当前行 + $(this).hide(); + // 如果当前行的类型是目录且其打开状态与当前状态一致，触发点击事件 + if ('dir' == ttype && tOpen == isOpen) { + $ti.trigger('click'); + } + } else { + // 如果当前状态是关闭的，显示当前行 + $(this).show(); + // 如果需要联动且当前行的类型是目录且其打开状态与当前状态一致，触发点击事件 + if (linkage && 'dir' == ttype && tOpen == isOpen) { + $ti.trigger('click'); + } + } + } + }); + // 检查参数 + checkParam: function (param) { + if (!param.treeSpid && param.treeSpid != 0) { + // 如果参数treeSpid为空且不等于0，则弹出提示信息并返回false + layer.msg('参数treeSpid不能为空', {icon: 5}); + return false; + } + + if (!param.treeColIndex && param.treeColIndex != 0) { + // 如果参数treeColIndex为空且不等于0，则弹出提示信息并返回false + layer.msg('参数treeColIndex不能为空', {icon: 5}); + return false; + } + // 参数验证通过，返回true + return true; + }, + // 展开所有 + expandAll: function (dom) { + // 查找指定DOM元素的下一个兄弟元素中的树表，遍历其每一行 + $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { + // 获取当前行的树图标元素 + var $ti = $(this).find('.treeTable-icon'); + // 获取树图标的类型属性 + var ttype = $ti.attr('lay-ttype'); + // 判断树图标是否处于打开状态 + var tOpen = $ti.hasClass('open'); + // 如果类型是目录且未打开，则触发点击事件以展开目录 + if ('dir' == ttype && !tOpen) { + $ti.trigger('click'); + } + }); + }, + // 折叠所有树节点 + foldAll: function (dom) { + // 遍历指定DOM元素下的所有树表行 + $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () { + // 获取当前行的图标元素 + var $ti = $(this).find('.treeTable-icon'); + // 获取图标元素的类型属性 + var ttype = $ti.attr('lay-ttype'); + // 判断图标是否处于打开状态 + var tOpen = $ti.hasClass('open'); + // 如果图标类型为目录且处于打开状态，则触发点击事件以折叠该节点 + if ('dir' == ttype && tOpen) { + $ti.trigger('click'); + } + }); + } +}; + +// 加载树表样式文件 +layui.link(layui.cache.base + 'treetable-lay/treetable.css'); + +// 给图标列绑定点击事件 +$('body').on('click', '.treeTable .treeTable-icon', function () { + // 获取当前树表的联动属性值 + var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage'); + // 根据联动属性值决定是否联动展开或折叠行 + if ('true' == treeLinkage) { + treetable.toggleRows($(this), true); + } else { + treetable.toggleRows($(this), false); + } +}); + // 导出 treetable 模块，使其可以在其他文件中被引用和使用 + exports('treetable', treetable); +}); \ No newline at end of file diff --git a/stt/wangEditor.js b/stt/wangEditor.js new file mode 100644 index 0000000..5cc8d10 --- /dev/null +++ b/stt/wangEditor.js @@ -0,0 +1,5451 @@ +(function (global, factory) { + // 检查是否在Node.js环境中，如果是则使用CommonJS模块规范导出 + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + // 检查是否在AMD环境中，如果是则使用AMD模块定义 + typeof define === 'function' && define.amd ? define(factory) : + // 否则将wangEditor挂载到全局对象上 + (global.wangEditor = factory()); +}(this, (function () { 'use strict'; + + +var polyfill = function () { + + // Object.assign的polyfill实现 + if (typeof Object.assign != 'function') { + Object.assign = function (target, varArgs) { + // 如果目标对象为null或undefined，抛出TypeError异常 + if (target == null) { + // 如果目标对象为null或undefined，抛出类型错误异常 + throw new TypeError('Cannot convert undefined or null to object'); + } + + // 将目标对象转换为一个普通对象 + var to = Object(target); + + // 遍历所有传入的源对象 + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + // 如果当前源对象不为null或undefined + if (nextSource != null) { + // 遍历当前源对象的所有属性 + for (var nextKey in nextSource) { + // 确保只复制源对象自身的属性，而不是继承的属性 + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + // 将当前属性赋值给目标对象 + to[nextKey] = nextSource[nextKey]; + } + } + } + } + // 返回合并后的目标对象 + return to; + }; + + + // 检查浏览器是否支持 matches 方法，如果不支持则进行扩展 + if (!Element.prototype.matches) { + // 将 matches 方法定义为 matchesSelector、mozMatchesSelector、msMatchesSelector、oMatchesSelector 或 webkitMatchesSelector 中的一种 + Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) { + // 使用 querySelectorAll 获取所有匹配选择器的元素 + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + // 遍历匹配的元素列表，查找当前元素是否存在于其中 + while (--i >= 0 && matches.item(i) !== this) {} + // 如果找到当前元素，返回 true；否则返回 false + return i > -1; + }; + } + +// 根据 html 代码片段创建 dom 对象 + +function createElemByHTML(html) { + // 声明一个变量div，用于存储创建的div元素 + var div = void 0; + // 创建一个新的div元素并赋值给div变量 + div = document.createElement('div'); + // 将传入的HTML字符串设置为div元素的innerHTML + div.innerHTML = html; + // 返回div元素的子元素集合 + return div.children; +} + + + +function isDOMList(selector) { + // 如果选择器为空，返回false + if (!selector) { + return false; + } + // 如果选择器是HTMLCollection或NodeList的实例，返回true + if (selector instanceof HTMLCollection || selector instanceof NodeList) { + return true; + } + // 默认情况下，返回false + return false; +} + + + +function querySelectorAll(selector) { + // 使用document.querySelectorAll方法根据选择器查找元素 + var result = document.querySelectorAll(selector); + + // 判断result是否为DOMList类型 + if (isDOMList(result)) { + // 如果是DOMList类型，直接返回结果 + return result; + } else { + // 如果不是DOMList类型，将结果包装成数组后返回 + return [result]; + } +} + +// 记录所有的事件绑定 +var eventList = []; + +// 创建构造函数 + +function DomElement(selector) { + // 如果未传入选择器，则直接返回 + if (!selector) { + return; + } + + // 如果传入的是DomElement实例，则直接返回该实例 + if (selector instanceof DomElement) { + return selector; + } + + // 将选择器赋值给当前实例的selector属性 + this.selector = selector; + // 获取选择器的节点类型 + var nodeType = selector.nodeType; + + // 定义一个空数组用于存储选择结果 + var selectorResult = []; + // 如果选择器是文档节点（nodeType为9），则将其放入数组中 + if (nodeType === 9) { + selectorResult = [selector]; + // 如果选择器是元素节点（nodeType为1），则将其放入数组中 + } else if (nodeType === 1) { + selectorResult = [selector]; + // 如果选择器是DOM列表或数组，则直接赋值给selectorResult + } else if (isDOMList(selector) || selector instanceof Array) { + selectorResult = selector; + // 如果选择器是字符串类型 + } else if (typeof selector === 'string') { + // 去除选择器中的换行符并去除首尾空格 + selector = selector.replace('/\n/mg', '').trim(); + // 如果选择器以'<'开头，表示HTML字符串，创建对应的DOM元素 + if (selector.indexOf('<') === 0) { + selectorResult = createElemByHTML(selector); + // 否则，使用querySelectorAll方法查找匹配的元素 + } else { + selectorResult = querySelectorAll(selector); + } + } + + // 获取选择器结果的长度 + var length = selectorResult.length; + + // 如果长度为0，则直接返回当前对象 + if (!length) { + + return this; + } + + // 声明变量i并初始化为undefined + var i = void 0; + + // 循环遍历从0到length的每一个索引 + for (i = 0; i < length; i++) { + // 将selectorResult数组中对应索引的值赋给当前对象的相应位置 + this[i] = selectorResult[i]; + } + + // 设置当前对象的长度属性为传入的length值 + this.length = length; + + +omElement.prototype = { + constructor: DomElement, + + + forEach: function forEach(fn) { + // 声明变量i用于循环计数 + var i = void 0; + // 遍历当前对象的每一个元素 + for (i = 0; i < this.length; i++) { + // 获取当前元素 + var elem = this[i]; + // 调用传入的函数，并将当前元素和索引作为参数传递 + var result = fn.call(elem, elem, i); + // 如果传入的函数返回false，则中断循环 + if (result === false) { + break; + } + } + // 返回当前对象以支持链式调用 + return this; + }, + + + + clone: function clone(deep) { + // 创建一个空数组用于存储克隆的节点 + var cloneList = []; + // 遍历当前对象的每个元素 + this.forEach(function (elem) { + // 将克隆的节点（根据deep参数决定是否深度克隆）添加到cloneList中 + cloneList.push(elem.cloneNode(!!deep)); + }); + // 返回包含克隆节点的新对象 + return $(cloneList); + }, + + + get: function get(index) { + // 获取当前对象的长度 + var length = this.length; + // 如果索引大于等于长度，则取模以循环索引 + if (index >= length) { + index = index % length; + } + // 返回指定索引处的元素，并包装成jQuery对象 + return $(this[index]); + }, + + first: function first() { + // 调用get方法获取第一个元素 + return this.get(0); + }, + + last: function last() { + // 获取当前对象的长度 + var length = this.length; + // 调用get方法获取最后一个元素 + return this.get(length - 1); + }, + + on: function on(type, selector, fn) { + // 如果fn未定义，则将selector赋值给fn，并将selector置为空 + if (!fn) { + fn = selector; + selector = null; + } + + + // 初始化一个空数组，用于存储事件类型 + var types = []; + // 将传入的事件类型字符串按空格分割成数组 + types = type.split(/\s+/); + + // 遍历当前对象的每一个元素 + return this.forEach(function (elem) { + // 遍历每一个事件类型 + types.forEach(function (type) { + // 如果事件类型为空，则跳过本次循环 + if (!type) { + return; + } + + // 将事件信息（元素、事件类型、处理函数）推入事件列表 + eventList.push({ + elem: elem, + type: type, + fn: fn + }); + + // 如果没有选择器，直接在元素上添加事件监听器 + if (!selector) { + elem.addEventListener(type, fn); + return; + } + + + elem.addEventListener(type, function (e) { + // 获取事件的目标元素 + var target = e.target; + // 如果目标元素匹配选择器 + if (target.matches(selector)) { + // 调用传入的函数，并将目标元素和事件对象作为参数传递 + fn.call(target, e); + } + }); + + off: function off(type, fn) { + // 遍历当前对象中的每一个元素，移除指定类型的事件监听器 + return this.forEach(function (elem) { + elem.removeEventListener(type, fn); + }); + }, + + attr: function attr(key, val) { + if (val == null) { + // 如果val为null或undefined，则获取第一个元素的指定属性值 + return this[0].getAttribute(key); + } else { + // 如果val不为null或undefined，则设置每个元素的指定属性值 + return this.forEach(function (elem) { + elem.setAttribute(key, val); + }); + } + }, + + + addClass: function addClass(className) { + // 如果 className 为空，直接返回当前对象 + if (!className) { + return this; + } + // 遍历当前对象中的每个元素 + return this.forEach(function (elem) { + var arr = void 0; + // 如果元素已经有 className + if (elem.className) { + // 解析当前 className 转换为数组 + arr = elem.className.split(/\s/); + // 过滤掉空白的 class 名称 + arr = arr.filter(function (item) { + return !!item.trim(); + }); + // 如果数组中不包含新的 className，则添加它 + if (arr.indexOf(className) < 0) { + arr.push(className); + } + // 将数组重新拼接成字符串并赋值给元素的 className + elem.className = arr.join(' '); + } else { + // 如果元素没有 className，直接赋值新的 className + elem.className = className; + } + }); + }, + + // 删除 class + removeClass: function removeClass(className) { + // 如果 className 为空，直接返回当前对象 + if (!className) { + return this; + } + // 遍历每一个元素 + return this.forEach(function (elem) { + var arr = void 0; + // 如果元素有 className 属性 + if (elem.className) { + // 解析当前 className 转换为数组 + arr = elem.className.split(/\s/); + // 过滤掉要删除的 className + arr = arr.filter(function (item) { + item = item.trim(); + // 删除 class + if (!item || item === className) { + return false; + } + return true; + }); + // 修改 elem.class + elem.className = arr.join(' '); + } + }); + }, + + + css: function css(key, val) { + // 将传入的键值对转换为CSS样式字符串 + var currentStyle = key + ':' + val + ';'; + + // 遍历当前对象中的每一个元素 + return this.forEach(function (elem) { + // 获取元素的style属性，并去除首尾空格 + var style = (elem.getAttribute('style') || '').trim(); + var styleArr = void 0, + resultArr = []; + + // 如果style属性不为空 + if (style) { + // 将style属性按分号分割成数组 + styleArr = style.split(';'); + + // 遍历style数组中的每一个项 + styleArr.forEach(function (item) { + // 将每一项按冒号分割成键值对数组，并去除首尾空格 + var arr = item.split(':').map(function (i) { + return i.trim(); + }); + + // 如果键值对数组长度为2，则将其重新组合成字符串并加入结果数组 + if (arr.length === 2) { + resultArr.push(arr[0] + ':' + arr[1]); + } + }); + // 遍历resultArr数组，对每个元素进行处理 + resultArr = resultArr.map(function (item) { + // 如果当前元素的开头部分与key相同，则替换为currentStyle + if (item.indexOf(key) === 0) { + return currentStyle; + } else { + // 否则保持原样 + return item; + } + }); + + // 如果resultArr中不包含currentStyle，则将其添加到resultArr末尾 + if (resultArr.indexOf(currentStyle) < 0) { + resultArr.push(currentStyle); + } + + // 将处理后的样式数组转换为字符串并设置为元素的style属性 + elem.setAttribute('style', resultArr.join('; ')); + } else { + // 如果不需要合并样式，直接设置元素的style属性为currentStyle + elem.setAttribute('style', currentStyle); + } + + + show: function show() { + // 将元素的CSS display属性设置为'block'，使其显示 + return this.css('display', 'block'); + }, + + hide: function hide() { + // 将元素的CSS display属性设置为'none'，使其隐藏 + return this.css('display', 'none'); + }, + + children: function children() { + // 获取当前元素的第一个子元素 + var elem = this[0]; + if (!elem) { + // 如果当前元素不存在，返回null + return null; + } + + // 返回当前元素的所有子元素，使用$函数包装成jQuery对象 + return $(elem.children); + }, + + childNodes: function childNodes() { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 如果元素不存在，返回null + if (!elem) { + return null; + } + + // 返回该元素的所有子节点 + return $(elem.childNodes); + }, + + append: function append($children) { + // 遍历当前对象中的每个元素 + return this.forEach(function (elem) { + // 遍历要添加的子节点 + $children.forEach(function (child) { + // 将子节点添加到当前元素中 + elem.appendChild(child); + }); + }); + }, + + remove: function remove() { + // 遍历当前对象中的每一个元素 + return this.forEach(function (elem) { + // 如果元素有remove方法，则调用该方法移除元素 + if (elem.remove) { + elem.remove(); + } else { + // 否则获取元素的父节点并从父节点中移除该元素 + var parent = elem.parentElement; + parent && parent.removeChild(elem); + } + }); + }, + + isContain: function isContain($child) { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 获取传入子元素的第一个元素 + var child = $child[0]; + // 判断当前元素是否包含传入的子元素 + return elem.contains(child); + }, + + getSizeData: function getSizeData() { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 返回元素的边界矩形数据，包括 bottom, height, left, right, top, width 等属性 + return elem.getBoundingClientRect(); // 可得到 bottom height left right top width 的数据 + }, + + getNodeName: function getNodeName() { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 返回元素的节点名称 + return elem.nodeName; + }, + + + find: function find(selector) { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 使用querySelectorAll查找子元素，并返回包装后的结果 + return $(elem.querySelectorAll(selector)); + }, + + text: function text(val) { + if (!val) { + // 如果未传入参数，则获取第一个元素的文本内容 + var elem = this[0]; + // 移除HTML标签，只保留纯文本 + return elem.innerHTML.replace(/<.*?>/g, function () { + return ''; + }); + } else { + // 如果传入了参数，则设置每个元素的文本内容 + return this.forEach(function (elem) { + elem.innerHTML = val; + }); + } + }, + + + html: function html(value) { + // 获取当前对象的第一个元素 + var elem = this[0]; + + // 如果传入的值为null或undefined，则返回元素的innerHTML内容 + if (value == null) { + return elem.innerHTML; + } else { + // 否则，将传入的值设置为元素的innerHTML内容 + elem.innerHTML = value; + // 返回当前对象以支持链式调用 + return this; + } + }, + + val: function val() { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 返回该元素的值，并去除前后空格 + return elem.value.trim(); + }, + + focus: function focus() { + // 遍历当前对象的每一个元素 + return this.forEach(function (elem) { + // 将焦点设置到当前元素上 + elem.focus(); + }); + }, + + parent: function parent() { + // 获取当前对象的第一个元素 + var elem = this[0]; + // 返回该元素的父元素，并包装成jQuery对象 + return $(elem.parentElement); + }, + + + parentUntil: function parentUntil(selector, _currentElem) { + // 使用querySelectorAll查找所有匹配选择器的元素 + var results = document.querySelectorAll(selector); + // 获取匹配元素的数量 + var length = results.length; + // 如果没有匹配的元素 + if (!length) { + // 返回null + return null; + } + + var elem = _currentElem || this[0]; // 获取当前元素，如果未定义则使用this的第一个元素 + if (elem.nodeName === 'BODY') { // 如果当前元素的节点名称是'BODY' + return null; // 返回null + } + + var parent = elem.parentElement; // 获取当前元素的父元素 + var i = void 0; // 声明变量i并初始化为undefined + for (i = 0; i < length; i++) { // 遍历长度为length的数组 + if (parent === results[i]) { // 如果父元素等于results数组中的某个元素 + // 找到，并返回 + return $(parent); // 返回父元素的jQuery对象 + } + } + + // 继续查找父元素，直到找到匹配选择器的父元素 + return this.parentUntil(selector, parent); +}, + +// 判断两个 elem 是否相等 +equal: function equal($elem) { + // 如果传入的 $elem 是一个节点类型为1的元素（即元素节点） + if ($elem.nodeType === 1) { + // 比较当前对象的第一个元素和传入的 $elem 是否相同 + return this[0] === $elem; + } else { + // 否则，比较当前对象的第一个元素和传入的 $elem 的第一个元素是否相同 + return this[0] === $elem[0]; + } +}, + + // 将该元素插入到某个元素前面 + insertBefore: function insertBefore(selector) { + // 获取参考节点的jQuery对象 + var $referenceNode = $(selector); + // 获取参考节点的DOM对象 + var referenceNode = $referenceNode[0]; + // 如果参考节点不存在，直接返回当前对象 + if (!referenceNode) { + return this; + } + // 遍历当前对象中的每个元素 + return this.forEach(function (elem) { + // 获取参考节点的父节点 + var parent = referenceNode.parentNode; + // 将当前元素插入到参考节点之前 + parent.insertBefore(elem, referenceNode); + }); + }, + + // 将该元素插入到某个元素后面 + insertAfter: function insertAfter(selector) { + // 获取参考节点的jQuery对象 + var $referenceNode = $(selector); + // 获取参考节点的DOM对象 + var referenceNode = $referenceNode[0]; + // 如果参考节点不存在，直接返回当前对象 + if (!referenceNode) { + return this; + } + // 遍历当前对象中的每个元素 + return this.forEach(function (elem) { + // 获取参考节点的父节点 + var parent = referenceNode.parentNode; + // 如果参考节点是父节点的最后一个子节点 + if (parent.lastChild === referenceNode) { + // 将当前元素追加到父节点的末尾 + parent.appendChild(elem); + } else { + // 否则，将当前元素插入到参考节点的下一个兄弟节点之前 + parent.insertBefore(elem, referenceNode.nextSibling); + } + }); + } + + +function $(selector) { + // 创建一个新的DomElement对象并返回 + return new DomElement(selector); +} + + +$.offAll = function () { + // 遍历事件列表 + eventList.forEach(function (item) { + // 获取元素、事件类型和处理函数 + var elem = item.elem; + var type = item.type; + var fn = item.fn; + // 解绑事件监听器 + elem.removeEventListener(type, fn); + }); +}; + + + + +var config = { + + // 默认菜单配置，包含各种编辑功能按钮 + menus: ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'], + + // 字体名称列表 + fontNames: ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'], + + // 颜色代码数组，用于设置文本和背景颜色 + colors: ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff'], + + // 表情配置 + emotions: [{ + // tab 的标题 + title: '默认', + // type -> 'emoji' / 'image'，表示表情的类型是图片 + type: 'image', + // content -> 数组，包含表情的具体信息 + content: [{ + // alt 属性为表情的描述文字 + alt: '[坏笑]', + // src 属性为表情图片的 URL + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png' + }, { + alt: '[舔屏]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png' + }, { + alt: '[污]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png' + }] + }, { + // tab 的标题 + title: '新浪', + // type -> 'emoji' / 'image' + type: 'image', + // content -> 数组，包含多个表情图片对象 + content: [{ + // 表情图片的 URL 地址 + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif', + // 表情图片的替代文本 + alt: '[草泥马]' + }, { + // 表情图片的 URL 地址 + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif', + // 表情图片的替代文本 + alt: '[神马]' + }, { + // 表情图片的 URL 地址 + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif', + // 表情图片的替代文本 + alt: '[浮云]' + }] +}, { + // tab 的标题 + title: 'emoji', + // type -> 'emoji' / 'image' + type: 'emoji', + // content -> 数组，包含多个 emoji 字符 + content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/) +}], + title: 'emoji', + // type -> 'emoji' / 'image' + type: 'emoji', + // content -> 数组，包含多个 emoji 字符 + content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/) +}], + + // 编辑区域的 z-index + zIndex: 10000, + + // 是否开启 debug 模式（debug 模式下错误会 throw error 形式抛出） + debug: false, + + // 插入链接时候的格式校验 + linkCheck: function linkCheck(text, link) { + // text 是插入的文字 + // link 是插入的链接 + return true; // 返回 true 即表示成功 + // return '校验失败' // 返回字符串即表示失败的提示信息 + }, + + // 插入网络图片的校验 + linkImgCheck: function linkImgCheck(src) { + // src 即图片的地址 + return true; // 返回 true 即表示成功 + // return '校验失败' // 返回字符串即表示失败的提示信息 + }, + + // 粘贴过滤样式，默认开启 + pasteFilterStyle: true, + + // 粘贴内容时，忽略图片。默认关闭 + pasteIgnoreImg: false, + + + pasteTextHandle: function pasteTextHandle(content) { + // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回 + return content; + }, + + showLinkImg: true, + + // 插入网络图片的回调 + linkImgCallback: function linkImgCallback(url) { + // console.log(url) // url 即插入图片的地址 + }, + + // 默认上传图片 max size: 5M + uploadImgMaxSize: 5 * 1024 * 1024, + + // 配置一次最多上传几个图片 + // uploadImgMaxLength: 5, + + // 上传图片，是否显示 base64 格式 + uploadImgShowBase64: false, + + // 上传图片，server 地址（如果有值，则 base64 格式的配置则失效） + // uploadImgServer: '/upload', + + // 自定义配置 filename + uploadFileName: '', + + // 上传图片的自定义参数 + uploadImgParams: { + // token: 'abcdef12345' + }, + + // 上传图片的自定义header + uploadImgHeaders: { + // 'Accept': 'text/x-json' + }, + + // 配置 XHR withCredentials + withCredentials: false, + + // 自定义上传图片超时时间 ms + uploadImgTimeout: 10000, + + // 上传图片 hook + uploadImgHooks: { + + before: function before(xhr, editor, files) { + + }, + success: function success(xhr, editor, result) { + // 图片上传并返回结果，图片插入成功之后触发 + }, + fail: function fail(xhr, editor, result) { + // 图片上传并返回结果，但图片插入错误时触发 + }, + error: function error(xhr, editor) { + // 图片上传出错时触发 + }, + timeout: function timeout(xhr, editor) { + // 图片上传超时时触发 + } + }, + + // 是否上传七牛云，默认为 false + qiniu: false + +}; + + +var UA = { + // 获取用户代理字符串 + _ua: navigator.userAgent, + + // 判断是否为 Webkit 内核的浏览器 + isWebkit: function isWebkit() { + // 定义匹配 Webkit 的正则表达式 + var reg = /webkit/i; + // 测试用户代理字符串是否包含 'webkit' + return reg.test(this._ua); + }, + + // 判断是否为 IE 浏览器 + isIE: function isIE() { + // 检查 window 对象中是否存在 ActiveXObject 属性 + return 'ActiveXObject' in window; + } +}; + + + +function objForEach(obj, fn) { + // 定义变量key用于存储当前遍历的属性名 + var key = void 0, + // 定义变量result用于存储函数fn的返回值 + result = void 0; + // 使用for...in循环遍历对象的所有可枚举属性 + for (key in obj) { + // 检查属性是否是对象自身的属性（而不是继承自原型链） + if (obj.hasOwnProperty(key)) { + // 调用传入的函数fn，并将当前属性名和属性值作为参数传递 + result = fn.call(obj, key, obj[key]); + // 如果函数fn返回false，则中断循环 + if (result === false) { + break; + } + } + } +} + + + +function arrForEach(fakeArr, fn) { + // 声明变量i用于循环计数，item用于存储当前元素，result用于存储函数返回值 + var i = void 0, + item = void 0, + result = void 0; + // 获取伪数组的长度，如果长度为undefined则默认为0 + var length = fakeArr.length || 0; + // 使用for循环遍历伪数组 + for (i = 0; i < length; i++) { + // 获取当前元素 + item = fakeArr[i]; + // 调用传入的函数，并将当前元素、索引和数组本身作为参数传递 + result = fn.call(fakeArr, item, i); + // 如果函数返回false，则中断循环 + if (result === false) { + break; + } + } +} + + + +function getRandom(prefix) { + // 使用Math.random()生成一个0到1之间的随机数，并将其转换为字符串 + // 然后通过slice(2)去掉字符串的前两位（即"0."），只保留小数部分 + return prefix + Math.random().toString().slice(2); +} + + +/function replaceHtmlSymbol(html) { + // 如果输入的HTML字符串为null，则返回空字符串 + if (html == null) { + return ''; + } + // 使用正则表达式替换HTML字符串中的<、>、"和换行符为对应的HTML实体 + return html.replace(//gm, '>') // 替换所有的>为> + .replace(/"/gm, '"') // 替换所有的"为" + .replace(/(\r\n|\r|\n)/g, '
'); // 替换所有的换行符为
+} + + + + + + +function isFunction(fn) { + // 使用typeof运算符检查参数的类型是否为'function' + return typeof fn === 'function'; +} + + +function Bold(editor) { + // 将传入的编辑器实例赋值给当前对象的editor属性 + this.editor = editor; + // 创建一个包含加粗图标的div元素，并赋值给当前对象的$elem属性 + this.$elem = $('
\n \n
'); + // 设置按钮类型为点击事件 + this.type = 'click'; +} + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Bold.prototype = { + constructor: Bold, + + // 点击事件处理函数 + onClick: function onClick(e) { + // 获取编辑器实例 + var editor = this.editor; + // 检查当前选区是否为空 + var isSeleEmpty = editor.selection.isSelectionEmpty(); + + if (isSeleEmpty) { + // 如果选区为空，创建一个空的选区并选中一个“空白” + editor.selection.createEmptyRange(); + } + + // 执行加粗命令 + editor.cmd.do('bold'); + + if (isSeleEmpty) { + // 如果之前选区为空，将选区折叠起来并恢复之前的选区状态 + editor.selection.collapseRange(); + editor.selection.restoreSelection(); + } + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + // 获取编辑器实例 + var editor = this.editor; + // 获取当前元素的jQuery对象 + var $elem = this.$elem; + // 检查编辑器中的'bold'命令是否处于激活状态 + if (editor.cmd.queryCommandState('bold')) { + // 如果'bold'命令激活，设置_active为true + this._active = true; + // 给元素添加'w-e-active'类，表示激活状态 + $elem.addClass('w-e-active'); + } else { + // 如果'bold'命令未激活，设置_active为false + this._active = false; + // 从元素中移除'w-e-active'类，表示非激活状态 + $elem.removeClass('w-e-active'); + } + } + + + + +var replaceLang = function (editor, str) { + // 获取编辑器配置中的语言参数数组，如果没有则默认为空数组 + var langArgs = editor.config.langArgs || []; + // 初始化结果字符串为输入字符串 + var result = str; + + // 遍历语言参数数组 + langArgs.forEach(function (item) { + // 获取当前语言参数的正则表达式 + var reg = item.reg; + // 获取当前语言参数的值 + var val = item.val; + + // 如果结果字符串匹配当前正则表达式 + if (reg.test(result)) { + // 使用当前值替换匹配的部分 + result = result.replace(reg, function () { + return val; + }); + } + }); + + // 返回处理后的结果字符串 + return result; +}; + + +var _emptyFn = function _emptyFn() {}; // 定义一个空函数，用于默认的点击事件处理 + + +function DropList(menu, opt) { + var _this = this; // 保存当前上下文 + + var editor = menu.editor; // 获取编辑器实例 + this.menu = menu; // 保存菜单对象 + this.opt = opt; // 保存配置选项 + + // 创建容器元素 + var $container = $('
'); + + var $title = opt.$title; // 获取标题元素 + var titleHtml = void 0; // 初始化标题 HTML + if ($title) { + // 替换多语言 + titleHtml = $title.html(); // 获取标题 HTML + titleHtml = replaceLang(editor, titleHtml); // 替换多语言文本 + $title.html(titleHtml); // 设置替换后的标题 HTML + + $title.addClass('w-e-dp-title'); // 添加标题样式类 + $container.append($title); // 将标题添加到容器中 + } + + var list = opt.list || []; // 获取列表项数组，默认为空数组 + var type = opt.type || 'list'; // 获取类型，默认为 'list' + var onClick = opt.onClick || _emptyFn; // 获取点击事件处理函数，默认为空函数 + + // 创建列表元素并绑定事件 + var $list = $('
    '); // 根据类型选择样式类 + $container.append($list); // 将列表添加到容器中 + list.forEach(function (item) { + var $elem = item.$elem; // 获取每个列表项的元素 + + + // 获取元素的HTML内容 + var elemHtml = $elem.html(); + // 替换语言标记 + elemHtml = replaceLang(editor, elemHtml); + // 将替换后的内容重新设置到元素中 + $elem.html(elemHtml); + + // 获取item的值 + var value = item.value; + // 创建一个新的
  • 元素，并添加类名"w-e-item" + var $li = $('
  • '); + if ($elem) { + // 如果$elem存在，则将其添加到
  • 元素中 + $li.append($elem); + // 将
  • 元素添加到列表中 + $list.append($li); + // 为
  • 元素绑定点击事件 + $li.on('click', function (e) { + // 调用点击处理函数 + onClick(value); + + // 隐藏操作 + _this.hideTimeoutId = setTimeout(function () { + // 调用隐藏方法 + _this.hide(); + }, 0); + }); + } + + // 绑定隐藏事件 + $container.on('mouseleave', function (e) { + // 设置一个定时器，在鼠标离开容器时延迟执行隐藏操作 + _this.hideTimeoutId = setTimeout(function () { + // 调用隐藏方法 + _this.hide(); + }, 0); + }); + + // 记录属性 + this.$container = $container; + + // 基本属性 + // 标记是否已经渲染 + this._rendered = false; + // 标记是否显示 + this._show = false; +} + + +DropList.prototype = { + constructor: DropList, + + show: function show() { + // 如果存在隐藏超时ID，则清除该超时 + if (this.hideTimeoutId) { + clearTimeout(this.hideTimeoutId); + } + + var menu = this.menu; // 获取当前菜单对象 + var $menuELem = menu.$elem; // 获取菜单的DOM元素 + var $container = this.$container; // 获取容器的DOM元素 + + // 如果菜单已经显示，则直接返回 + if (this._show) { + return; + } + + // 如果菜单已经渲染过，则直接显示容器 + if (this._rendered) { + $container.show(); + } else { + // 获取菜单的高度，如果未定义则默认为0 + var menuHeight = $menuELem.getSizeData().height || 0; + // 获取宽度，如果未定义则默认为100 + var width = this.opt.width || 100; + // 设置容器的上边距和宽度 + $container.css('margin-top', menuHeight + 'px').css('width', width + 'px'); + + // 将容器添加到菜单的DOM元素中 + $menuELem.append($container); + // 标记菜单已渲染 + this._rendered = true; + } + } +}; + // 修改属性 + this._show = true; + }, + + // 隐藏（移除DOM） + hide: function hide() { + // 如果存在显示定时器ID，则清除之前的定时显示 + if (this.showTimeoutId) { + clearTimeout(this.showTimeoutId); + } + + var $container = this.$container; + // 如果当前状态为不显示，则直接返回 + if (!this._show) { + return; + } + // 隐藏容器并修改显示状态属性 + $container.hide(); + this._show = false; + } + + + +function Head(editor) { + // 保存当前上下文的引用 + var _this = this; + + // 将传入的编辑器实例赋值给当前对象的editor属性 + this.editor = editor; + // 创建一个包含头部菜单图标的div元素，并赋值给当前对象的$elem属性 + this.$elem = $('
    '); + // 设置当前对象的类型为下拉列表 + this.type = 'droplist'; + + // 当前是否 active 状态 + this._active = false; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 100, + $title: $('

    设置标题

    '), + type: 'list', // droplist 以列表形式展示 + list: [{ $elem: $('

    H1

    '), value: '

    ' }, { $elem: $('

    H2

    '), value: '

    ' }, { $elem: $('

    H3

    '), value: '

    ' }, { $elem: $('

    H4

    '), value: '

    ' }, { $elem: $('

    H5
    '), value: '
    ' }, { $elem: $('

    正文

    '), value: '

    ' }], + onClick: function onClick(value) { + // 注意 this 是指向当前的 Head 对象 + _this._command(value); + } + }); +} + + +Head.prototype = { + constructor: Head, + + + _command: function _command(value) { + // 获取编辑器实例 + var editor = this.editor; + + // 获取当前选中的容器元素 + var $selectionElem = editor.selection.getSelectionContainerElem(); + + // 如果选中的元素是文本元素，则不进行任何操作 + if (editor.$textElem.equal($selectionElem)) { + return; + } + + // 执行格式化命令，将选中的内容格式化为指定的块类型 + editor.cmd.do('formatBlock', value); + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + // 获取编辑器实例 + var editor = this.editor; + // 获取当前元素 + var $elem = this.$elem; + // 定义正则表达式，用于匹配以 'h' 开头的字符串（忽略大小写） + var reg = /^h/i; + // 查询当前命令的值，判断是否为标题格式 + var cmdValue = editor.cmd.queryCommandValue('formatBlock'); + // 如果命令值匹配正则表达式，表示当前是标题格式 + if (reg.test(cmdValue)) { + // 设置活动状态为 true + this._active = true; + // 为当前元素添加 'w-e-active' 类，表示激活状态 + $elem.addClass('w-e-active'); + } else { + // 设置活动状态为 false + this._active = false; + // 移除当前元素的 'w-e-active' 类，表示非激活状态 + $elem.removeClass('w-e-active'); + } + } + + +function FontSize(editor) { + var _this = this; // 保存当前对象的引用，以便在嵌套函数中使用 + + this.editor = editor; // 将传入的编辑器对象赋值给当前实例的 editor 属性 + this.$elem = $('

    '); // 创建菜单元素并添加到当前实例的 $elem 属性中 + this.type = 'droplist'; // 设置菜单类型为下拉列表 + + // 当前是否 active 状态 + this._active = false; // 初始化 active 状态为 false + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 160, // 设置下拉列表的宽度 + $title: $('

    字号

    '), // 设置下拉列表的标题 + type: 'list', // 设置下拉列表的类型为列表形式展示 + list: [ + { $elem: $('x-small'), value: '1' }, // 定义第一个选项：字体大小为 x-small + { $elem: $('small'), value: '2' }, // 定义第二个选项：字体大小为 small + { $elem: $('normal'), value: '3' }, // 定义第三个选项：字体大小为 normal + { $elem: $('large'), value: '4' }, // 定义第四个选项：字体大小为 large + { $elem: $('x-large'), value: '5' }, // 定义第五个选项：字体大小为 x-large + { $elem: $('xx-large'), value: '6' } // 定义第六个选项：字体大小为 xx-large + ], + onClick: function onClick(value) { + // 注意 this 是指向当前的 FontSize 对象 + _this._command(value); // 调用当前对象的 _command 方法，并传递选中的值 + } + }); +} + + +FontSize.prototype = { + constructor: FontSize, + + + _command: function _command(value) { + // 获取当前编辑器实例 + var editor = this.editor; + // 调用编辑器的命令接口，设置字体大小 + editor.cmd.do('fontSize', value); + } +}; + + +function FontName(editor) { + var _this = this; + + // 保存编辑器实例 + this.editor = editor; + // 创建菜单元素，包含一个图标 + this.$elem = $('
    '); + // 设置菜单类型为下拉列表 + this.type = 'droplist'; + + // 当前是否 active 状态 + this._active = false; + + // 获取配置的字体 + var config = editor.config; + var fontNames = config.fontNames || []; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 100, // 设置下拉列表宽度 + $title: $('

    字体

    '), // 设置下拉列表标题 + type: 'list', // 设置下拉列表类型为列表形式展示 + list: fontNames.map(function (fontName) { + // 将每个字体名称映射为一个对象，包含显示的元素和值 + return { $elem: $('' + fontName + ''), value: fontName }; + }), + onClick: function onClick(value) { + // 注意 this 是指向当前的 FontName 对象 + // 当点击某个字体时，执行命令 + _this._command(value); + } + }); +} + + +FontName.prototype = { + // 构造函数，指向FontName类 + constructor: FontName, + + + _command: function _command(value) { + // 获取当前编辑器实例 + var editor = this.editor; + // 调用编辑器的命令接口，设置字体名称 + editor.cmd.do('fontName', value); + } +}; + + + +var emptyFn = function emptyFn() {}; +// 定义一个空函数，用于占位或默认回调 + +// 记录已经显示 panel 的菜单 +var _isCreatedPanelMenus = []; +// 初始化一个数组，用于存储已经创建的 panel 菜单 + +// 构造函数 +function Panel(menu, opt) { + this.menu = menu; + // 将传入的 menu 参数赋值给实例的 menu 属性 + this.opt = opt; + // 将传入的 opt 参数赋值给实例的 opt 属性 +} + + +Panel.prototype = { + constructor: Panel, + + + show: function show() { + // 保存当前对象的引用 + var _this = this; + + // 获取当前面板的菜单 + var menu = this.menu; + // 如果菜单已经创建过，则直接返回 + if (_isCreatedPanelMenus.indexOf(menu) >= 0) { + // 如果菜单已经创建，则直接返回 + return; + } + var editor = menu.editor; // 获取编辑器实例 + var $body = $('body'); // 获取 body 元素 + var $textContainerElem = editor.$textContainerElem; // 获取文本容器元素 + var opt = this.opt; // 获取配置选项 + + // panel 的容器 + var $container = $('
    '); // 创建一个新的 div 作为面板容器 + var width = opt.width || 300; // 默认宽度为 300px，如果配置中有指定宽度则使用配置中的宽度 + $container.css('width', width + 'px').css('margin-left', (0 - width) / 2 + 'px'); // 设置容器的宽度和左边距 + + // 添加关闭按钮 + var $closeBtn = $(''); // 创建一个关闭按钮 + $container.append($closeBtn); // 将关闭按钮添加到容器中 + $closeBtn.on('click', function () { + // 绑定点击事件，当点击关闭按钮时隐藏面板 + _this.hide(); + }); + + + // 创建一个包含类名 'w-e-panel-tab-title' 的