Layui之动态循环遍历出的富文本编辑器显示
这篇记得是工作中的例子
描述:
平常的富文本显示都是根据静态的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]));
}
});
实际效果:
关于富文本内容就先告一段落了
Layui之动态循环遍历出的富文本编辑器显示的更多相关文章
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- PHP UEditor富文本编辑器 显示 后端配置项没有正常加载,上传插件不能正常使用
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问 ...
- day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 浅谈layer.open的弹出层中的富文本编辑器为何不起作用!
很多童鞋都喜欢用贤心的layui框架.是的,我也喜欢用,方便,简单.但是呢,有时候项目中的需求会不一样,导致我们用的时候,显示效果可能会不一样,好吧.这样的话,个别遇到的问题总是解决不好,但是呢还是那 ...
- 关于layui富文本编辑器和form表单提交的问题
今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...
- ASP.NET MVC实现layui富文本编辑器应用
先看看视图层 在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型.通过视图助手,为我们生成id和name属性相同的textarea标签. 备注: ...
- layui 魔改:富文本编辑器添加上传视频功能
甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...
- 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
随机推荐
- 42.Pycharm连接数据库出现错误:1045、1044:django.db.utils.OperationalError: (1045, "Access denied for user 'Whois'@'localhost' (using password: YES)”)
1.在pycharm中设置好数据库的连接信息,连接数据库db01, DATABASES = { 'default': { # 指定所使用的的数据库引擎 'ENGINE': 'django.db.bac ...
- sql注入常见绕过技巧
参考链接:https://blog.csdn.net/huanghelouzi/article/details/82995313 https://www.cnblogs.com/vincy99/p/9 ...
- P1522 牛的旅行
P1522 牛的旅行 Cow Tours 提交 11.44k 通过 4.97k 时间限制 1.00s 内存限制 125.00MB 题目提供者洛谷 难度提高+/省选- 历史分数100 提交记录 查看题解 ...
- MarkDown图文编辑系列教程(二)
一.写在前面 引言 本文是我写的MarkDown系列教程的第二篇,前一篇的地址:MarkDown图文编辑系列教程(一) 读完本篇,你将获得 学会使用markdown语法进行:区块引用(一种常用的引用格 ...
- flex布局 居中
display:flex;justify-content: center;检查侧轴是否居中,比如古代竖着写字,检查字是否在每条竹简的中央. display:flex;align-items: cent ...
- SVN之TortoiseSVN使用02
TortoiseSVN常用操作和安装eclipse的svn插件 一.关于TortoiseSVN的介绍 1. 安装TortoiseSVN图像化操作软件,便于操作SVN! 如图有两种版本的,一个是32位, ...
- Java枚举类型的使用,数值的二进制表示
一.Java枚举类型的使用 首先请看这段代码: package java上课; public class EnumTest { public static void main(String[] arg ...
- linux - mysql 异常:Ignoring query to other database
问题描述 Ignoring query to other database(忽略其他数据库查询) 问题原因 登录方式错误,登录命令用的是 “mysql -root -p”,应该用命令 “mysql - ...
- IntelliJ WebStorm 2020最新 永久破解激活教程【全网最强,可用至2100年】
说明:都到了2020年,当然要用最新的IDE,目前最新是2019.3.1版本 ①IntelliJ WebStorm 2019.3.1安装永久破解[最强] 一. 在官网下载WebStorm安装包 链接 ...
- HCTF2018-admin[flask session 伪造]
知识点:flask session 伪造 flask中session是存储在客户端cookie中的,也就是存储在本地.flask仅仅对数据进行了签名.众所周知的是,签名的作用是防篡改,而无法防止被读取 ...