Layui 富文本编辑、存储和回显

在开发中富文本的操作对于备注、描述之类的小功能是很有必要的！也能更好的展示我们需要的存储或者显示的内容

如果你正苦苦寻找一款轻量的Web富文本编辑器，那么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);

之有前查说用html的和val的都可以，不过我试了都没有成功回显！不知道少了啥

记录一下，有什么错误，欢迎指出！！！！