这篇记得是工作中的例子
描述：
平常的富文本显示都是根据静态的html获取id来显示，比如：
<textarea class="layui-textarea" id="content" >
富文本内容
</textarea>
layui.use([ "form", "layer","layedit"], function() {
var form = layui.form;
var layer = layui.layer;
var layedit = layui.layedit;//引入layedit
//富文本
layedit.set({//上传图片
uploadImage: {
url: '/common/upload/uploadTextareaImage', //接口url
type: 'post', //默认post
success: function (data) {
if (data.status == 0) {
layer.msg("图片上传成功!");
}
if (data.message != null) {
layer.msg(result.message)
}
}
}
});
//content就是关联id，只能是id并且只能放置一个id
//下面这段代码最好放在上段代码下面
var index = layedit.build('content', {
height: 500//高度
});
//很多时候，你用来layui的东西你就必须按着他的规范接着往下做，这就是用layui最蛋疼的一点，
不用的话就出不来效果，比如获取富文本内容的获取就用下面的代码：
//编辑器外部操作
var content = layedit.getContent(index) //获取编辑器内容
var text = layedit.getText(index) //获取编辑器纯文本内容
layedit.getSelection(index)
};
现在有个需求就是，富文本的数量是动态的，并且这个数量的个数是根据配置文件来获取的
先看后台配置文件是这样的properties文件：
有三段标题，每个标题根据逗号隔开，通过java代码读取
budget.target=\u9884\u7B97\u76EE\u68071,\u9884\u7B97\u76EE\u68072,\u9884\u7B97\u76EE\u68073
本来配置文件里面存的是中文，但是不管你输出什么文字，eclipse都会帮你转码成上面那样==
比如原来是这样的
budget.target = 名称1，名称2，名称3
然后我们根据java代码读取配置里面配置文件标题的数量：
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource; @Configuration
@PropertySource("classpath:xxx.properties")
public class PropertyUtil { @Value("${budget.target}")
private String budgetTarget;//这个是我们从配置文件读取的 public String getBudgetTarget() {
return budgetTarget;
} public void setBudgetTarget(String budgetTarget) {
this.budgetTarget = budgetTarget;
} }
接着：
@RequestMapping(value = "edit")
ModelAndView edit(Model model) {
// 从配置文件读取项目详情的名称和数量
String budget = propertyUtil.getBudgetTarget(); String[] budgets = budget.split(",");//得到一个string数组，然后我们就可以知道我们需要遍历的富文本数量了
//注：一个标题一个富文本编辑器 model.addAttribute("budgets ", budgets);
ModelAndView modelAndView = new ModelAndView("backend/xx/xx/xx");
return modelAndView;
}
然后通过jstl+el表达式进行前端渲染：
<form class="layui-form common-form">
<b>详情</b>
<c:forEach items="${budgets}" var="b" varStatus="s">
<div class="layui-form-item">
<!-- <label class="layui-form-label"></label> -->
<textarea placeholder="请输入内容" lay-verify="content" autocomplete="off"
id="${b}${s.index}" class="layui-textarea"></textarea>
</div>
</c:forEach>
</form> 上面的id="content${s.index}" 表示 标题0，标题1，标题2这样，主要是为了通过layui动态渲染富文本做准备
这边实际代码不是这样的，为了方便记录所以很多地方删了
渲染富文本js：
//接收文本索引
var indexs = [];
layui.use([ "form", "layer","layedit" ], function() {
form = layui.form;
layer = layui.layer;
layedit = layui.layedit; //富文本
layedit.set({//上传图片
uploadImage: {
url: '/common/upload/uploadTextareaImage', //接口url
type: 'post', //默认post
success: function (data) { if (data.status == 0) {
layer.msg("图片上传成功!");
}
if (data.message != null) {
layer.msg(result.message)
} }
}
}); // 渲染富文本
$(".layui-textarea").each(function (index, obj) {
var index = layedit.build($(obj).attr("id"), {//通过循环遍历出每一个id
height: 100
});
indexs.push(index);//没每个id对应的索引push进数组 }); 然后在需要的地方获取富文本内容
// 先清空富文本内容
var contents = [];
// 获取富文本内容
for (var i = 0; i < indexs.length; i++) {
contents.push(layedit.getContent(indexs[i]));
}
});
实际效果：
关于富文本内容就先告一段落了