WebTest/blog/views/admin/article-edit.art

  {{extend './common/layout.art'}}
  {{block 'main'}}
    <!-- 子模板的相对路径相对的是当前文件，因为它是由模板引擎解析的，而不是浏览器-->
    {{include './common/header.art'}}
    <!-- 主体内容 -->
    <div class="content">
        {{include './common/sider.art'}}
        <div class="main">
            <!-- 分类标题 -->
            <div class="title">
                <h4>{{@article ? article._id: ''}}</h4>
            </div>
            <!-- /分类标题 -->
            <form class="form-container" action={{link}} method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" class="form-control" placeholder="请输入文章标题" name="title" value={{article && article.title}}>
                </div>
                <div class="form-group">
                    <label>作者</label>
                    <input type="text" class="form-control" readonly name="author" value={{@userInfo._id}}>
                </div>
                <div class="form-group">
                    <label>发布时间</label>
                    <input type="date" class="form-control" name="publishDate" value={{article && dateformat(article.publishDate, 'yyyy-mm-dd')}}>
                </div>
                
                <div class="form-group">
                   <label for="exampleInputFile">文章封面</label>
                   <input type="file" name="cover" id="file" value=""{{article && article.cover}}"">
                   <div class="thumbnail-waper">
                       <img class="img-thumbnail" src="{{article && article.cover}}" id="preview">
                   </div>
                </div>
                <div class="form-group">
                    <label>内容</label>
                    <textarea class="form-control" id="editor" name="content">{{article && article.content}}</textarea>
                </div>
                <div class="buttons">
                    <input type="submit" class="btn btn-primary" value={{button}}>
                </div>
            </form>
            
        </div>
    </div>
    <!-- /主体内容 -->

    {{/block}}
    {{block 'script'}}
    <script src="lib/ckeditor5/ckeditor.js"></script>
    <script type="text/javascript">
    
        let editor;

        ClassicEditor
                .create( document.querySelector('#editor'))
                .then(newEditor => {
                    editor = newEditor;
                })
                .catch( error => {
                    console.error( error );
                });

        // 获取数据
        // const editorData = editor.getData();

        var file = document.querySelector('#file');
        // 监听文件上传事件
        file.onchange = function () {
            var reader = new FileReader();
            // 读取文件
            reader.readAsDataURL(this.files[0])
            reader.onload = function () {
                $('#preview').prop('src', reader.result)
            }
        }
    </script>
    {{/block}}