layui layedit富文本编辑器使用 layui如何初始化富文本

林译川
2026-11-05 • 👁 0人浏览过
layedit.create 初始化失败常见于DOM未就绪或容器非法；上传失败多因配置时机错、后端响应格式不符；取值需用layedit.getContent并手动sync；移动端需避fixed布局及加高度约束。 layedit.create 初始化失败，页面没反应常见现象是调用
layedit.create
后编辑器区域空白、控制台无报错但 dom 没渲染。根本原因通常是 dom 节点未就绪或容器不合法。确保调用前目标
已存在于页面中（不要在
document.write
或异步插入后立刻初始化）容器必须是
</code></div>
元素，不能是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div>
或其他标签 —— layedit 不支持“无 textarea 的富文本”
如果页面用 jQuery 动态加载内容，需在插入 DOM 后手动调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.create</code></div>
，且建议加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">setTimeout</code></div>
微任务延时（防渲染未完成）
检查是否重复初始化同一 ID：layedit 会静默跳过已绑定的实例，不会报错，但也不会生效
上传图片失败，提示 “请求地址异常” 或 404
layedit 默认开启图片上传，但
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">uploadImage</code></div>
配置项没设对，就会卡在前端或返回错误响应。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.set({ uploadImage: { url: '/api/upload' } })</code></div>
必须在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.create</code></div>
之前调用，否则无效
后端接口必须返回标准 JSON：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">{"code": 0, "msg": "", "data": {"src": "https://xxx.jpg"}}</code></div>
—— 字段名大小写、嵌套层级都不能错
若用 Nginx 代理，注意跨域或路径重写导致实际请求 URL 和配置不一致（比如配了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">/api/upload</code></div>
，但 Nginx 把它转成了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">/upload</code></div>
）
上传字段名默认是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">file</code></div>
，后端接收不到请检查是否被框架自动改名（如 Spring Boot 的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">MultipartFile</code></div>
参数名需匹配）
编辑器内容取不到、提交时为空
很多人用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">$('#content').val()</code></div>
拿值，结果始终是初始空字符串 —— 因为 layedit 把内容同步到了隐藏的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><textarea></code></div>
，但不是实时双向绑定。
正确方式是调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.getContent(id)</code></div>
，其中
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">id</code></div>
是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.create</code></div>
返回的索引值（整数），不是元素 ID
如果初始化时没存返回值：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">var editIndex = layedit.create(...);</code></div>
，后续就只能靠全局变量或 DOM 属性暂存
表单提交前务必手动同步：在 submit 事件里先执行
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.sync(editIndex)</code></div>
，再取
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">$('#content').val()</code></div>
—— 否则可能拿到旧内容
注意：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">getContent</code></div>
返回的是带 HTML 标签的字符串，含
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p></code></div>
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"></code></div>
等，后端需做好 XSS 过滤
移动端光标错位、键盘弹起后编辑区消失
layedit 基于 iframe 实现，在 iOS Safari 和部分安卓 WebView 中存在兼容性问题，尤其软键盘触发后布局重排异常。
避免在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">position: fixed</code></div>
容器内使用 layedit —— 键盘弹出会强制滚动，iframe 定位失效
给容器加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">style="min-height: 200px;"</code></div>
，防止高度塌缩；同时设置
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">layedit.create</code></div>
的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">height</code></div>
参数（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">{ height: 200 }</code></div>
），别依赖 auto
iOS 上可临时加 hack：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">textarea</code></div>
外层包一个
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">div</code></div>
并监听
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">focus</code></div>
事件，触发
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.scrollTo(0, 0)</code></div>
强制归位
生产环境建议：复杂表单场景下，layedit 的移动端体验不如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">quill</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">tinymce</code></div>
，真要支持多端优先评估替代方案
layedit 的坑大多藏在「时机」和「约定」里：DOM 就绪时机、返回值保管、内容同步时机、后端响应格式 —— 这些地方一松懈，问题就无声无息。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="xjpbg-article-nav" aria-label="文章导航">

    
                                <a href="http://www.xjpbg.com/bg/36593.html" class="xjpbg-article-nav-link xjpbg-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="xjpbg-article-nav-label">上一篇</div>
                                        <div class="xjpbg-article-nav-title">在PS中如何裁剪图片显示样式 在ps中裁剪出圆形图像教程</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.xjpbg.com/bg/36619.html" class="xjpbg-article-nav-link xjpbg-article-nav-next">
                                    <div>
                                        <div class="xjpbg-article-nav-label">下一篇</div>
                                        <div class="xjpbg-article-nav-title">冰箱结冰了怎么快速除冰 冰箱结冰除冰小窍门【生活】</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="xjpbg-content-section" style="margin-top: 20px;">
                        <h2 class="xjpbg-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="xjpbg-article-list">

    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36593.html" class="xjpbg-article-link">在PS中如何裁剪图片显示样式 在ps中裁剪出圆形图像教程</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36579.html" class="xjpbg-article-link">dnf刺客86级匕首刷图加点介绍</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36578.html" class="xjpbg-article-link">dnf新版本异端审判者异界套选哪个好 异端审判者异界套装选择推荐</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36563.html" class="xjpbg-article-link">LOL克隆大作战怎么玩 LOL克隆大作战玩法攻略</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36560.html" class="xjpbg-article-link">DNF暗帝TB1改版后刷图加点攻略</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36553.html" class="xjpbg-article-link">LOL怎么调节游戏画质？英雄联盟怎么关闭游戏特效</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36550.html" class="xjpbg-article-link">dnf超大陆套怎么得 超大陆套属性介绍</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36619.html" class="xjpbg-article-link">冰箱结冰了怎么快速除冰 冰箱结冰除冰小窍门【生活】</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36627.html" class="xjpbg-article-link">wps怎么退出全屏</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/36630.html" class="xjpbg-article-link">电脑开机密码怎么取消不用输入_电脑设置免密码自动登录桌面【步骤】</a>
                                <div class="xjpbg-article-meta">2026-11-05</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="xjpbg-sidebar xjpbg-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="xjpbg-widget">
        <h3 class="xjpbg-widget-title">推荐阅读</h3>
        <div class="xjpbg-recommend-grid">

    
            <a href="http://www.xjpbg.com/bg/36630.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="电脑开机密码怎么取消不用输入_电脑设置免密码自动登录桌面【步骤】">
                </div>
                <div class="xjpbg-recommend-title">电脑开机密码怎么取消不用输入_电脑设置免密码自动登录桌面【步骤】</div>
            </a>
    
            <a href="http://www.xjpbg.com/bg/36627.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="wps怎么退出全屏">
                </div>
                <div class="xjpbg-recommend-title">wps怎么退出全屏</div>
            </a>
    
            <a href="http://www.xjpbg.com/bg/36619.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="冰箱结冰了怎么快速除冰 冰箱结冰除冰小窍门【生活】">
                </div>
                <div class="xjpbg-recommend-title">冰箱结冰了怎么快速除冰 冰箱结冰除冰小窍门【生活】</div>
            </a>
    
            <a href="http://www.xjpbg.com/bg/36605.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="layui layedit富文本编辑器使用 layui如何初始化富文本">
                </div>
                <div class="xjpbg-recommend-title">layui layedit富文本编辑器使用 layui如何初始化富文本</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="xjpbg-widget">
        <h3 class="xjpbg-widget-title">最新文章</h3>
        <ul class="xjpbg-article-list">

    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/36630.html" class="xjpbg-article-link">电脑开机密码怎么取消不用输入_电脑设置免密码自动登录桌面【步骤】</a>
                <div class="xjpbg-article-meta">2026-11-05</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/36627.html" class="xjpbg-article-link">wps怎么退出全屏</a>
                <div class="xjpbg-article-meta">2026-11-05</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/36619.html" class="xjpbg-article-link">冰箱结冰了怎么快速除冰 冰箱结冰除冰小窍门【生活】</a>
                <div class="xjpbg-article-meta">2026-11-05</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/36605.html" class="xjpbg-article-link">layui layedit富文本编辑器使用 layui如何初始化富文本</a>
                <div class="xjpbg-article-meta">2026-11-05</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/36593.html" class="xjpbg-article-link">在PS中如何裁剪图片显示样式 在ps中裁剪出圆形图像教程</a>
                <div class="xjpbg-article-meta">2026-11-05</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/36579.html" class="xjpbg-article-link">dnf刺客86级匕首刷图加点介绍</a>
                <div class="xjpbg-article-meta">2026-11-05</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="xjpbg-widget">
        <h3 class="xjpbg-widget-title">热门标签</h3>
        <div class="xjpbg-article-tag-list">

    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="xjpbg-footer">
        <div class="xjpbg-container">
            <div class="xjpbg-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.xjpbg.com/22.html" class="xjpbg-footer-link">免责声明</a>
                
                <a href="http://www.xjpbg.com/23.html" class="xjpbg-footer-link">关于我们</a>
                
                <a href="http://www.xjpbg.com/24.html" class="xjpbg-footer-link">联系我们</a>
                
                <a href="http://www.xjpbg.com/25.html" class="xjpbg-footer-link">投诉删除</a>
                
                <a href="http://www.xjpbg.com/26.html" class="xjpbg-footer-link">投稿须知</a>
                
                
            </div>
            <div class="xjpbg-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 新派编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025064387号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="xjpbg-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="http://www.xjpbg.com/static/v6/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>