layui富文本编辑器赋值与取值方法详解

作者:阿沐时间:2026-10-23 11:19:09浏览:567

本文介绍layui框架中富文本编辑器的使用,重点讲解如何调用layedit组件进行内容赋值以及获取编辑后的完整HTML值和纯文本值,提供具体代码示例供参考。

layui富文本编辑器赋值方法

在layui中实现富文本编辑器的内容赋值,首先需要引入layedit模块。通过layui.use加载模块后,获取layedit实例。使用layedit.build方法指定编辑器DOM元素ID来初始化编辑器,该方法返回一个索引值。随后,利用layedit.setContent方法,传入该索引值和需要填充的字符串内容,即可完成对编辑器的赋值操作。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/Public/lib/layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
<textarea id="demo" style="display: none;"></textarea>
 
 
<script src="/Public/lib/jquery.min.js"></script>
<script src="/Public/lib/layui/layui.js"></script>
<script>
layui.use(['layedit'], function(){
 var layedit=layui.layedit;
 var index=layedit.build('demo'); //建立编辑器
 layedit.setContent(index,"你好");
});
 
</script>
</body>
</html>

富文本内容取值与纯文本获取

获取富文本编辑器的内容分为两种情况:获取包含HTML标签的完整内容和仅获取纯文本。调用layedit.getContent方法并传入编辑器索引,可返回编辑器内的完整HTML字符串;若只需去除格式标签获取纯文本,则使用layedit.getText方法并传入相同的索引值,该方法会返回清理后的文本内容。


layedit.getContent(editIndex);//取整个值
layedit.getText(editIndex);//取纯文本值

上述内容涵盖了layui富文本编辑器的基本赋值与取值操作,包括完整HTML值与纯文本值的获取方式,旨在为开发者提供实用的代码参考。

作者最新文章