富文本编辑框获取数据

最新推荐文章于 2024-06-17 15:42:29 发布

「已注销」

最新推荐文章于 2024-06-17 15:42:29 发布

阅读量1.3k

点赞数

分类专栏： javaWeb 文章标签： web

本文链接：https://blog.csdn.net/LIUUGNAY/article/details/119742754

版权

javaWeb 专栏收录该内容

6 篇文章

订阅专栏

本文档详细介绍了如何在前端页面中正确地将数据回显到富文本框，并强调了先赋值再创建编辑器的重要性。示例代码展示了如何利用layui编辑器，先通过`$('#editor').val(window.parent.q_val())`赋值，然后调用`layui.layedit.build`创建编辑器，确保内容能正确显示。同时，还提供了在按钮点击事件中同步编辑器内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取数据回显到富文本框

无论是从数据库还是前端页面回显到富文本框内的内容，一定先赋值，再创建文本框！！！！

前端页面

<div class="layui-form-item">
    <label class="layui-form-label">正文</label>
    <div class="layui-input-block">
        <textarea id="editor" name="content" style="display: none;"></textarea>
    </div>
</div>

创建富文本框的js

<script>
    // ==重点：先赋值，我这里的window.parent.q_val()是父页面的q_val()函数，传过来的是一个val值，
    // 有需要数据库中的就从后台传过来值就好
    $('#editor').val(window.parent.q_val());

    layui.use('layedit', function(){
        var layedit = layui.layedit;
        //上传图片接口：注意：layedit.set 一定要放在 build前面，否则配置全局接口将无效
        layedit.set({
            uploadImage: {
                url: '/file/img_upload', //接口url
                type: 'post' //默认post
            },
        });
        //创建编辑器
        var index = layedit.build('editor', {
            height: 280 //设置编辑器高度
        });
        // layedit.setContent(window.parent.q_val());		这里先创建编辑器，再使用setContent赋值无法实现！
        $('.layui-btn').click(function(){
            layedit.sync(index);
        });
    });
</script>