YwxAppThink/addon/blog/view/backend/article/edit.html

<div class="layui-container">
    <div class="admin-title">编辑文章</div>
    
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="articleForm" action="{:url('blog/backend.article/update', ['id' => $article.id])}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" value="{$article.title}" required lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">文章分类</label>
                    <div class="layui-input-block">
                        <select name="cid" lay-verify="required">
                            <option value="">请选择分类</option>
                            {volist name="categories" id="category"}
                            <option value="{$category.id}" {if $article.cid==$category.id}selected{/if}>{$category.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">文章标签</label>
                    <div class="layui-input-block">
                        <input type="text" name="tags" value="{$tagNamesStr}" placeholder="多个标签用逗号分隔" autocomplete="off" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">例如：PHP,ThinkPHP,编程</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">文章摘要</label>
                    <div class="layui-input-block">
                        <textarea name="summary" class="layui-textarea" placeholder="选填，留空将自动截取正文前 150 字" style="max-width:600px;">{$article.summary}</textarea>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">封面图</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" id="uploadCover">
                            <i class="layui-icon"></i>上传图片
                        </button>
                        <input type="hidden" name="cover_image" id="coverImage" value="{$article.cover_image}">
                        <div class="layui-word-aux">建议尺寸：800x450</div>
                        <div id="coverPreview" style="margin-top:10px;">
                            {if $article.cover_image}
                            <img src="{$article.cover_image}" style="max-width:200px;max-height:150px;border:1px solid #eee;">
                            {/if}
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">文章状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="发布" {if $article.status==1}checked{/if}>
                        <input type="radio" name="status" value="0" title="草稿" {if $article.status==0}checked{/if}>
                        <input type="checkbox" name="is_top" value="1" title="置顶" {if $article.is_top==1}checked{/if}>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">文章内容</label>
                    <div class="layui-input-block">
                        <textarea id="editor" name="content" style="display:none;">{$article.content}</textarea>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="articleSubmit">更新文章</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/assets/lib/wangEditor/wangEditor.min.js"></script>
<script>
layui.use(['form', 'layer', 'upload'], function(){
    var form = layui.form;
    var layer = layui.layer;
    var upload = layui.upload;
    var $ = layui.$;
    
    // 初始化富文本编辑器
    var editor = new window.wangEditor('#editor');
    editor.config.uploadImgServer = '{:url("upload/image")}';
    editor.config.uploadFileName = 'image';
    editor.config.zIndex = 1000;
    editor.create();
    
    // 封面图上传
    upload.render({
        elem: '#uploadCover',
        url: '{:url("upload/image")}',
        done: function(res){
            if(res.code === 1){
                $('#coverImage').val(res.data.url);
                $('#coverPreview').html('<img src="'+res.data.url+'" style="max-width:200px;max-height:150px;border:1px solid #eee;">');
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }
    });
    
    // 监听提交
    form.on('submit(articleSubmit)', function(data){
        data.field.content = editor.txt.html();
        $.post(data.form.action, data.field, function(res){
            if(res.code === 1){
                layer.msg(res.msg, {icon: 1}, function(){
                    location.href = res.url;
                });
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'json');
        return false;
    });
});
</script>