layui弹框显示kindEditor,bug解决

最新推荐文章于 2024-11-12 09:26:46 发布

原创最新推荐文章于 2024-11-12 09:26:46 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#layui #kindeditor

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在项目中初始化Layer和KindEditor，实现富文本编辑器的弹窗显示，并解决了KindEditor在Layer弹窗下方显示的问题。通过修改KindEditor.js中的特定数值，确保了编辑器在弹窗中正确呈现。

1.初始化layer和kindeditor

layui.use(['layer'], function () {
        window.layer = layui.layer;
        KindEditor.ready(function (K) {
            window.K=K;
            mounted();
        });

    });

2.打开弹框显示kindeditor

function mounted() {
        $('#btn_open').click(function () {
            layer.open({
                title: '编辑',
                type: 1,
                content: ‘<textarea id="editor_id" name="content" style="width: 90%;height: 300px;"></textarea>’,
                area: ['70%', '70%'],
                btn:['确定','取消'],
                success :function(){
                    window.editor = K.create('#editor_id');
                },
                yes:function (index, layero) {

                },
                btn2:function (index,layero) {

                }
            });

        })
    }