layui 富文本layedit编辑、存储和回显

简介: layui 富文本layedit编辑、存储和回显

一、创建一个富文本编辑框

先定义一个textarea标签,给定一个id值,向页面引入layedit,然后调用layedit.build(id, options)构建富文本框

//官方给出的模板
<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){
  var layedit = layui.layedit;
  layedit.build('demo'); //建立编辑器
});
</script>

layedit.build(id, options) 中第一个参数为需要构建的标签id,第二个参数则是为文本编辑器进行一些设置

具体操作

layedit.build('标签id', {
  height: 180 //设置编辑器高度
    ...
});

二、存储

获取富文本信息

layedit.getContent(index)    获得编辑器的内容   参数 index: 即执行layedit.build返回的值

通过上述方法就能获取带格式的文本信息

如果仅仅只要文本,官方还提供了其他方法

后端数据库的存储应选择长文本格式,如果用varchar容易报内容过长的错误,我用的是longtext存储

三、数据的回显

//第一个参数:创建的富文本框实例
//第二个参数:之前存储的富文本内容(回显时查询得到)
//第三个参数:填写方式:true时为在已有的内容追加   false时为覆盖
layedit.setContent(editIndex, mData.data.ms, false);


相关文章
|
JSON 数据格式
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
863 0
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
1120 0
|
前端开发 网络安全
layui如何实现添加数据时关闭页面层,并实时刷新表格数据?
layui如何实现添加数据时关闭页面层,并实时刷新表格数据?
|
容器
layui框架实战案例(13):colorpicker颜色选择器的使用
layui框架实战案例(13):colorpicker颜色选择器的使用
629 0
layui框架实战案例(11):表单自定义验证规则
layui框架实战案例(11):表单自定义验证规则
440 0
|
存储 SQL Java
Springboot Mybatis 、JPA 调用存储过程,实战教程
Springboot Mybatis 、JPA 调用存储过程,实战教程
1798 0
Springboot Mybatis 、JPA 调用存储过程,实战教程
|
11月前
|
人工智能 运维 文字识别
新书上线 |《零门槛AIGC应用实战——Serverless+AI 轻松玩转高频AIGC场景》免费下载
《零门槛AIGC应用实战——Serverless+AI 轻松玩转高频AIGC场景》电子书正式上线!多种精选 AI 部署方案带你深入了解 Serverless+AI 最新趋势、AI 应用的架构设计与详细的部署教程等。函数计算 AI 技术解决方案助您一键上云,高效部署。
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3626 1
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
2091 0