chore: 重写初始提交(清空历史,整理后全量提交)
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>公众号式文章编辑器</title>
|
||||
<!-- 引入 Layui 样式 -->
|
||||
<link rel="stylesheet" href="/assets/layui/css/layui.css" />
|
||||
<link rel="stylesheet" href="/assets/ywxapp/css/ywxapp.css" />
|
||||
<!-- 引入 UEditorPlus 核心 -->
|
||||
|
||||
<script type="text/javascript" src=" /assets/library/ueditor/ueditor.config.js"></script>
|
||||
<script type="text/javascript" src="/assets/library/ueditor/ueditor.all.js"></script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class=" layui-container">
|
||||
<!-- 核心编辑区 -->
|
||||
<form class="layui-form action="">
|
||||
<!-- 标题输入 -->
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="title" autocomplete="off" placeholder="请在这里输入标题(最多64字)" lay-verify="required" class="layui-input" maxlength="64">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="author" autocomplete="off" placeholder="请输入作者(最多8字)" maxlength="8" lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
|
||||
<script id="editor" type="text/plain" style="height: 450px;"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能按钮:保存/预览/发表 -->
|
||||
<div class="function-buttons">
|
||||
<button class="layui-btn layui-btn-normal" id="saveDraft">保存为草稿</button>
|
||||
<button class="layui-btn layui-btn-primary" id="preview">预览</button>
|
||||
<button class="layui-btn layui-btn-danger" id="publish">发表</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<!-- 引入 Layui 脚本 -->
|
||||
<script src="/assets/layui/layui.js"></script>
|
||||
<script src="/assets/ywxapp/ywxapp.js" module="backend"></script>
|
||||
<script>
|
||||
// 初始化 Layui
|
||||
layui.use(["jquery", "form"], function () {
|
||||
var $ = layui.jquery;
|
||||
var form = layui.form;
|
||||
|
||||
// 1. 初始化 UEditorPlus(富文本编辑器)
|
||||
var ue = UE.getEditor("editor", {
|
||||
toolbars: [
|
||||
[
|
||||
"undo", // 撤销
|
||||
"redo", "|", // 重做
|
||||
"removeformat", // 清除格式
|
||||
"formatmatch", // 格式刷
|
||||
"|",
|
||||
"fontsize", // 字号
|
||||
"bold", // 加粗
|
||||
"italic", // 斜体
|
||||
"underline", // 下划线
|
||||
"strikethrough",// 删除线
|
||||
"forecolor", // 字体颜色
|
||||
"backcolor", // 背景色
|
||||
"|",
|
||||
"justifyleft", // 居左对齐
|
||||
"justifycenter", // 居中对齐
|
||||
"justifyright",
|
||||
"justifyjustify", // 两端对齐
|
||||
"indent", // 首行缩进
|
||||
"|",
|
||||
"inserttable", // 插入表格
|
||||
"blockquote", // 引用
|
||||
"horizontal",
|
||||
"insertcode", // 插入代码
|
||||
"emotion", // 表情
|
||||
"|",
|
||||
"ai", // AI智能
|
||||
"|",
|
||||
"print", // 打印
|
||||
"preview", // 预览
|
||||
"searchreplace", // 查询替换
|
||||
]
|
||||
],
|
||||
autoHeightEnabled: true,
|
||||
initialFrameWidth: "100%",
|
||||
initialFrameHeight: 450,
|
||||
});
|
||||
|
||||
// 2. 功能按钮事件绑定
|
||||
// 保存草稿
|
||||
$("#saveDraft").on("click", function () {
|
||||
var title = $(".editor-title input").val().trim();
|
||||
var author = $(".editor-author input").val().trim();
|
||||
var content = ue.getContent(); // 获取编辑器内容
|
||||
|
||||
// 这里对接后端 API 保存草稿(示例仅打印)
|
||||
console.log("保存草稿:", { title, author, content });
|
||||
layui.layer.msg("草稿已保存!", { icon: 1 });
|
||||
});
|
||||
|
||||
// 预览
|
||||
$("#preview").on("click", function () {
|
||||
// 实际需打开新窗口渲染内容,这里模拟
|
||||
var previewContent = `标题:${$(".editor-title input").val()}\n作者:${$(".editor-author input").val()}\n内容:${ue.getContent()}`;
|
||||
layui.layer.open({
|
||||
type: 1,
|
||||
title: "预览",
|
||||
content: `<p>${previewContent}</p>`,
|
||||
area: ["500px", "400px"],
|
||||
});
|
||||
});
|
||||
|
||||
// 发表
|
||||
$("#publish").on("click", function () {
|
||||
var title = $(".editor-title input").val().trim();
|
||||
var author = $(".editor-author input").val().trim();
|
||||
var content = ue.getContent();
|
||||
|
||||
// 对接后端 API 发表文章(示例仅打印)
|
||||
console.log("发表文章:", { title, author, content });
|
||||
layui.layer.msg("文章已发表!", { icon: 1 });
|
||||
});
|
||||
|
||||
// 3. 表单开关事件(原创/赞赏/留言等)
|
||||
form.on("switch()", function (data) {
|
||||
var label = data.othis.parents("div").prev("label").text();
|
||||
console.log(`${label} 状态:`, data.elem.checked);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
|
||||
<div class="layui-container">
|
||||
<div class="admin-title">编辑文章</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" id="articleForm" action="{:url('blog/backend.article/update', ['id' => $article.id])}" method="post">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" value="{$article.title}" required lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章分类</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="cid" lay-verify="required">
|
||||
<option value="">请选择分类</option>
|
||||
{volist name="categories" id="category"}
|
||||
<option value="{$category.id}" {if $article.cid==$category.id}selected{/if}>{$category.name}</option>
|
||||
{/volist}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章标签</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="tags" value="{$tagNamesStr}" placeholder="多个标签用逗号分隔" autocomplete="off" class="layui-input">
|
||||
<div class="layui-form-mid layui-word-aux">例如:PHP,ThinkPHP,编程</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章摘要</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="summary" class="layui-textarea" placeholder="选填,留空将自动截取正文前 150 字" style="max-width:600px;">{$article.summary}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">封面图</label>
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="uploadCover">
|
||||
<i class="layui-icon"></i>上传图片
|
||||
</button>
|
||||
<input type="hidden" name="cover_image" id="coverImage" value="{$article.cover_image}">
|
||||
<div class="layui-word-aux">建议尺寸:800x450</div>
|
||||
<div id="coverPreview" style="margin-top:10px;">
|
||||
{if $article.cover_image}
|
||||
<img src="{$article.cover_image}" style="max-width:200px;max-height:150px;border:1px solid #eee;">
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章状态</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="status" value="1" title="发布" {if $article.status==1}checked{/if}>
|
||||
<input type="radio" name="status" value="0" title="草稿" {if $article.status==0}checked{/if}>
|
||||
<input type="checkbox" name="is_top" value="1" title="置顶" {if $article.is_top==1}checked{/if}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文章内容</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea id="editor" name="content" style="display:none;">{$article.content}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="articleSubmit">更新文章</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/lib/wangEditor/wangEditor.min.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'layer', 'upload'], function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var upload = layui.upload;
|
||||
var $ = layui.$;
|
||||
|
||||
// 初始化富文本编辑器
|
||||
var editor = new window.wangEditor('#editor');
|
||||
editor.config.uploadImgServer = '{:url("upload/image")}';
|
||||
editor.config.uploadFileName = 'image';
|
||||
editor.config.zIndex = 1000;
|
||||
editor.create();
|
||||
|
||||
// 封面图上传
|
||||
upload.render({
|
||||
elem: '#uploadCover',
|
||||
url: '{:url("upload/image")}',
|
||||
done: function(res){
|
||||
if(res.code === 1){
|
||||
$('#coverImage').val(res.data.url);
|
||||
$('#coverPreview').html('<img src="'+res.data.url+'" style="max-width:200px;max-height:150px;border:1px solid #eee;">');
|
||||
} else {
|
||||
layer.msg(res.msg, {icon: 2});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听提交
|
||||
form.on('submit(articleSubmit)', function(data){
|
||||
data.field.content = editor.txt.html();
|
||||
$.post(data.form.action, data.field, function(res){
|
||||
if(res.code === 1){
|
||||
layer.msg(res.msg, {icon: 1}, function(){
|
||||
location.href = res.url;
|
||||
});
|
||||
} else {
|
||||
layer.msg(res.msg, {icon: 2});
|
||||
}
|
||||
}, 'json');
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,154 @@
|
||||
|
||||
<div class="layui-fluid">
|
||||
<div class="admin-title">文章管理</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form layui-inline" lay-filter="searchForm">
|
||||
<div class="layui-inline">
|
||||
<select name="status">
|
||||
<option value="all">全部状态</option>
|
||||
<option value="1">已发布</option>
|
||||
<option value="0">草稿</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<select name="audit">
|
||||
<option value="all">全部审核</option>
|
||||
<option value="1">待审</option>
|
||||
<option value="2">通过</option>
|
||||
<option value="3">驳回</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" name="keyword" placeholder="搜索标题/内容" class="layui-input" id="keywordInput">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">搜索</button>
|
||||
</div>
|
||||
<button type="button" class="layui-btn layui-btn-danger" id="batchDeleteBtn">批量删除</button>
|
||||
</form>
|
||||
<table class="layui-hide" id="articleTable" lay-filter="articleTable"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="rowTpl">
|
||||
<a class="layui-btn layui-btn-xs" href="{{ d.edit_url }}">编辑</a>
|
||||
{{# if (d.audit_status == 1) { }}
|
||||
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="audit">通过</a>
|
||||
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="reject">驳回</a>
|
||||
{{# } }}
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
layui.use(['table', 'layer', 'form'], function () {
|
||||
var table = layui.table;
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
|
||||
var status = '{$status|default="all"}';
|
||||
var audit = '{$audit|default="all"}';
|
||||
var keyword = '{$keyword|default=""}';
|
||||
$('select[name="status"]').val(status);
|
||||
$('select[name="audit"]').val(audit);
|
||||
$('#keywordInput').val(keyword);
|
||||
|
||||
var renderTable = function () {
|
||||
table.render({
|
||||
elem: '#articleTable',
|
||||
url: '{:url("blog/backend.article/index")}',
|
||||
where: { status: status, audit: audit, keyword: keyword },
|
||||
page: true,
|
||||
cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' },
|
||||
{ field: 'id', title: 'ID', width: 70, sort: true },
|
||||
{ field: 'title', title: '标题', minWidth: 220, templet: function (d) {
|
||||
var html = '<a href="' + d.edit_url + '">' + d.title + '</a>';
|
||||
if (d.is_top == 1) { html += ' <span class="layui-badge layui-bg-red">置顶</span>'; }
|
||||
return html;
|
||||
} },
|
||||
{ field: 'author', title: '作者', width: 120 },
|
||||
{ field: 'category', title: '分类', width: 120 },
|
||||
{ field: 'tags', title: '标签', width: 150, templet: function (d) { return d.tags || '-'; } },
|
||||
{ field: 'status', title: '状态', width: 90, templet: function (d) {
|
||||
return d.status == 1
|
||||
? '<span class="layui-badge layui-bg-green">已发布</span>'
|
||||
: '<span class="layui-badge">草稿</span>';
|
||||
} },
|
||||
{ field: 'audit_status', title: '审核', width: 90, templet: function (d) {
|
||||
var map = { 0: '<span class="layui-badge">草稿</span>', 1: '<span class="layui-badge layui-bg-orange">待审</span>', 2: '<span class="layui-badge layui-bg-green">通过</span>', 3: '<span class="layui-badge layui-bg-red">驳回</span>' };
|
||||
return map[d.audit_status] || '-';
|
||||
} },
|
||||
{ field: 'view_count', title: '阅读', width: 80, sort: true, align: 'center' },
|
||||
{ field: 'comment_count', title: '评论', width: 80, sort: true, align: 'center' },
|
||||
{ field: 'like_count', title: '点赞', width: 80, sort: true, align: 'center' },
|
||||
{ field: 'favorite_count', title: '收藏', width: 80, sort: true, align: 'center' },
|
||||
{ field: 'share_count', title: '分享', width: 80, sort: true, align: 'center' },
|
||||
{ field: 'create_text', title: '发布时间', width: 160 },
|
||||
{ title: '操作', width: 130, align: 'center', toolbar: '#rowTpl', fixed: 'right' }
|
||||
]]
|
||||
});
|
||||
};
|
||||
renderTable();
|
||||
|
||||
// 搜索
|
||||
form.on('submit(search)', function () {
|
||||
var statusVal = $('select[name="status"]').val();
|
||||
var auditVal = $('select[name="audit"]').val();
|
||||
var kw = $('#keywordInput').val();
|
||||
table.reload('articleTable', { where: { status: statusVal, audit: auditVal, keyword: kw }, page: { curr: 1 } });
|
||||
return false;
|
||||
});
|
||||
|
||||
// 批量删除
|
||||
$('#batchDeleteBtn').click(function () {
|
||||
var checkData = table.checkStatus('articleTable').data;
|
||||
if (! checkData.length) {
|
||||
return layer.msg('请选择要删除的文章');
|
||||
}
|
||||
var ids = checkData.map(function (i) { return i.id; });
|
||||
layer.confirm('确定要删除选中的 ' + ids.length + ' 篇文章吗?', function (index) {
|
||||
$.post('{:url("blog/backend.article/batch")}', { action: 'delete', ids: ids }, function (res) {
|
||||
if (res.code === 1) {
|
||||
layer.msg(res.msg, { icon: 1 }, function () { renderTable(); });
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
});
|
||||
|
||||
// 行操作
|
||||
table.on('tool(articleTable)', function (obj) {
|
||||
if (obj.event === 'audit') {
|
||||
layer.confirm('确认审核通过该文章?', function (index) {
|
||||
$.post('{:url("blog/backend.article/audit")}', { id: obj.data.id }, function (res) {
|
||||
layer.msg(res.msg, { icon: res.code === 1 ? 1 : 2 }, function () { renderTable(); });
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
} else if (obj.event === 'reject') {
|
||||
layer.prompt({ title: '驳回理由', formType: 2 }, function (val, index) {
|
||||
$.post('{:url("blog/backend.article/reject")}', { id: obj.data.id, reason: val }, function (res) {
|
||||
layer.close(index);
|
||||
layer.msg(res.msg, { icon: res.code === 1 ? 1 : 2 }, function () { renderTable(); });
|
||||
});
|
||||
});
|
||||
} else if (obj.event === 'delete') {
|
||||
layer.confirm('确定要删除这篇文章吗?', function (index) {
|
||||
$.post('{:url("blog/backend.article/delete")}', { id: obj.data.id }, function (res) {
|
||||
if (res.code === 1) {
|
||||
layer.msg(res.msg, { icon: 1 }, function () { renderTable(); });
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user