封面测试一

            </select>
        </div>

        <div class="layui-col-md1 head_form">
            <button type="button" class="layui-btn header_btn" lay-submit lay-filter="saveDraft">保存草稿</button>
        </div>
        <div class="layui-col-md1 head_form">
            <button type="button" class="layui-btn layui-bg-blue header_btn" lay-on="publish">
                发布文章
            </button>
        </div>
    </div>
</form>

<div id="editor"></div>


<script type="text/html" id="post-template">
    <form class="layui-form" style="margin: 16px;">
        <div class="layui-form-item">
            <label class="layui-form-label">标签(非必填): </label>
            <div class="layui-input-block">
                {% for tag in tag_list %}
                    <input type="checkbox" name="{{ tag.id }}" title="{{ tag.name }}">
                {% endfor %}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">封面选择: </label>
            <div class="layui-input-block" id="img_list" style="max-height: 250px; overflow-y: auto; padding-right: 10px;"></div>

        </div>

        <div style="display: flex;justify-content: flex-end; padding:0 30px 30px 0">
            <button type="button" lay-filter="publish" lay-submit class="layui-btn layui-bg-blue">发布文章</button>
        </div>
    </form>
</script>

<script src="{{ url_for('blog.static', filename='js/activate-power-mode.js') }}"></script>
<script>
    POWERMODE.colorful = true; // ture 为启用礼花特效
    POWERMODE.shake = false; // false 为禁用震动特效
    document.body.addEventListener('input', POWERMODE);
</script>

<script>
    var plugin = toastui.Editor.plugin;
    var codeSyntaxHighlight = plugin.codeSyntaxHighlight;
    var colorSyntax = plugin.colorSyntax;

    const Editor = toastui.Editor;
    const editor = new Editor({
        el: document.querySelector('#editor'),
        initialEditType: 'markdown', // 初始编辑类型，这里是 Markdown
        previewStyle: 'vertical', // 预览样式，可以是 'tab', 'vertical'
        height: '600px', // 编辑器高度
        language: 'zh-CN',  // 设置中文语言
        plugins: [codeSyntaxHighlight, colorSyntax],
        {#theme: 'dark',#}
        hooks: {  // 图片保存钩子
            addImageBlobHook: (blob, callback) => {
                {#console.log(blob) // 文件对象#}
                uploadImage(blob, function (imageUrl) {
                    {#console.log(imageUrl)#}
                    callback(imageUrl); // 将路径传递给编辑器
                }, function (error) {
                    console.error('图片上传失败：', error);
                });
            },
        }
    });

    let $ = layui.$;
    let img_list = [] // 图片列表, 存储了图片对象

    function uploadImage(imageBlob, successCallback, errorCallback) {
        let formData = new FormData();
        formData.append('file', imageBlob);
        formData.append('size', imageBlob.size.toString());
        formData.append('name', imageBlob.name === 'image.png' ? imageBlob.lastModified + '.png' : imageBlob.name);
        $.ajax({
            url: '{{ url_for('admin.upload') }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                {#console.log(data)#}
                if (data.url !== '') {
                    img_list.push(data)
                    successCallback(data.url);  // 编辑器的回显
                } else {
                    errorCallback('图片上传失败');
                }
            },
            error: function () {
                errorCallback('图片上传失败');
            }
        });
    }


    layui.use('form', () => {
        let form = layui.form;
        let layer = layui.layer;
        let util = layui.util;
        let $ = layui.$;
        let cover = ''

        util.on('lay-on', {
            'publish': () => {
                // 判断是否输入了文章标题
                let title = form.val('filter-test-layer').title
                if (title.trim() === '') {
                    layer.msg('请输入文章标题', {icon: 7, time: 1500, anim: 6});
                    return;
                }
                layer.open({
                    type: 1,
                    area: ['600px', ''],
                    resize: false,
                    shadeClose: true,
                    title: '发布文章',
                    offset: '100px',
                    content: $('#post-template').html(),
                    success: function (layero, index, that) {
                        // 弹出层渲染已上传的图片
                        const imageContainer = $('#img_list')
                        img_list.forEach((img, index) => {
                            const imgElement = $('<img alt="" src="">').attr('src', img.url).addClass('clickable-image')
                            imageContainer.append(imgElement)


                            // 重新计算弹窗盒子的高度
                            {#let box_height = Math.ceil(img_list.length / 3) * 100 + 250#}
                            {#console.log(Math.ceil(img_list.length / 3))#}
                            {#layero.css('height', `${box_height}px`)#}

                            // 重新计算弹窗盒子的高度（修改这部分）
                            // 限制最大图片展示高度为300px，超过则显示滚动条
                            let imageAreaHeight = Math.min(Math.ceil(img_list.length / 3) * 100, 250);
                            let box_height = imageAreaHeight + 250; // 250是其他元素的基础高度
                            layero.css('height', `${box_height}px`);


                            // 监听图片的点击事件
                            imgElement.click(() => {
                                imgElement.addClass('select_cover')
                                imgElement.siblings('img').removeClass('select_cover')
                                cover = img.url  // 针对选择的图片, 做封面的设置
                            })
                        })


                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        form.on('submit(publish)', function (data) {
                            let tags = data.field;
                            let category = form.val('filter-test-layer').category || "{{ category_list[0].id }}";
                            let html = editor.getHTML()
                            let markdown = editor.getMarkdown()
                            let form_data = {
                                title: title,
                                category: category,
                                tags: JSON.stringify(tags),
                                html: html,
                                markdown: markdown,
                                img_list: JSON.stringify(img_list),
                                cover: cover  // 上传到接口添加了封面
                            }
                            $.post('{{ url_for('admin.post_add') }}', form_data, (res) => {
                                    if (res === 'success') {
                                        layer.close(1, () => {
                                            layer.msg('保存成功', {icon: 1, time: 1500}, () => {
                                                window.location.href = '{{ url_for('admin.post') }}';
                                            });
                                        });
                                    }
                                }
                            )
                            return false; // 阻止默认 form 跳转
                        });
                    }
                })
            }
        })


        // 监听保存草稿按钮点击事件
        form.on('submit(saveDraft)', (data) => {
            console.log(data)
            console.log('保存草稿')
            return false;   // 阻止表单跳转
        })

        // 监听发部文章按钮点击事件
        form.on('submit(publish)', (data) => {
            console.log(data)

            let title = data.field.title
            console.log(title)
            let html = editor.getHTML()
            let markdown = editor.getMarkdown()
            console.log(html)
            console.log('-'.repeat(100))
            console.log(markdown)

            console.log('发布文章');
            return false; // 阻止表单跳转
        });
    })
</script>