92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}添加公告 - 图书管理系统{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/announcement-form.css') }}">
|
|
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="announcement-form-container">
|
|
<div class="page-header">
|
|
<h1>添加公告</h1>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% if error %}
|
|
<div class="alert alert-danger">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="{{ url_for('announcement.add_announcement') }}" id="announcementForm">
|
|
<div class="form-group">
|
|
<label for="title">公告标题 <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="title" name="title" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="editor">公告内容 <span class="text-danger">*</span></label>
|
|
<div id="editor" style="height: 250px;"></div>
|
|
<input type="hidden" name="content" id="content">
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="is_top" name="is_top">
|
|
<label class="form-check-label" for="is_top">置顶公告</label>
|
|
</div>
|
|
|
|
<div class="form-buttons">
|
|
<button type="button" class="btn btn-secondary" onclick="history.back()">取消</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">发布公告</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
|
|
<script src="{{ url_for('static', filename='js/announcement-form.js') }}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化富文本编辑器
|
|
const quill = new Quill('#editor', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: [
|
|
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ 'color': [] }, { 'background': [] }],
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
|
[{ 'align': [] }],
|
|
['link', 'image'],
|
|
['clean']
|
|
]
|
|
},
|
|
placeholder: '请输入公告内容...'
|
|
});
|
|
|
|
// 提交表单前获取富文本内容
|
|
document.getElementById('announcementForm').addEventListener('submit', function(e) {
|
|
const content = document.getElementById('content');
|
|
content.value = quill.root.innerHTML;
|
|
|
|
// 简单验证
|
|
if (!document.getElementById('title').value.trim()) {
|
|
e.preventDefault();
|
|
alert('请输入公告标题');
|
|
return false;
|
|
}
|
|
|
|
if (quill.getText().trim().length <= 1) {
|
|
e.preventDefault();
|
|
alert('请输入公告内容');
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|