{% extends "_common/base.html" %} {% block css %} {% load avatar_tags %} {% load day_util %} {% endblock %} {% block container %} <div class="ui grid stackable container"> <div class="row" id="article"> <div class="eleven wide column"> <div class="ui feed"> <h2>动态</h2> <div class="ui divider"></div> {% for item in articles_new %} {% if item.type == 1 %} <div class="event"> <div class="label"> <img src="/user_avatar/{{ item.user_id }}"> </div> <div class="content"> <div class="date" style="font-size: 1.1em">{{ item.created_time | days_until }}</div> <div class="summary"><a>{{ item.user__first_name }}{{ item.user__last_name }}</a> 发布了{{ item.category__name }}: <a href="/article/{{ item.id }}.html">{{ item.title }}</a></div> <div class="extra text">{{ item.intro }} Tags: {% for tag in item.tags %} <a href="/tag/{{ tag }}?page=1"><span class="label label-success">{{ tag }}</span></a> {% endfor %}</div> </div> </div> {% elif item.type == 2 %} <div class="event"> <div class="label"> <img src="/user_avatar/{{ item.user_id }}"> </div> <div class="content"> <div class="date" style="font-size: 1.1em">{{ item.created_time | days_until }}</div> <div class="summary"><a>{{ item.user__first_name }}{{ item.user__last_name }}</a> 发布了{{ item.category__name }}: <a href="/article/{{ item.id }}.html">{{ item.title }}</a></div> {% autoescape off %} <div class="extra images"> {{ item.html_text }} </div> {% endautoescape %} </div> </div> {% endif %} {% endfor %} {% if is_login %} <h3>发布动态</h3> <div class="ui divider"></div> <form class="ui reply form"> {% csrf_token %} <div class="field"> <!-- 编辑器 DOM --> <input placeholder="文字" name="title" class="ui input"> <div style="border: 1px solid #ccc;margin-top: 5px"> <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div> <div id="editor-text-area"></div> </div> </div> <div onclick="submit()" style="float: right" class="ui primary submit labeled icon button"> <i class="icon send"></i> 发布 </div> </form> {% endif %} </div> </div> <div class="four wide right floated column"> <h4 class="ui header">归档</h4> <div class="ui list"> {% for record in records %} <a class="item" href="/date/{{ record.datetime }}?page=1">{{ record.datetime }} ({{ record.count }})</a> {% endfor %} </div> <h4 class="ui header">Top</h4> <div class="ui list"> {% for tag in tags %} <a class="item" href="/tag/{{ tag.name }}?page=1">{{ tag.name }} ({{ tag.count }})</a> {% endfor %} </div> </div> </div> </div> {% endblock %} {% block js %} {% if is_login %} <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script> <script> const E = window.wangEditor // 切换语言 const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN' E.i18nChangeLanguage(LANG) const imageToHtmlConf = { type: 'image', elemToHtml: function imageToHtml(elemNode) { const {src, alt, href = '', style = {}, width, height} = elemNode || {} return `<a data-pswp-width="${alt.split(',')[1]}" data-pswp-height="${alt.split(',')[1]}" href="${src}"><img data-magnify="gallery" data-src="${src}" src="${src}" data-href="${href}" "/></a>` } }; const editorConfig = { placeholder: 'Type here...', scroll: false, // 禁止编辑器滚动 MENU_CONF: { uploadImage: { server: '/management/files/upload', // form-data fieldName ,默认值 'wangeditor-uploaded-image' fieldName: 'file', // 单个文件的最大体积限制,默认为 2M maxFileSize: 4 * 1024 * 1024, // 1M // 最多可上传几个文件,默认为 100 maxNumberOfFiles: 10, // 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 [] allowedFileTypes: ['image/*'], // 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。 meta: { csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val() }, // 将 meta 拼接到 url 参数中,默认 false metaWithUrl: false, // 自定义增加 http header // 跨域是否传递 cookie ,默认为 false withCredentials: true, // 超时时间,默认为 10 秒 timeout: 5 * 1000, // 5 秒 } }, onChange(editor) { const html = editor.getHtml() $('#title').val($('#page_title').val()) } } E.Boot.registerElemToHtml(imageToHtmlConf); // 先创建 editor const editor = E.createEditor({ selector: '#editor-text-area', content: [], // html: '', config: editorConfig }) // 创建 toolbar const toolbar = E.createToolbar({ editor, mode: 'simple', selector: '#editor-toolbar', config: { excludeKeys: ['blockquote', 'header1', 'header2', 'header3', '|', 'bold', 'underline', 'italic', 'through', 'color', 'bgColor', 'clearStyle', '|', 'bulletedList', 'numberedList', 'todo', 'justifyLeft', 'justifyRight', 'justifyCenter', '|', 'insertLink', 'insertVideo', 'insertTable', 'codeBlock', '|', 'undo', 'redo', '|', 'fullScreen'] } }) </script> {% endif %} <script> function submit() { let formData = new FormData() formData.append('title', $("input[name='title']").val()) formData.append('intro', editor.getText()) formData.append('category', 6) formData.append('html', editor.getHtml()) formData.append('markdown', editor.getText()) formData.append('type', 2) formData.append('tags', '') formData.append('status', 1) formData.append('is_top', 1) formData.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val()) $.ajax('/management/article/add_article', { method: 'post', data: formData, contentType: false, processData: false, success: function (res) { window.location.href = '/' }, error: function (err) { } }) } </script> {% endblock %} {% load static %}