layui富文本编辑器layedit.js教程：配置工具栏、获取内容与常见坑

简介layui 是一套轻量级前端 UI 框架本资源聚焦其富文本组件 layedit.js 的字体、字号、文字颜色与背景色配置方案面向需要快速集成网页内容编辑功能的前端开发者可解决默认编辑器在样式定制与功能扩展上的常见需求。压缩包共 126 个文件大小仅 849KB以 GIF 演示图、JS 脚本、CSS 样式和 HTML 示例为主同时包含字体图标与说明文档目录结构一目了然便于直接查看效果并迁移到自身项目。已有 262 人学习下载适合刚接触 layedit 或希望灵活调整编辑工具栏的中级开发者。资源内不仅展示了字体大小与颜色背景的完整设置方式还提供了表格插入、批量上传图片、超链接、视频嵌入及全屏等高级功能的调用示例配合动图演示能快速理解各操作在编辑器中的实际效果显著缩短二次开发时的调试时间是搭建后台管理系统内容编辑模块的实用参考。1. 先别怕layui 富文本到底是个什么东西很多刚接触网页开发的新手第一次听到“富文本编辑器”这个词心里都会犯嘀咕这到底是个啥和我在后台写文章用的那个输入框有什么区别我当年也是这么懵着过来的。其实你可以把它理解成一个“简化版的 Word”——用户在网页上点几下按钮就能给文字加粗、改字号、换颜色、插图片不需要懂任何代码保存出来的还是一段干干净净的 HTML。而 layui 框架里那个叫 layedit.js 的组件就是专门干这件事的。这一篇我会带你把它从“听过名字”到“成功跑起来”全程不甩黑话、不跳步骤。2. 先搞懂一个概念layedit.js 凭什么能干活2.1 它不是插件市场里那种“独立软件”而是 layui 的“亲儿子”我见过不少新手把 layedit.js 当成一个“下载了就能用的单文件工具”然后到处找它的压缩包下载下来一运行却没有任何反应。问题出在哪出在它和 layui 的关系上。layedit.js 是 layui 这套前端 UI 框架里自带的一个模块它不是一个独立的软件。它的意思是你必须在已经引入了 layui 的页面上才能把它“叫醒”。你在项目里做的事情不是下载一个 layedit.js 文件而是让浏览器先加载 layui 的整套核心文件然后通过layui.use()这个方法把 layedit 这个模块从 layui 的肚子里“请出来”。用大白话讲layui 就像一个工具箱layedit 是工具箱里的那把螺丝刀。你不能只买一把螺丝刀就指望能开一个工具箱你得先有工具箱再从里面拿螺丝刀。我第一次学的时候就是只引了 layedit.js 的单独文件结果页面报错说找不到 layui那个场景我到现在都记得——代码没写错错在少了“亲爹”。2.2 你真正需要在页面里引入的东西有哪些先明确一个原则你只需要引入两个东西一是 layui 的 CSS 文件二是 layui 的 JS 文件。这两个文件从哪里来最稳妥也最适合新手的来源是layui 官方提供的本地下载包。去官网找到下载入口把整包下载下来解压后会看到一个layui文件夹。这个文件夹里CSS 和 JS 都已经给你分好了。当然你如果不想下载整包也可以使用官方提供的 CDN 地址——也就是别人服务器上帮你存好的同一份文件。对于零基础新手我的建议是先用 CDN 把案例跑通等真正要做项目了再换成下载到本地的方式。不是本地方式有多难而是“先看到效果”比“先学会下载正确版本”更能帮你建立信心。无论你选哪种方式最后你的 HTML 页面里应当有这样两行引用!-- 引入 layui 的样式 -- link relstylesheet hrefhttps://your-cdn-path/layui/css/layui.css !-- 引入 layui 的核心脚本 -- script srchttps://your-cdn-path/layui/layui.js/script这两行的顺序千万别调反了。先有样式再有脚本。你想想去医院看病是不是也讲究先挂号后见医生HTML 里引入文件的顺序就是这种“先走流程后干活”的规矩。只要把这两行放进了页面layedit.js 就已经“住在”这个页面里了只是还没醒。2.3 用一个最简单的骨架来验证环境没问题环境对不对不能靠感觉得靠一次真实的运行。你现在可以新建一个.html文件把下面这一段完整复制进去。什么你说代码看不懂没关系这段代码的唯一作用是帮你验证“我引入的东西到底有没有生效”它不涉及任何业务逻辑。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlelayedit 环境验证/title !-- 第 1 步先引入样式 -- link relstylesheet hrefhttps://your-cdn-path/layui/css/layui.css /head body !-- 第 4 步在页面里挖一个坑id 名叫 editor_demo -- textarea ideditor_demo/textarea !-- 第 2 步再引入核心脚本顺序不能反 -- script srchttps://your-cdn-path/layui/layui.js/script script // 第 3 步等 layui 准备好了再叫醒 layedit 模块 layui.use(function() { // 从 layui 身上把 layedit 模块“稳”出来 var layedit layui.layedit; // 告诉 layedit你就在这个叫 editor_demo 的坑里干活 var index layedit.build(editor_demo); }); /script /body /html你打开这个页面如果看到的不再是一个朴素的文本框而是一个带工具栏的编辑区域那就说明你的环境彻底通了layedit.js 已经能被你稳稳地调用。如果没反应九成是你把上面的your-cdn-path换错了或者根本没换。这一步不需要理解每个单词的含义你只需要记住一个结论看到编辑区域出现就是成功了可以继续往下走。3. 从上一章的“坑位”出发布局和参数决定体验3.1 为什么说富文本的高度、宽度都要你亲手管环境通了你可能会高兴得太早。再等几秒你会发现一个奇怪的问题编辑器确实出来了可它的高度怎么那么矮我明明什么设置都没做。这就是 layedit 在“征求你的意见”宽度、高度、工具栏里保留哪些按钮它自己没有想法全交给你定。很多新手卡在这一步以为编辑器坏了其实它只是在等你配置。你可能会问为什么它不自己聪明点因为富文本编辑器在不同网站里的用处不一样。有人用它写一句话的签名有人用它写几千字的公告如果框架统一给一个高度那写公告的人就得天天拖动滚动条写签名的页面又会白白空出一大块。所以高度和宽度这种东西就该交到使用者手里而 layedit 的设计是用一个叫layedit.set的方法来收纳你的偏好。3.2 手把手设置编辑器的外观和工具栏刚才的代码里你只是调用了一个layedit.build(editor_demo)让它“在坑位里建造编辑器”。这一步咱们升级一下在建造之前先通过layedit.set给它上点“性格”。layui.use(function() { var layedit layui.layedit; // 开始之前先做一个配置这个编辑器以后的长相都听你的 layedit.set({ // 编辑器的高度单位是像素觉得矮就调大 height: 350, // 工具栏里要不要显示“字体大小”这个按钮 tool: [ strong, // 加粗 italic, // 斜体 underline, // 下划线 fontsize, // 字体大小 color, // 文字颜色 backcolor, // 背景颜色 left, // 左对齐 center, // 居中 right, // 右对齐 image // 插入图片 ] }); var index layedit.build(editor_demo); });注意看这里的tool是一个数组数组里每一项的名字都是固定的比如fontsize就是“字体大小按钮”color是“文字颜色按钮”backcolor是“背景颜色按钮”。这些名字不能自己编一旦编错相应的按钮就不会出现。你可能会觉得这有点死板但我反倒觉得这样省心因为 layui 已经把能用的工具名字都公开好了你只需要照着写它就能原样给你展示出来。3.3 三个核心需求字体大小、文字颜色、背景颜色回到本文的核心需求。很多人做后台内容发布功能时用户必须要能改字号、改字颜色、改文字背景色因为这是最基本的排版诉求。你观察一下上面那个tool数组你会发现我把这三个能力刚好都列进去了fontsize管字号color管前景色backcolor管背景色。这里的“背景颜色”很多人第一次会理解错以为是整个页面的背景。其实在富文本语境里backcolor指的是你选中的那段文字底下的底色就好比用荧光笔在纸上划过一道。它是文字的背景不是编辑器的背景。我当年就闹过这个笑话设置完发现编辑器整体没变色以为代码出了问题后来才明白是我理解错了概念。希望你能避开这个弯子。4. 把需求串成完整项目第一个能用来交差的例子4.1 设计一个真实场景文章编辑页环境通了按钮也会显示了现在咱们把这些零件组装起来做一个真正有意义的东西。我建议你用这个场景练手做一个内部公告编辑页文案编辑人员可以在里面写公告、调字号、给重要文字加颜色和背景色然后点一个“保存”按钮看看我们到底能不能拿到用户编辑后的内容。你不用真的做一个完整的后端只需要让“保存”按钮把编辑器里的内容打印到页面下方或者弹个窗口提示就已经算是一次完善的实战演练了。因为这一步能让你直观感受到用户辛辛苦苦排版的内容到底以什么形式交到开发者手上。这不只是一个前端展示问题它牵扯到你后面怎么把数据传给服务器。4.2 完整示例代码把排版内容“接”出来先把代码放上来你再听我逐行讲。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title内部公告编辑页/title link relstylesheet hrefhttps://your-cdn-path/layui/css/layui.css /head body h3编辑一篇新公告/h3 !-- 用户最终编辑的内容会以 HTML 的形式被我们取出来 -- textarea ideditor_demo/textarea brbr button idsave_btn保存公告/button !-- 用来展示取回的 HTML 原文 -- div stylemargin-top:30px; border-top:1px solid #eee; padding-top:15px; h4你将提交到后台的内容/h4 p idshow_result stylebackground:#f7f7f7; padding:12px; word-break:break-all;/p /div script srchttps://your-cdn-path/layui/layui.js/script script layui.use(function() { var layedit layui.layedit; // 设置工具栏重点展示字号、文字颜色、文字背景色 layedit.set({ height: 300, tool: [ strong, italic, underline, fontsize, color, backcolor, left, center, right, image ] }); // 建造编辑器拿到一个 index 编号这个编号是它的“身份证” var index layedit.build(editor_demo); // 给保存按钮绑定事件 var saveBtn document.getElementById(save_btn); saveBtn.onclick function() { // 重点是这一句把编辑器当前真实内容提取出来 var htmlContent layedit.getContent(index); // 将取回的 HTML 原文显示在页面上 document.getElementById(show_result).innerHTML htmlContent; alert(你已经能成功拿到用户编辑后的内容了接下来就是把它提交给你自己的服务器); }; }); /script /body /html这段代码的核心是layedit.getContent(index)。你可能注意到了我们拿到的是一个变量叫htmlContent它不是普通文字而是带着各种span、font标签的 HTML 原文。用户调的字体大小、文字颜色、背景色全都藏在这段 HTML 标签里。你要做的是把这个 HTML 字符串提交到后台将来再把这段 HTML 回填到编辑器里用户排版就原模原样复原了。关于参数说明这里最关键的一个参数就是index。它是layedit.build()方法返回的编号。同一个页面里如果放了多个编辑器你就要靠这个编号区分“用户编辑的是哪个”。哪怕你页面上只有一个编辑器也不要在取内容时图省事去前台选别的方式——你按上面的写法写永远是对的。4.3 一个隐性的小知识点内容回填既然是完整项目用户删除了一篇文章后来又点开旧文章编辑器里应该显示原来的内容。怎么回填你不需要重新去搜文档其实只需要把 HTML 塞回那个 textarea然后再调用一次layedit.build。// 假设这是你从服务器取回来的旧文章内容 var oldContent p这是一句span stylecolor: rgb(255, 0, 0);红色/span文字/p; // 1. 先在构建之前把内容填进 textarea document.getElementById(editor_demo).value oldContent; // 2. 再调用 build编辑器就会带着旧内容渲染出来 var index layedit.build(editor_demo);顺序千万不能反。你先build再赋值编辑器只会把 textarea 里当时的值当成初始内容你后赋的那段旧内容就丢了。这个顺序问题是我自己在项目里踩过的坑记住一个笨办法先填坑再盖楼。5. 避坑layedit.js 新手最容易踩的五个坑5.1 页面里明明引了 layui却说找不到 layedit现象控制台报错类似“layedit is not defined”或者干脆按钮一个都不显示。原因你虽然引入了 layui 的核心 JS但你在layui.use()里没有明确声明要用 layedit 模块。有人会觉得自己调用layui.use(function(){})就行实际上在靠layui.layedit取模块时需要先在use的第一个参数里点名。解决把第一行改成layui.use([layedit], function(){ ... })。这样写最稳因为你在点名时就已经让 layui 去加载 layedit 模块了。5.2 工具栏里字体大小只有几个固定档位没法自由输入现象点击字体大小按钮弹出的只有 10px、12px、16px 等几个固定选项想要 15px 却没有。原因:这是 layedit 组件从设计上就对工具栏做了固定限制它不是 Excel 里那个任意输入的字体大小框。半路改需求的人往往在这里很着急。解决满足现状选择一个最接近的档位。如果实在要任意值就得在编辑器渲染完成后用 JavaScript 额外去修改按钮弹出的下拉框内容。但这属于进阶操作零基础阶段我建议你直接接受预设的档位以免改来改去把工具栏样式弄坏。5.3 给文字加了背景色整行却被颜色覆盖了现象选中文字刷上背景色结果整个段落都变成了那个颜色看起来非常脏。原因你可能用的是浏览器自带的“高亮”习惯或者你选中的时候顺带把段落的空白区域也选上了。富文本编辑器对背景色的处理是给选中的“字符范围”加底色多选了一个空格都可能让底色范围看起来很宽。解决加背景色时务必让鼠标精准框住文字本身不要带着行尾的空格一起选。如果已经刷脏了按一次撤销再重新精确选择就能好很多。5.4 编辑器里的图片上传按钮点了没反应现象工具栏里明明有“插入图片”按钮点击后弹窗也出现了但选择图片后一直无法上传。原因layedit 的图片上传功能需要配合后端接口。它自己不会把图片搬到你的服务器上它需要你告诉它“图片应该被发到哪个地址去”而这个信息要靠layedit.set里的uploadImage参数来配置。解决初始练习阶段建议先把图片按钮从tool数组里去掉专心处理文字排版再后面学后端时回头补上上传接口。5.5 编辑器在弹窗或选项卡里显示不出来只剩一个空白坑现象页面结构里明明有 textarealayedit.build也执行了但编辑器就是不出来只看到一个空白区域。原因这种情况多发生在弹窗或选项卡这类“默认隐藏”的容器里。layui 在页面刚加载时去计算编辑器高度而弹窗是隐藏的浏览器给它的参数是 0编辑器自然就塌陷了。解决等弹窗显示出来之后再去调用layedit.build。具体怎么实现不同弹窗组件可能略有差异核心思路就一条保证编辑器的容器在构建那一刻是可见的。6. 接下来学什么一条少走弯路的升级路径先用一句话总结你已经获得的能力。你已经能把 layedit 编辑器成功渲染到页面上能让用户改动字体大小、字体颜色和背景色还能把内容提取出来。这个基础如果打牢了laying 后续的路其实很平缓。接下来建议按这个顺序走。第一步学会美化输出内容。你拿到的是一段 HTML 原文但它里面的标签可能比较素你可以手动包裹一层样式更漂亮的容器让用户发布出来的页面更好看。第二步掌握图片上传。这才是富文本真正强大的地方解决上一章里的第 5 个坑给layedit.set配上uploadImage指向你后端的接收接口图片才能真正飞进你的服务器。第三步梳理完整的数据提交链路。也就是把编辑器放在一个大的表单里和标题、作者、发布时间这些东西一起提交。当时我就是把这三步全部趟完才感觉自己真正驾驭了 layedit。有一点我建议你尽早培养修改任何代码前先把老版本另存一份。这个习惯我最早以为只是图个心里安慰直到后来有一次我把工具栏配置改烂了想还原却没有任何备份只能临时翻文档一条条回来找。从那以后每次我改动 layedit 的相关参数都会强制先把能正常运行的那份文件复制成一个带日期后缀的副本。看着麻烦但真的是后悔药。希望这个习惯也能帮到你少走一些我走过的弯路。本文还有配套的精品资源点击获取