简介这份资源是 layui 富文本编辑器 layedit.js 的完整功能演示与源码包面向使用 layui 框架进行 Web 前端开发、需要为后台或内容系统嵌入富文本编辑能力的开发者尤其适合想快速实现字体样式与多媒体插入功能的中级前端人员。压缩包共 126 个文件约 849KB以 29 个 js 脚本、6 个 css 样式、4 个 html 示例页面为主另含 75 个 gif 演示图与 png、svg、woff、ttf、eot 等图标字体资源覆盖编辑器运行所需的脚本、样式与素材。资源重点展示字体类型切换、字号缩放、字体颜色与背景颜色设置并延伸至表格插入、批量上传图片、图片尺寸与对齐控制、超链接与视频插入、全屏编辑、段落格式及锚点导航等实用能力。目前已有 262 人学习下载可帮助读者直接对照示例页面理解各功能调用方式快速将 layedit.js 集成到自己的项目中。1. layui 富文本 layedit.js 的字体大小与颜色为什么默认工具栏里找不到它们如果你用 layui 做过后台表单大概率用过layedit。它轻、集成快、和layui.form配合顺手但很多人第一次真正卡住是在产品经理说“正文要能调字号、改字体颜色、加背景色”那一刻——打开默认工具栏一看只有加粗、斜体、下划线、链接、图片、代码字号和颜色一个都没有。这不是你配置错了而是layedit默认工具栏本身就没把这几项放进去。这个标题背后其实是一类很具体的需求在 layui 体系内让layedit.js支持字号选择、字体颜色、背景颜色并且提交到后端时内容不丢样式、回显时不崩版。适合两类人一类是刚接手 layui 老项目、必须在不换编辑器前提下补齐功能的开发者另一类是想评估“到底改 layedit 还是换编辑器”的技术负责人。下面按“先搞清它怎么工作再动手改再避坑”的顺序讲透。2. 先搞懂 layedit.js 的工具栏与 iframe 结构改哪里、为什么这么改2.1 layedit 的编辑区是 iframe不是普通 divlayedit和很多轻量编辑器一样把可编辑区域放在一个iframe里通过document.execCommand执行加粗、斜体这类命令。这意味着两件事第一你没法直接用普通 DOM 选择器去操作里面的内容第二字号和颜色这类命令本质上要落到execCommand(fontSize)、execCommand(foreColor)、execCommand(hiliteColor)上。默认工具栏配置大致是这样一组字符串每一项对应一个按钮// layedit 默认工具栏项示意 // bold 加粗 | italic 斜体 | underline 下划线 // | 分隔线 | link 链接 | unlink 取消链接 // face 表情 | image 图片 | help 帮助 layedit.set({ tool: [bold, italic, underline, |, link, unlink, face, image] });逻辑说明tool数组决定工具栏渲染哪些按钮|是视觉分隔符。参数说明数组顺序就是按钮从左到右的顺序想加自定义按钮就得往这里塞自定义标识并在渲染后自己绑定事件。默认项里没有fontSize、foreColor、hiliteColor所以界面上看不到。2.2 用 execCommand 补字号和颜色最小可用改法常见做法是保留 layedit 的初始化在它渲染完成后往工具栏里注入自定义按钮点击时对 iframe 内的选区执行命令。下面是一段可直接抄的最小实现// 假设页面已引入 layui 与 layedit layui.use([layedit, form], function () { var layedit layui.layedit; var $ layui.$; // 1. 建立编辑器实例拿到 index var editIndex layedit.build(content, { height: 300, tool: [bold, italic, underline, |, link, unlink, image] }); // 2. 取到编辑器 iframe 的 document function getEditDoc() { var iframe $(#LAY_layedit_ editIndex)[0]; return iframe.contentWindow.document; } // 3. 执行命令的通用函数 function exec(cmd, value) { var doc getEditDoc(); doc.execCommand(cmd, false, value); } // 4. 绑定自定义按钮按钮需自行加在工具栏 DOM 上 $(#btn-fontsize).on(click, function () { exec(fontSize, 4); // 1~74 约等于 16px }); $(#btn-forecolor).on(click, function () { exec(foreColor, #e60012); }); $(#btn-bgcolor).on(click, function () { exec(hiliteColor, #fff3cd); }); });逻辑说明layedit.build返回的editIndex是定位 iframe 的关键iframe 的 id 规则是LAY_layedit_加索引。参数说明fontSize的取值是 1 到 7 的档位不是像素值浏览器会映射成固定大小foreColor传颜色字符串hiliteColor是背景色注意在部分浏览器里它和backColor行为不同hiliteColor更接近“高亮”语义。提示execCommand已被标记为废弃但主流浏览器目前仍可用。如果你的项目要求长期可维护建议评估换用现代编辑器而不是无限期依赖它。2.3 为什么建议用下拉框而不是三个裸按钮字号和颜色如果各做一个按钮用户只能得到固定值体验很差。更合理的做法是渲染一个字号下拉和一个颜色选择器。字号下拉的选项直接映射到 1 到 7显示文字fontSize 值大致效果小号2约 13px常规3约 16px中号4约 18px大号5约 24px超大6约 32px颜色选择器可以用原生input typecolor拿到十六进制值后传给foreColor或hiliteColor。这样一套下来字号、字体颜色、背景颜色三件事就齐了且不依赖额外插件。3. 把字号、字体颜色、背景颜色接进 layedit完整可复现步骤3.1 第一步确认 layui 版本与 layedit 模块路径不同 layui 版本的layedit行为有差异动手前先确认版本。在控制台执行// 查看 layui 版本 console.log(layui.v);逻辑说明layui.v返回版本号字符串。参数说明如果版本较老layedit.build的配置项可能不支持某些字段建议以你本地实际文件为准不要照搬网上不同版本的写法。确认模块路径能正常加载是后面所有改动的前提。3.2 第二步自定义工具栏并注入按钮 DOMlayedit 渲染后工具栏是一个.layui-layedit-tool容器。我们可以在它后面追加自己的控件// 在 layedit.build 之后执行 var $tool $(#LAY_layedit_ editIndex) .closest(.layui-layedit) .find(.layui-layedit-tool); // 追加字号下拉 var sizeHtml select idfontSizeSel classlayui-select styleheight:26px; option value字号/option option value2小号/option option value3常规/option option value4中号/option option value5大号/option option value6超大/option /select; $tool.append(sizeHtml); // 追加前景色与背景色 $tool.append(input typecolor idforeColorPick title字体颜色 stylewidth:28px;height:26px;padding:0;border:none;); $tool.append(input typecolor idbgColorPick title背景颜色 stylewidth:28px;height:26px;padding:0;border:none;);逻辑说明先定位到工具栏容器再追加原生控件。参数说明value对应fontSize档位两个颜色输入框默认值可自行设成常用色。注意追加时机必须在build之后否则容器还不存在。3.3 第三步绑定事件并处理选区丢失问题这是最容易翻车的一步。点击下拉或颜色框时iframe 里的选区会失焦导致execCommand作用不到原位置。解决办法是在mousedown阶段记录选区或在执行前把焦点还给 iframe// 字号切换 $(#fontSizeSel).on(change, function () { var val $(this).val(); if (!val) return; var doc getEditDoc(); // 把焦点还给编辑区恢复选区 $(#LAY_layedit_ editIndex)[0].contentWindow.focus(); doc.execCommand(fontSize, false, val); }); // 字体颜色 $(#foreColorPick).on(input, function () { var color $(this).val(); $(#LAY_layedit_ editIndex)[0].contentWindow.focus(); getEditDoc().execCommand(foreColor, false, color); }); // 背景颜色 $(#bgColorPick).on(input, function () { var color $(this).val(); $(#LAY_layedit_ editIndex)[0].contentWindow.focus(); getEditDoc().execCommand(hiliteColor, false, color); });逻辑说明每次执行命令前先focus()回 iframe让浏览器恢复之前的选区。参数说明input事件在颜色选择器拖动时高频触发如果性能敏感可改用change。这一步不做现象就是“点了没反应”或“样式加到了错误位置”。3.4 第四步同步内容到隐藏域并验证提交layedit 的内容需要通过layedit.sync(editIndex)同步到原始 textarea表单才能提交// 表单提交前同步 form.on(submit(save), function (data) { layedit.sync(editIndex); // data.field.content 此时包含带样式的 HTML console.log(data.field.content); return false; });逻辑说明sync把 iframe 内的 HTML 写回 textarea。参数说明editIndex必须和 build 时一致。验证方法提交后看后端收到的内容里是否包含font或带style的标签如果有说明样式已随内容一起提交。4. 避坑与排查字号颜色改完不生效的 5 个真实原因4.1 现象点击按钮完全没反应原因多半是按钮绑定事件时layedit 还没渲染完选择器取到空集合。解决把绑定逻辑放进layedit.build之后的回调或setTimeout里确保 DOM 已存在。更稳妥的是用事件委托绑到父容器上。4.2 现象样式加上了但只作用于一个字或整段原因execCommand依赖当前选区。如果用户没有选中文本fontSize可能只影响光标处后续输入或整段被包一层。解决在 UI 上引导用户先选中文本代码层面可在执行前判断选区是否为空为空时给出提示而不是硬执行。4.3 现象背景色用了 backColor 没效果原因部分浏览器对backColor和hiliteColor支持不一致backColor有时只改整个编辑区背景。解决统一用hiliteColor它在主流浏览器里表现更接近“文字高亮”。如果仍有兼容问题可退化为给选区包一层带background-color的 span。4.4 现象提交后样式丢失原因忘记调用layedit.sync或后端做了 HTML 过滤把font、style标签清掉了。解决前端确认 sync 已执行后端确认白名单里放行了font、span及style属性。这一步不排查前端调得再好也白搭。4.5 现象回显时字号错乱原因fontSize存的是 1 到 7 的档位回显时如果被转成了像素或被过滤就会错乱。解决回显时直接把存储的 HTML 塞回编辑器不要二次解析如果必须清洗保留font标签的size属性。5. 进阶让字号颜色可控、可回显、可维护的几个具体技巧如果你已经跑通了上面的流程接下来值得做三件事。第一把字号档位和实际像素做一张映射表避免用户在不同浏览器看到的大小差异过大。可以在初始化时用一段脚本测量或者直接约定只使用 2 到 5 档放弃极端值。第二颜色不要只给一个取色器预设几个品牌色按钮加一个自定义取色器既快又不容易选到刺眼的颜色。第三回显时做一次轻量校验只允许font、span、strong等有限标签和size、color、background-color等有限属性通过其余一律转义这样既保留样式又降低 XSS 风险。我自己的习惯是任何富文本改动先在本地用一个最小 HTML 页面单独验证execCommand行为再往项目里搬。因为 layedit 的 iframe 结构和 layui 的渲染时序叠在一起直接在项目里调试很容易把“时序问题”误判成“命令不支持”白白绕远路。另外改完一定要用真实提交链路走一遍从编辑、同步、提交到回显缺一环都可能在上线后才发现样式丢了。这套方案不花哨但胜在改动小、可控、能落地。如果你的项目还在用 layui又不想大动干戈换编辑器按上面的步骤把字号、字体颜色、背景颜色补齐是性价比很高的做法。希望帮到你。本文还有配套的精品资源点击获取
