manghe/app/admin/view/News/add.html

{include file="Public/header3" /}
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet" />
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100;
        /* 按需定义 */
    }

    #toolbar-container {
        border-bottom: 1px solid #ccc;
    }

    #editor-container {
        height: 500px;
    }
</style>
<div class="layui-form" style="width: 90%; margin: 0 auto; padding-top: 20px;">
    <div class="layui-form-item">

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" id="title" autocomplete="off" placeholder="请输入资讯标题" class="layui-input"
                lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">封面图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadCover">上传封面图</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="coverPreview" style="max-width: 200px; max-height: 150px;">
            </div>
            <input type="hidden" name="cover_image" id="cover_image" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">热榜</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_hot" value="0" title="否" checked>
                <input type="radio" name="is_hot" value="1" title="是">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">精选</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_featured" value="0" title="否">
                <input type="radio" name="is_featured" value="1" title="是" checked>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">内容详情</label>
        <div class="layui-input-block">
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">作者姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="author_name" id="author_name" placeholder="请输入作者姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="0" title="草稿">
                <input type="radio" name="status" value="1" title="发布" checked>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布时间</label>
        <div class="layui-input-block">
            <input type="text" name="publish_time" id="publish_time" autocomplete="off" placeholder="请选择发布时间"
                class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
        </div>
    </div>
</div>
{include file="Public/footer" /}
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>

    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        },
        MENU_CONF: {}
    }
    editorConfig.MENU_CONF['uploadImage'] = {
        customUpload: async (file, insertFn) => {
            console.log(file);

            // 模拟上传到 COS 的过程
            const formData = new FormData();
            formData.append('file', file);
            const res = await fetch('/admin/picture?dir=news', {
                method: 'POST',
                body: formData
            });
            console.log("resresresresres", res);

            const result = await res.json();

            // // 成功后插入图片
            insertFn(result.data.imgurl, '图片描述', result.data.imgurl);
        }
    }


    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })

    layui.use(['form', 'upload', 'layer', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            laydate = layui.laydate,
            // layedit = layui.layedit,
            $ = layui.jquery;

        // 初始化日期选择器
        laydate.render({
            elem: '#publish_time',
            type: 'datetime',
            value: new Date()
        });


        // 上传封面图
        upload.render({
            elem: '#uploadCover',
            url: '/admin/picture',
            accept: "file",
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#coverPreview").attr("src", res.data.path);
                        $("#cover_image").val(res.data.imgurl);
                    });
                } else {
                    layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
                }
            },
            error: function () {
                layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
            }
        });

        // 表单提交
        form.on('submit(saveBtn)', function (data) {
            // 同步富文本编辑器内容
            data.field.content = editor.getHtml();

            if (!data.field.title) {
                layer.msg('标题不能为空', { icon: 2 });
                return false;
            }



            // 如果发布状态为"发布"且未设置发布时间，则设置为当前时间
            if (data.field.status == 1 && !data.field.publish_time) {
                data.field.publish_time = layui.util.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss');
            }

            $.ajax({
                url: '{:url("/admin/news_add")}',
                type: 'POST',
                data: data.field,
                success: function (res) {
                    if (res.status) {
                        layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                            parent.layui.table.reload('tableList');
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                    }
                }
            });
            return false;
        });
    });
</script>