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> |