440 lines
14 KiB
PHP
440 lines
14 KiB
PHP
<div class="publish-section">
|
||
<h2 class="section-title">发布文章</h2>
|
||
<p class="section-desc">分享您的技术见解、经验总结或其他有价值的内容</p>
|
||
|
||
<form class="layui-form" lay-filter="publishForm">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="layui-font-red">*</span>文章标题</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="title" placeholder="请输入文章标题" class="layui-input" lay-verify="required"
|
||
lay-reqtext="文章标题不能为空" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="layui-font-red">*</span>文章分类</label>
|
||
<div class="layui-input-block">
|
||
<select name="category" lay-verify="required" lay-reqtext="请选择文章分类">
|
||
<option value="">请选择分类</option>
|
||
<option value="tech">技术文章</option>
|
||
<option value="tutorial">教程指南</option>
|
||
<option value="news">行业资讯</option>
|
||
<option value="experience">经验分享</option>
|
||
<option value="other">其他文章</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-form-text">
|
||
<label class="layui-form-label">文章摘要</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="summary" placeholder="请简要概括文章主要内容" class="layui-textarea" rows="4"
|
||
lay-reqtext="请填写文章摘要"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-form-text">
|
||
<label class="layui-form-label"><span class="layui-font-red">*</span>文章内容</label>
|
||
<div class="layui-input-block">
|
||
<div id="editor-wrapper" style="border: 1px solid #e8e8e8; border-radius: 6px;">
|
||
<div id="toolbar-container" style="border-bottom: 1px solid #e8e8e8;"></div>
|
||
<div id="editor-container" style="height: 400px;"></div>
|
||
</div>
|
||
<textarea name="content" id="contentTextarea" style="display: none;"></textarea>
|
||
<div class="layui-word-aux">支持富文本编辑，可插入图片、链接、代码块等</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="layui-form-item">
|
||
<label class="layui-form-label">文章标签</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="tags" placeholder="请输入文章标签，用逗号分隔" class="layui-input" />
|
||
<span class="layui-word-aux">如：PHP,ThinkPHP,开发经验</span>
|
||
</div>
|
||
</div> -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">封面图片</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn" id="uploadCoverBtn">上传封面</button>
|
||
<div class="layui-upload-list" id="coverList"></div>
|
||
<span class="layui-word-aux">建议尺寸：800x450px，支持 JPG、PNG 格式</span>
|
||
</div>
|
||
<input type="hidden" name="cover_image" id="coverInput" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">原文链接</label>
|
||
<div class="layui-input-block">
|
||
<input type="url" name="source_url" placeholder="如果这是转载文章，请填写原文链接" class="layui-input" />
|
||
</div>
|
||
</div>
|
||
<!-- <div class="layui-form-item">
|
||
<label class="layui-form-label">发布选项</label>
|
||
<div class="layui-input-block">
|
||
<input type="checkbox" name="is_draft" value="1" title="保存为草稿" lay-skin="primary">
|
||
<input type="checkbox" name="allow_comment" value="1" title="允许评论" lay-skin="primary" checked>
|
||
</div>
|
||
</div> -->
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button type="submit" class="layui-btn" lay-submit lay-filter="publishSubmit">发布文章</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置表单</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/index.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/css/style.css">
|
||
<script>
|
||
layui.use(['form', 'layer', 'upload'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var upload = layui.upload;
|
||
var $ = layui.jquery;
|
||
|
||
// 等待wangeditor加载完成
|
||
if (typeof window.wangEditor === 'undefined') {
|
||
console.error('wangEditor未正确加载');
|
||
return;
|
||
}
|
||
|
||
// 初始化富文本编辑器
|
||
const { createEditor, createToolbar } = window.wangEditor;
|
||
|
||
const editorConfig = {
|
||
placeholder: '请输入文章内容...',
|
||
onChange(editor) {
|
||
const html = editor.getHtml();
|
||
// 同步到隐藏的textarea
|
||
$('#contentTextarea').val(html);
|
||
},
|
||
MENU_CONF: {}
|
||
};
|
||
|
||
// 配置图片上传
|
||
editorConfig.MENU_CONF['uploadImage'] = {
|
||
server: '/index/user/uploadImage',
|
||
fieldName: 'file',
|
||
maxFileSize: 2 * 1024 * 1024, // 2M
|
||
maxNumberOfFiles: 10,
|
||
allowedFileTypes: ['image/*'],
|
||
onBeforeUpload(file) {
|
||
console.log('准备上传图片', file);
|
||
return file;
|
||
},
|
||
onProgress(progress) {
|
||
console.log('上传进度', progress);
|
||
},
|
||
onSuccess(file, res) {
|
||
console.log('上传成功', file, res);
|
||
},
|
||
onFailed(file, res) {
|
||
console.log('上传失败', file, res);
|
||
layer.msg('上传失败：' + (res.message || '未知错误'), { icon: 2 });
|
||
},
|
||
onError(file, err, res) {
|
||
console.error('上传出错', file, err, res);
|
||
layer.msg('上传出错：' + (err.message || '网络错误'), { icon: 2 });
|
||
},
|
||
customInsert(res, insertFn) {
|
||
console.log('自定义插入', res);
|
||
if (res.code === 0 && res.data && res.data.url) {
|
||
insertFn(res.data.url, res.data.alt || '', res.data.href || '');
|
||
} else {
|
||
layer.msg(res.msg || '上传失败', { icon: 2 });
|
||
}
|
||
}
|
||
};
|
||
|
||
// 创建编辑器
|
||
const editor = createEditor({
|
||
selector: '#editor-container',
|
||
config: editorConfig,
|
||
html: '<p><br></p>',
|
||
mode: 'default'
|
||
});
|
||
|
||
// 创建工具栏
|
||
const toolbar = createToolbar({
|
||
editor,
|
||
selector: '#toolbar-container',
|
||
config: {},
|
||
mode: 'default'
|
||
});
|
||
|
||
// 表单提交
|
||
form.on('submit(publishSubmit)', function (data) {
|
||
// 获取编辑器内容
|
||
var content = editor.getHtml();
|
||
if (!content || content === '<p><br></p>') {
|
||
layer.msg('请输入文章内容', { icon: 2 });
|
||
return false;
|
||
}
|
||
|
||
var loadIndex = layer.load(2);
|
||
data.field.content = content;
|
||
|
||
$.ajax({
|
||
url: '/index/user/publishArticle',
|
||
type: 'POST',
|
||
data: data.field,
|
||
success: function (res) {
|
||
layer.close(loadIndex);
|
||
if (res.code == 0) {
|
||
layer.msg(res.msg, { icon: 1 });
|
||
setTimeout(function () {
|
||
// 重置表单
|
||
form.val('publishForm', {
|
||
title: '',
|
||
category: '',
|
||
summary: '',
|
||
tags: '',
|
||
source_url: '',
|
||
is_draft: 0,
|
||
allow_comment: 1
|
||
});
|
||
|
||
// 清空富文本编辑器
|
||
editor.setHtml('<p><br></p>');
|
||
$('#contentTextarea').val('');
|
||
|
||
// 清空封面图片
|
||
$('#coverList').empty().hide();
|
||
$('#coverInput').val('');
|
||
}, 1000);
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2 });
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
|
||
// 封面图片上传
|
||
upload.render({
|
||
elem: '#uploadCoverBtn',
|
||
url: 'index/upload_img',
|
||
accept: 'image',
|
||
acceptMime: 'image/*',
|
||
exts: 'jpg|png|jpeg',
|
||
size: 2048, // 2MB
|
||
before: function (obj) {
|
||
layer.load(1);
|
||
},
|
||
done: function (res) {
|
||
layer.closeAll('loading');
|
||
if (res.code === 0) {
|
||
$('#coverList').html(`
|
||
<div class="upload-item">
|
||
<img src="${res.data.url}" alt="封面图" />
|
||
<div class="upload-actions">
|
||
<i class="layui-icon layui-icon-delete" onclick="removeCover()"></i>
|
||
</div>
|
||
</div>
|
||
`).show();
|
||
$('#coverInput').val(res.data.url);
|
||
layer.msg('上传成功', { icon: 1 });
|
||
} else {
|
||
layer.msg(res.msg || '上传失败', { icon: 2 });
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.closeAll('loading');
|
||
layer.msg('上传失败', { icon: 2 });
|
||
}
|
||
});
|
||
|
||
// 删除封面图片
|
||
window.removeCover = function () {
|
||
$('#coverList').empty().hide();
|
||
$('#coverInput').val('');
|
||
};
|
||
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.layui-form-label {
|
||
width: 110px !important;
|
||
}
|
||
|
||
.layui-font-red {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.publish-section {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.section-desc {
|
||
color: #666;
|
||
margin-bottom: 32px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.layui-form-label {
|
||
width: 120px;
|
||
}
|
||
|
||
.layui-input-block {
|
||
margin-left: 150px;
|
||
}
|
||
|
||
.layui-form-item {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.layui-input,
|
||
.layui-textarea,
|
||
.layui-select {
|
||
border-radius: 6px;
|
||
border: 1px solid #e8e8e8;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.layui-input:focus,
|
||
.layui-textarea:focus,
|
||
.layui-select:focus {
|
||
border-color: #1677ff;
|
||
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
|
||
}
|
||
|
||
/* 富文本编辑器样式 */
|
||
#editor-wrapper {
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#toolbar-container {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* 封面图片上传样式 */
|
||
.cover-upload {
|
||
border: 2px dashed #d9d9d9;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
background: #fafafa;
|
||
}
|
||
|
||
.cover-upload:hover {
|
||
border-color: #1677ff;
|
||
background: #f8f9ff;
|
||
}
|
||
|
||
.cover-placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
.cover-placeholder .layui-icon {
|
||
font-size: 48px;
|
||
color: #ccc;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.cover-placeholder p {
|
||
margin: 8px 0;
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
|
||
.cover-placeholder span {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
#coverList {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
#coverList .upload-item {
|
||
position: relative;
|
||
width: 200px;
|
||
height: 120px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 1px solid #e8e8e8;
|
||
background: #fff;
|
||
}
|
||
|
||
#coverList .upload-item img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
#coverList .upload-actions {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
#coverList .upload-item:hover .upload-actions {
|
||
opacity: 1;
|
||
}
|
||
|
||
#coverList .upload-actions .layui-icon {
|
||
color: #fff;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.layui-btn {
|
||
border-radius: 6px;
|
||
padding: 0 24px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.layui-btn-primary {
|
||
border-color: #d9d9d9;
|
||
color: #666;
|
||
}
|
||
|
||
.layui-btn-primary:hover {
|
||
border-color: #1677ff;
|
||
color: #1677ff;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.layui-form-label {
|
||
width: 100px;
|
||
}
|
||
|
||
.layui-input-block {
|
||
margin-left: 120px;
|
||
}
|
||
|
||
#coverList .upload-item {
|
||
width: 150px;
|
||
height: 90px;
|
||
}
|
||
|
||
.layui-layedit {
|
||
height: 300px !important;
|
||
}
|
||
}
|
||
</style> |