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

Posted 2023-04-04 程序三两行

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

先定义一个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);

（已解决）富文本编辑器：使用layui的layedit怎么回显数据库存放的数据？

1. 背景

　　我把富文本内容从后台导入到前端，回显在layui的layedit里面。

2. 步骤

　　直接在<textarea></textarea>中间进行赋值（我用的是模板赋值）。然后之后交给layui的build渲染。

。。。。。
 <td>
                        <textarea id="contentId" name="detail">
                            $data[‘content‘]
                        </textarea>
                    </td>
。。。。。