ueditor在layer不显示的问题

最新推荐文章于 2024-03-06 16:07:05 发布

free5156

最新推荐文章于 2024-03-06 16:07:05 发布

阅读量398

点赞数

分类专栏： javascript 文章标签： js 前端

本文链接：https://blog.csdn.net/csdncaoguo940713/article/details/119842325

版权

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文讲述了在知识管理系统前端开发中遇到的问题，即如何在layui的layer弹层中使用ueditor富文本编辑器并保持其在多次点击时都能正常初始化。由于原有代码难以复用，作者通过动态生成编辑器id来解决同一id只被初始化一次的问题，确保每次弹层显示时编辑器都能正确工作。解决方案包括在点击事件中生成唯一的编辑器id，并在layer弹层成功加载后使用该id初始化ueditor。

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

最近在做知识管理系统的前端页面，碰到了这样的一个需求，要使用富文本编辑器插件，并且样式保持和原有的插件一致，但是因为原有的页面使用了element组件而且是通过iframe引入，源码非常难以复用，几乎是要靠猜了才知道写的什么，于是自己动手写了一个，效果如图

实现方法也比较简单，直接整合layui的layer弹层加ueditor插件，把官网上面的demo跑一遍，于是发现入坑了，绑定了点击事件之后，只有第一次点击才会在弹层正常显示，注意这里字符串有</script>标签要转义

         function show() {
     
            layui.use('layer', function () {
                var layer = layui.layer;

                layer.open({
                    title: '编辑',
                    type: 1,
                    content: `<script id="myEditor" type="text/plain" 
                                 style="height: 300px; width: 660px; margin: 20px;">        <\/script>
                             `,
                    area: ['720px', '540px'],
                    btn: ['确认'],
                    btnAlign: 'c',
                    success: function (layero, index) {
                        UE.getEditor("myEditor");
                    }
                })
            })
        }

        $(function () {

            $('#teset').click(function () {
                show();
            })
        })

在查阅相关资料之后，发现editor会绑定id，同一个id只会初始化一次，关闭弹层之后就不会再执行初始化了

没办法只好曲线救国了，不能用固定id那就动态生成id，使用时间戳拼一个伪uuid，保证每一次弹层中的模板id都是动态的，都会触发初始化，代码如下


        function getEditorId() {
            const id = 'editor' + new Date().getTime();
            return id;
        }


        function show() {
            const eid = getEditorId();

            layui.use('layer', function () {
                var layer = layui.layer;
                var editor;

                layer.open({
                    title: '编辑',
                    type: 1,
                    content: `<script id="${eid}" type="text/plain" 
                                 style="height: 300px; width: 660px; margin: 20px;"><\/script>
                             `,
                    area: ['720px', '540px'],
                    btn: ['确认'],
                    btnAlign: 'c',
                    success: function (layero, index) {
                        UE.getEditor(eid);
                    }
                })
            })
        }

        $(function () {

            $('#teset').click(function () {
                show();
            })
        })