dsh
5c55a76acb
- 新增共享部分模板 templates/partials/article_attachments.html （附件区标记：文件名/大小/操作列 + 上传按钮） - 新增共享 static/js/article-attachments.js：上传（multipart→files 表 type=attachments）、编辑页回填、插入正文、图片一键设封面、删除； uploadURL/listURL/editor/i18n 文案均由页面注入 - 管理员页改用共享 partial+JS（行为不变）；同时修复既有 bug： 表单提交闭包引用未声明的 articleID（作用域错误导致保存静默失败） - 普通用户页加入附件区，走 /api/my/articles/attachments（新建页 session_token / 编辑页 article_id），支持一键设封面/插入正文
171 lines
8.1 KiB
HTML
171 lines
8.1 KiB
HTML
{{define "my_article_form"}}
|
||
{{template "header" .}}
|
||
{{template "markdown_assets" .}}
|
||
<section class="max-w-4xl mx-auto px-4 py-12">
|
||
<div class="mb-8">
|
||
<h2 class="text-3xl font-bold text-gray-900">{{.FormTitleText}}</h2>
|
||
</div>
|
||
|
||
<div id="myArticleError" class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg {{if not .Error}}hidden{{end}}">
|
||
{{.Error}}
|
||
</div>
|
||
|
||
<form id="myArticleForm" action="{{.FormAction}}" method="post" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6">
|
||
<input type="hidden" name="_csrf" value="{{.CSRFToken}}">
|
||
{{if .SessionToken}}
|
||
<input type="hidden" name="session_token" id="myArticleSessionToken" value="{{.SessionToken}}">
|
||
{{end}}
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_title"}}</label>
|
||
<input type="text" name="title" value="{{.FormTitle}}" required
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_slug"}}</label>
|
||
<input type="text" name="slug" value="{{.FormSlug}}"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||
<p class="mt-1 text-sm text-gray-500">{{index .Tr "article_slug_help"}}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_summary"}}</label>
|
||
<textarea name="summary" rows="3"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{.FormSummary}}</textarea>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_content"}}</label>
|
||
<textarea id="content" name="content" rows="20"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{.FormContent}}</textarea>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_cover"}}</label>
|
||
<input type="text" name="cover" value="{{.FormCover}}"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||
<p class="mt-1 text-sm text-gray-500">{{index .Tr "article_cover_help"}}</p>
|
||
</div>
|
||
|
||
<!-- Attachments -->
|
||
{{template "article_attachments" .}}
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_published_at"}}</label>
|
||
<input type="datetime-local" name="published_at" value="{{.FormPublishedAt}}"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||
<p class="mt-1 text-sm text-gray-500">{{index .Tr "article_published_at_hint"}}</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">{{index .Tr "article_field_status"}}</label>
|
||
<select name="status"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||
<option value="0" {{if eq .FormStatus "0"}}selected{{end}}>{{index .Tr "article_draft"}}</option>
|
||
<option value="1" {{if eq .FormStatus "1"}}selected{{end}}>{{index .Tr "article_published"}}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-3">
|
||
<button type="submit"
|
||
class="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors">
|
||
{{index .Tr "article_save"}}
|
||
</button>
|
||
<a href="/my/articles"
|
||
class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg font-medium hover:bg-gray-300 transition-colors">
|
||
{{index .Tr "article_cancel"}}
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<script src="/static/js/article-attachments.js?v=1"></script>
|
||
|
||
<script>
|
||
var myEasyMDE = null;
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 文章附件接口的上下文：新建页用 session_token，编辑页用 article_id。
|
||
var sessEl = document.getElementById('myArticleSessionToken');
|
||
var ATT = {
|
||
articleID: {{ if .FormArticleID }}{{ .FormArticleID }}{{ else }}0{{ end }},
|
||
sessionToken: sessEl ? sessEl.value : '',
|
||
uploadURL: "/api/my/articles/attachments"
|
||
};
|
||
|
||
// 编辑器“上传图片”按钮：选择本地图片 → 上传（files 表）→ 插入正文光标处。
|
||
function uploadImageAction(editor) {
|
||
var input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'image/*';
|
||
input.onchange = function () {
|
||
var f = input.files && input.files[0];
|
||
if (!f) return;
|
||
blogUploadImage({ url: ATT.uploadURL, file: f, articleID: ATT.articleID, sessionToken: ATT.sessionToken })
|
||
.then(function (r) {
|
||
if (r.error) { blogShowError('myArticleError', r.error); return; }
|
||
if (!r.is_image) { blogShowError('myArticleError', '{{index .Tr "article_image_not_image"}}'); return; }
|
||
editor.codemirror.replaceSelection('\n');
|
||
editor.codemirror.focus();
|
||
});
|
||
};
|
||
input.click();
|
||
}
|
||
|
||
myEasyMDE = new EasyMDE({
|
||
element: document.getElementById('content'),
|
||
autoDownloadFontAwesome: false,
|
||
spellChecker: false,
|
||
status: false,
|
||
previewRender: function (plainText, preview) {
|
||
return '<div class="md-body">' + BlogMD.render(plainText) + '</div>';
|
||
},
|
||
toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|",
|
||
"link", { name: 'uploadImage', className: 'fa fa-image', title: '{{index .Tr "article_image_upload"}}', action: uploadImageAction }, "|", "preview", "side-by-side", "fullscreen", "|", "guide"]
|
||
});
|
||
|
||
// ---- Attachments（共享逻辑，见 static/js/article-attachments.js） ----
|
||
initArticleAttachments({
|
||
uploadURL: ATT.uploadURL,
|
||
listURL: '/api/my/articles/:id/attachments',
|
||
editor: myEasyMDE,
|
||
articleID: ATT.articleID,
|
||
sessionToken: ATT.sessionToken,
|
||
texts: {
|
||
pick: '{{index .Tr "article_att_pick"}}',
|
||
uploading: '{{index .Tr "article_att_uploading"}}',
|
||
insert: '{{index .Tr "article_att_insert"}}',
|
||
setCover: '{{index .Tr "article_att_set_cover"}}',
|
||
coverSet: '{{index .Tr "article_att_cover_set"}}',
|
||
del: '{{index .Tr "settings_delete"}}',
|
||
delConfirm: '{{index .Tr "article_att_delete_confirm"}}',
|
||
err: '{{index .Tr "article_att_error"}}'
|
||
}
|
||
});
|
||
});
|
||
|
||
// ---- Form submit（JSON API） ----
|
||
(function () {
|
||
var form = document.getElementById('myArticleForm');
|
||
if (!form) return;
|
||
var articleId = {{ if .FormArticleID }}{{ .FormArticleID }}{{ else }}0{{ end }};
|
||
form.addEventListener('submit', function (e) {
|
||
e.preventDefault();
|
||
var btn = e.submitter || null;
|
||
var ta = document.getElementById('content');
|
||
if (ta && myEasyMDE) { ta.value = myEasyMDE.value(); }
|
||
var method = articleId ? 'PUT' : 'POST';
|
||
var url = articleId ? '/api/my/articles/' + articleId : '/api/my/articles';
|
||
blogAPI(method, url, blogForm(form, btn)).then(function (r) {
|
||
if (r.ok) { window.location.href = r.redirect || '/my/articles'; }
|
||
else { blogShowError('myArticleError', r.error || 'Failed to save article.'); }
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
{{template "footer" .}}
|
||
{{end}}
|