layui富文本编辑器添加使用、新增、回显详解(layeidt)

小半 • 2023年2月11日上午11:26 • 技术随笔 • 阅读 598

html部分添加textarea标签

<textarea id="wznr" lay-verify="content" style="display: none;"></textarea>

JS部分

layui.config({
        base: '../lib/modules/'
    }).extend({
        layerUtil: 'layerUtil',
        //在use中加载模块layedit，
    }).use(['laydate', 'form','layedit', 'table', 'layerUtil', 'element','upload'], function () {
        var form = layui.form, table = layui.table, $ = layui.$, laydate = layui.laydate, element = layui.element;
        layerUtil = layui.layerUtil;
        var upload = layui.upload;
        var $ = layui.jquery, layedit = layui.layedit;
        //tex用于获取编辑器然后取编辑器中的值
        var tex;
        });

在use中加载模块layedit，然后在function中建立编辑器

//layedit.set(options)设置编辑器的全局属性
//先设置图片上传接口，一定要写在建立编辑器之前
layedit.set({
        uploadImage: {
            url: '<%=path%>/wzfb/PhotoSava',//图片上传接口
            type: "post"  //默认post
            }
        });
//建立编辑器的方法 layedit.build(id, options)
//id对应textarea标签的id,options是允许我们对编辑器进行一些设置
tex = layedit.build('wznr', {
			//tool重新定制编辑器工具栏,每个组件对应的功能解释可见官方文档
			//height设置高度
            tool: ['strong','italic','face','underline','del', 'link', 'unlink', '|', 'left', 'center', 'right','b','image']
            ,height: 800
        });

设置完成后如下所示:

给富文本编辑器进行新增或修改方法

//监听提交
        form.on('submit(sava)', function (data) {
            index = layer.load(2);
            //表单取值
            var json = $("#form1").GetWebControlsNoEncode();
            //getContent获取内容
            if (layedit.getContent(tex) !=null){
            //replace百分号替换
                json["wznr"] = layedit.getContent(tex).replace(/%/g,"%25");
            }else {
                json["wznr"] = layedit.getContent(indexs).replace(/%/g,"%25");
            }
            json['ids'] = id;
			//下面就是写新增修改的ajax
            )};

富文本编辑器回显

if (isNull(id)) {
                var url = "<%=path%>/wzfb/getWzfbById?id=" + id;
                var prame = {};
                $.post(url, prame, function (data) {
                    if (data.data.wznr != null){
                        $("#wznr").html(data.data.wznr.replace(/%25/g,"%"));
                    }else {
                        $("#wznr").html(data.data.wznr);
                    }
                    //表单赋值
                    $("#form1").SetWebControls(data.data);
                    //要回显就必须重新渲染富文本编辑器
                    indexs= layedit.build('wznr', {
                        tool: ['strong','italic','face','underline','del', 'link', 'unlink', '|', 'left', 'center', 'right','b','image']
                        ,height: 800});
                });
            }