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);


相关文章
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
609 0
|
3月前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
4月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
42 2
|
6月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
91 0
|
7月前
|
JavaScript 前端开发
JavaScript实现将输入框中的信息保存到表格中
JavaScript实现将输入框中的信息保存到表格中
36 0
|
7月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
动态表格之查看、删除、编辑
动态表格之查看、删除、编辑
54 0
Layui表格头部工具栏取消默认的三个功能
Layui表格头部工具栏取消默认的三个功能
522 0
Layui表格头部工具栏取消默认的三个功能
|
JavaScript UED
利用js复制文本框里面的内容到剪切板,并且隐藏文本框
利用js复制文本框里面的内容到剪切板,并且隐藏文本框
302 0