layui富文本layedit详解

最新推荐文章于 2026-08-06 16:29:13 发布

原创最新推荐文章于 2026-08-06 16:29:13 发布 · 5.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

layui

当前文章被收录于：

layui

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文档介绍了layui富文本编辑器layedit的使用方法，包括如何创建编辑器及监听输入事件。通过在textarea上应用layedit.build()方法建立编辑器，并通过浏览器控制台分析，发现可以监听iframe内的body元素的input事件来捕获编辑器的变化。

官方文档

官方文档的功能菜单目录并没有放出 layedt ，可能是因为功能还不够齐全吧。
要直达 layedit 的文档就要在官方文档顶部搜索 layedit。
在这里插入图片描述

用法

<textarea id="demo" class="layui-textarea"></textarea>

<script>
layui.use('layedit', function(){
  var layedit = layui.layedit;
  layedit.build('demo'); //建立编辑器
});
</script>

监听事件

官方文档并没有明写监听事件，不过可以从页面中找出蛛丝马迹

首先检查生成 layedit 富文本的元素
在这里插入图片描述
可以从浏览器控制台清除的看出 layedit 是怎么构成的

然后分析 layedit 的组成结构，找到文本框的 iframe 元素，再对这个元素进行监听试试：

layui.use('layedit', function(){
	var layedit = layui.layedit;
  	layedit.build('demo'); //建立编辑器
	// 富文本
	$(document.getElementById("LAY_layedit_1")).contents().find("body").on('input', function (res) {
		// console.log(res)
		layer.alert("富文本编辑器input事件触发", {icon: 5});
	});
});