基本完成新的编辑器;

This commit is contained in:
2022-03-04 12:11:06 +08:00
parent 578969d97d
commit 1a7718be0c
6 changed files with 615 additions and 565 deletions

View File

@@ -15,195 +15,204 @@ use think\Request;
class Post extends Common
{
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index()
{
//
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index()
{
//
$list = ModelPost::with(['categorys.category','tags.tag'])
->where('type',$this->request->param('type',1))
->order('id desc')
->paginate();
$list = ModelPost::with(['categorys.category', 'tags.tag'])
->where('type', $this->request->param('type', 1))
->order('id desc')
->paginate();
View::assign('list', $list);
View::assign('list', $list);
return View::fetch();
}
/**
* 显示创建资源表单页.
*
* @return \think\Response
*/
public function create()
{
//
return View::fetch();
}
/**
* 保存新建的资源
*
* @param \think\Request $request
* @return \think\Response
*/
public function save(Request $request)
{
//
$post_data = $request->post();
$post_data['uid'] = uniqid();
$categorys = [];
$tags = [];
if (isset($post_data['categorys'])) {
$categorys = $post_data['categorys'];
unset($post_data['categorys']);
}
if (isset($post_data['tags'])) {
$tags = $post_data['tags'];
unset($post_data['tags']);
return View::fetch();
}
$model_post = ModelPost::create($post_data);
/**
* 显示创建资源表单页.
*
* @return \think\Response
*/
public function create()
{
//
foreach ($categorys as $category) {
PostCategory::create([
'post_id' => $model_post->id,
'category_id' => $category
]);
}
foreach ($tags as $tag) {
PostTag::create([
'post_id' => $model_post->id,
'tag_id' => $tag
]);
return View::fetch();
}
return $this->success('添加成功',url('index',['type'=>$this->request->param('type')]));
}
/**
* 保存新建的资源
*
* @param \think\Request $request
* @return \think\Response
*/
public function save(Request $request)
{
//
$post_data = $request->post();
/**
* 显示指定的资源
*
* @param int $id
* @return \think\Response
*/
public function read($id)
{
//
}
$post_data['uid'] = uniqid();
/**
* 显示编辑资源表单页.
*
* @param int $id
* @return \think\Response
*/
public function edit($id)
{
//
$categorys = [];
$tags = [];
if (isset($post_data['categorys'])) {
$categorys = $post_data['categorys'];
unset($post_data['categorys']);
}
if (isset($post_data['tags'])) {
$tags = $post_data['tags'];
unset($post_data['tags']);
}
$model_post = ModelPost::find($id);
$model_post = ModelPost::create($post_data);
foreach ($categorys as $category) {
PostCategory::create([
'post_id' => $model_post->id,
'category_id' => $category
]);
}
foreach ($tags as $tag) {
PostTag::create([
'post_id' => $model_post->id,
'tag_id' => $tag
]);
}
View::assign('post', $model_post);
return View::fetch();
}
/**
* 保存更新的资源
*
* @param \think\Request $request
* @param int $id
* @return \think\Response
*/
public function update(Request $request, $id)
{
//
$post_data = $request->post();
$model_post = ModelPost::find($id);
$categorys = [];
$tags = [];
if (isset($post_data['categorys'])) {
$categorys = $post_data['categorys'];
unset($post_data['categorys']);
}
if (isset($post_data['tags'])) {
$tags = $post_data['tags'];
unset($post_data['tags']);
return $this->success('添加成功', url('index', ['type' => $this->request->param('type')]));
}
$model_post->save($post_data);
$old_category_list = PostCategory::where('post_id', $id)->select();
$old_category_id_list = array_column((array)$old_category_list, 'id');
$old_tag_list = PostTag::where('post_id', $id)->select();
$old_tag_id_list = array_column((array)$old_tag_list, 'id');
// 旧的有新的没有
foreach ($old_category_list as $model_category) {
if (!in_array($model_category->id, $categorys)) {
$model_category->delete();
}
}
foreach ($old_tag_list as $model_tag) {
if (!in_array($model_tag->id, $tags)) {
$model_tag->delete();
}
/**
* 显示指定的资源
*
* @param int $id
* @return \think\Response
*/
public function read($id)
{
//
}
/**
* 显示编辑资源表单页.
*
* @param int $id
* @return \think\Response
*/
public function edit($id)
{
//
// 旧的没有新的有
foreach ($categorys as $category) {
if (!in_array($category, $old_category_id_list)) {
$model_post = ModelPost::find($id);
PostCategory::create([
'post_id' => $model_post->id,
'category_id' => $category
]);
}
View::assign('post', $model_post);
return View::fetch();
}
foreach ($tags as $tag) {
if (!in_array($tag, $old_tag_id_list)) {
public function editContent($id)
{
$model_post = ModelPost::find($id);
PostTag::create([
'post_id' => $model_post->id,
'tag_id' => $tag
]);
}
View::assign('post', $model_post);
return View::fetch();
}
return $this->success('保存成功', url('index',['type'=>$model_post->getData('type')]));
}
/**
* 保存更新的资源
*
* @param \think\Request $request
* @param int $id
* @return \think\Response
*/
public function update(Request $request, $id)
{
//
$post_data = $request->post();
/**
* 删除指定资源
*
* @param int $id
* @return \think\Response
*/
public function delete($id)
{
//
$model_post = ModelPost::find($id);
$model_post = ModelPost::find($id);
$categorys = [];
$tags = [];
if (isset($post_data['categorys'])) {
$categorys = $post_data['categorys'];
unset($post_data['categorys']);
}
if (isset($post_data['tags'])) {
$tags = $post_data['tags'];
unset($post_data['tags']);
}
$model_post->delete();
$model_post->save($post_data);
PostCategory::where('post_id',$id)->delete();
$old_category_list = PostCategory::where('post_id', $id)->select();
$old_category_id_list = array_column((array)$old_category_list, 'id');
$old_tag_list = PostTag::where('post_id', $id)->select();
$old_tag_id_list = array_column((array)$old_tag_list, 'id');
PostTag::where('post_id',$id)->delete();
// 旧的有新的没有
foreach ($old_category_list as $model_category) {
if (!in_array($model_category->id, $categorys)) {
$model_category->delete();
}
}
foreach ($old_tag_list as $model_tag) {
if (!in_array($model_tag->id, $tags)) {
$model_tag->delete();
}
}
return json_message();
}
// 旧的没有新的有
foreach ($categorys as $category) {
if (!in_array($category, $old_category_id_list)) {
PostCategory::create([
'post_id' => $model_post->id,
'category_id' => $category
]);
}
}
foreach ($tags as $tag) {
if (!in_array($tag, $old_tag_id_list)) {
PostTag::create([
'post_id' => $model_post->id,
'tag_id' => $tag
]);
}
}
return $this->success('保存成功', url('index', ['type' => $model_post->getData('type')]));
}
/**
* 删除指定资源
*
* @param int $id
* @return \think\Response
*/
public function delete($id)
{
//
$model_post = ModelPost::find($id);
$model_post->delete();
PostCategory::where('post_id', $id)->delete();
PostTag::where('post_id', $id)->delete();
return json_message();
}
}

View File

@@ -1,28 +1,27 @@
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {}
}
.layui-nav-tree .layui-nav-item a:hover{
.layui-nav-tree .layui-nav-item a:hover {
background-color: #6699CC;
}
.layui-bg-black{
.layui-bg-black {
background-color: #66CCFF !important;
}
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this > a:hover{
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover {
background-color: #6699CC;
}
.layui-layout-admin .layui-logo{
color: #fff;
.layui-layout-admin .layui-logo {
color : #fff;
line-height: 45px;
}
.layui-layout-admin .layui-header{
.layui-layout-admin .layui-header {
background-color: #39BDFF;
}
@@ -30,11 +29,11 @@
background-color: #66CCFF;
}
.layui-header{
.layui-header {
height: 45px;
}
.layui-nav .layui-nav-item{
.layui-nav .layui-nav-item {
line-height: 45px;
}
@@ -53,94 +52,103 @@
background-color: #CCFFFF;
}
.layui-tab-brief > .layui-tab-title .layui-this{
.layui-tab-brief>.layui-tab-title .layui-this {
color: #66CCFF;
}
.layui-tab-brief > .layui-tab-more li.layui-this::after, .layui-tab-brief > .layui-tab-title .layui-this::after{
.layui-tab-brief>.layui-tab-more li.layui-this::after,
.layui-tab-brief>.layui-tab-title .layui-this::after {
border-color: #66CCFF;
}
.layui-btn{
.layui-btn {
background-color: #66CCFF;
}
.layui-form-radio > i:hover, .layui-form-radioed > i{
.layui-form-radio>i:hover,
.layui-form-radioed>i {
color: #66CCFF;
}
.layui-elem-quote{
.layui-elem-quote {
border-color: #66CCFF;
}
.layui-laydate td.layui-this{
.layui-laydate td.layui-this {
background-color: #66CCFF !important;
}
.layui-form-checkbox[lay-skin="primary"]:hover i{
.layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #66CCFF;
}
.layui-form-checked[lay-skin="primary"] i{
border-color: #66CCFF !important;
.layui-form-checked[lay-skin="primary"] i {
border-color : #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-form-select dl dd.layui-this{
background-color: #66CCFF;
.layui-form-select dl dd.layui-this {
background-color: #66CCFF;
}
.layui-form-label{
width: unset;
padding: 3px 3px;
float: unset;
text-align: left;
font-weight: 600;
font-size: 15px;
.layui-form-label {
width : unset;
padding : 3px 3px;
float : unset;
text-align : left;
font-weight: 600;
font-size : 15px;
}
.layui-input-block{
margin-left: 0;
.layui-input-block {
margin-left: 0;
}
.layui-form-pane .layui-form-label{
float: left;
font-weight: normal;
font-size: 14px;
.layui-form-pane .layui-form-label {
float : left;
font-weight: normal;
font-size : 14px;
}
.layui-nav-tree .layui-nav-item a{
height: 35px;
.layui-nav-tree .layui-nav-item a {
height : 35px;
line-height: 35px;
}
.layui-nav-tree{
.layui-nav-tree {
width: 140px;
}
.layui-layout-admin .layui-side{
.layui-layout-admin .layui-side {
width: 140px;
top: 45px;
top : 45px;
}
.layui-layout-admin .layui-footer{
left: 140px;
height: 35px;
.layui-layout-admin .layui-footer {
left : 140px;
height : 35px;
line-height: 35px;
}
.layui-layout-admin .layui-body{
top: 45px;
.layui-layout-admin .layui-body {
top : 45px;
bottom: 35px;
}
.layui-side-scroll{
.layui-side-scroll {
width: 140px;
}
.layui-body{
.layui-body {
left: 140px;
}
.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{
.layui-nav .layui-nav-child dd.layui-this a,
.layui-nav-child dd.layui-this {
background-color: #19B3FF;
}
.layui-nav-tree .layui-nav-bar{
.layui-nav-tree .layui-nav-bar {
background-color: #66CCFF;
}

View File

@@ -7,8 +7,6 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容管理</title>
{include file="common/_require"}
<link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
<script src="/static/lib/quill/quill.min.js"></script>
<script>
var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
@@ -72,8 +70,21 @@
<textarea name="desc" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">状态</div>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="发布">
<input type="radio" name="status" value="0" title="不发布" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">发表时间</div>
<div class="layui-input-block">
<input type="text" name="publish_time" class="layui-input publish-time">
</div>
</div>
<div class="layui-form-item" style="display: none;">
<div class="layui-form-label">内容</div>
<div class="layui-input-block">
<div id="toolbar">
@@ -128,23 +139,11 @@
</div>
</fieldset>
</div>
<div class="layui-col-md3 layui-col-lg2">
<div class="layui-col-md3 layui-col-lg2" style="display: none;">
<fieldset class="layui-elem-field sm-form">
<legend>信息</legend>
<div class="layui-field-box">
<div class="layui-form-item">
<div class="layui-form-label">状态</div>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="发布">
<input type="radio" name="status" value="0" title="不发布" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">发表时间</div>
<div class="layui-input-block">
<input type="text" name="publish_time" class="layui-input publish-time">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">分类</div>
<div class="layui-input-block ">
@@ -273,57 +272,8 @@
index: 0,
lenght: 0
}
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar',
},
});
quill.on('selection-change', function (range, oldRange, source) {
if (range) {
if (range.length == 0) {
console.log('User cursor is on', range.index);
} else {
var text = quill.getText(range.index, range.length);
console.log('User has highlighted', text);
}
currentRange = range;
console.log(currentRange);
} else {
console.log('Cursor not in the editor');
}
});
quill.on('text-change', function (delta, oldDelta, source) {
currentRange.index = delta.ops[0].retain
if (source == 'api') {
console.log("An API call triggered this change.");
} else if (source == 'user') {
console.log("A user action triggered this change.");
}
});
upload.render({
elem: '.ql-image',
url: '{:url("File/save")}',
data: {
type: 4,
dir: 'article'
},
accept: 'images',
done: function (result) {
if (result.code == 0) {
layer.msg('上传成功');
quill.insertEmbed(++currentRange.index, 'image', result.data.src);
} else {
layer.msg(result.msg)
}
}
})
upload.render({
elem: '.upload-poster',
url: '{:url("File/save")}',
@@ -342,17 +292,12 @@
}
}
})
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', function () {
return false;
});
form.on('submit(save)', function (data) {
var formData = data.field;
formData.content = quill.getContents().ops
formData.content_html = $('#editor .ql-editor').html()
console.log(formData);
window.loading = layer.load()

View File

@@ -7,8 +7,6 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容管理</title>
{include file="common/_require"}
<link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
<script src="/static/lib/quill/quill.min.js"></script>
<script>
var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
@@ -42,7 +40,7 @@
<div class="layui-row">
<form action="{:url('update')}" method="POST" class="layui-form" lay-filter="*">
<input type="hidden" name="id" value="{$post.id}">
<div class="layui-col-md9 layui-col-lg10">
<div class="layui-col-md6 layui-col-lg8">
<fieldset class="layui-elem-field">
<legend>编辑</legend>
<div class="layui-field-box">
@@ -67,61 +65,30 @@
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">描述</div>
<div class="layui-input-block">
<textarea name="desc" class="layui-textarea">{$post->getData('desc')}</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">内容</div>
<div class="layui-form-label">
作者名称
<p class="layui-word-aux">不填使用系统设置的名称</p>
</div>
<div class="layui-input-block">
<div id="toolbar">
<!-- Add font size dropdown -->
<select class="ql-size" lay-ignore="lay-ignore">
<option value="small">小号</option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected>正常</option>
<option value="large">大号</option>
<option value="huge">特大号</option>
</select>
<!-- Add a bold button -->
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-link"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
<button class="ql-header" value="1" title="大标题"></button>
<button class="ql-header" value="2" title="小标题"></button>
<button class="ql-list" value="ordered" title="有序列表"></button>
<button class="ql-list" value="bullet" title="无序列表"></button>
<!-- Add subscript and superscript buttons -->
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
<button class="ql-direction" value="rtl"></button>
<select class="ql-color" lay-ignore="lay-ignore"></select>
<select class="ql-background" lay-ignore="lay-ignore"></select>
<select class="ql-font" lay-ignore="lay-ignore"></select>
<button class="ql-align" value="center"></button>
<button class="ql-align" value=""></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button>
<button class="ql-image" title="选择图片"></button>
</div>
<div id="editor" style="height: 600px;">
</div>
<div id="content" style="display: none;">{:base64_encode(json_encode($post->content))}</div>
<input type="text" name="author_name" value="{$post->getData('author_name')}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">是否置顶</div>
<div class="layui-input-block">
<input type="radio" name="is_top" value="1" title="置顶">
<input type="radio" name="is_top" value="0" title="不置顶">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="save">保存</button>
@@ -134,6 +101,8 @@
<fieldset class="layui-elem-field sm-form">
<legend>信息</legend>
<div class="layui-field-box">
<div class="layui-form-item">
<div class="layui-form-label">状态</div>
<div class="layui-input-block">
@@ -147,6 +116,53 @@
<input type="text" name="publish_time" value="{$post->publish_time_datetime}" class="layui-input publish-time">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">跳转链接</div>
<div class="layui-input-block">
<input type="text" name="jump_to_url" value="{$post->getData('jump_to_url')}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">跳转按钮名称</div>
<div class="layui-input-block">
<input type="text" name="jump_to_btn_title" value="{$post->getData('jump_to_btn_title')}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">跳转链接状态</div>
<div class="layui-input-block">
<input type="radio" name="jump_to_url_status" value="0" title="不显示">
<input type="radio" name="jump_to_url_status" value="1" title="仅显示">
<input type="radio" name="jump_to_url_status" value="2" title="自动跳转">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">排序</div>
<div class="layui-input-block">
<input type="number" name="sort" value="{$post->getData('sort')}" class="layui-input">
<div class="layui-form-mid layui-word-aux">越大越靠前</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">模板</div>
<div class="layui-input-block">
<select name="tpl_name">
{volist name=':config("view_type.post")' id='tpl_name'}
<option value="{$key}">{$tpl_name}</option>
{/volist}
</select>
</div>
</div>
</div>
</fieldset>
</div>
<div class="layui-col-md3 layui-col-lg2">
<fieldset class="layui-elem-field sm-form">
<legend>分类和标签</legend>
<div class="layui-field-box">
<div class="layui-form-item">
<div class="layui-form-label">分类</div>
<div class="layui-input-block ">
@@ -183,60 +199,8 @@
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">是否置顶</div>
<div class="layui-input-block">
<input type="radio" name="is_top" value="1" title="置顶">
<input type="radio" name="is_top" value="0" title="不置顶">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">跳转链接</div>
<div class="layui-input-block">
<input type="text" name="jump_to_url" value="{$post->getData('jump_to_url')}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">跳转按钮名称</div>
<div class="layui-input-block">
<input type="text" name="jump_to_btn_title" value="{$post->getData('jump_to_btn_title')}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">跳转链接状态</div>
<div class="layui-input-block">
<input type="radio" name="jump_to_url_status" value="0" title="不显示">
<input type="radio" name="jump_to_url_status" value="1" title="仅显示">
<input type="radio" name="jump_to_url_status" value="2" title="自动跳转">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">
作者名称
<p class="layui-word-aux">不填使用系统设置的名称</p>
</div>
<div class="layui-input-block">
<input type="text" name="author_name" value="{$post->getData('author_name')}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">排序</div>
<div class="layui-input-block">
<input type="number" name="sort" value="{$post->getData('sort')}" class="layui-input">
<div class="layui-form-mid layui-word-aux">越大越靠前</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">模板</div>
<div class="layui-input-block">
<select name="tpl_name">
{volist name=':config("view_type.post")' id='tpl_name'}
<option value="{$key}">{$tpl_name}</option>
{/volist}
</select>
</div>
</div>
</div>
</fieldset>
</div>
@@ -283,79 +247,7 @@
index: 0,
lenght: 0
}
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar',
},
});
quill.setContents(JSON.parse(window.atob($('#content').text())))
quill.on('selection-change', function (range, oldRange, source) {
if (range) {
if (range.length == 0) {
console.log('User cursor is on', range.index);
} else {
var text = quill.getText(range.index, range.length);
console.log('User has highlighted', text);
}
currentRange = range;
console.log(currentRange);
} else {
console.log('Cursor not in the editor');
}
});
quill.on('text-change', function (delta, oldDelta, source) {
currentRange.index = delta.ops[0].retain
if (source == 'api') {
console.log("An API call triggered this change.");
} else if (source == 'user') {
console.log("A user action triggered this change.");
}
if (currentSecond - lastUpdateSecond > 30) {
var formData = {
'id': '{$post.id}'
};
formData.content = quill.getContents().ops
formData.content_html = $('#editor .ql-editor').html()
$.post('{:url("update")}', formData, function (result) {
lastUpdateSecond = currentSecond
layer.msg('自动保存成功', {
offset: 't'
})
})
}
});
upload.render({
elem: '.ql-image',
url: '{:url("File/save")}',
data: {
type: 4,
dir: 'article'
},
accept: 'images',
done: function (result) {
if (result.code == 0) {
layer.msg('上传成功');
quill.insertEmbed(++currentRange.index, 'image', result.data.src);
} else {
layer.msg(result.msg)
}
}
})
upload.render({
elem: '.upload-poster',
url: '{:url("File/save")}',
@@ -374,10 +266,7 @@
}
}
})
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', function () {
return false;
});
form.val('*', {
status: '{$post->getData("status")}',
@@ -390,8 +279,6 @@
var formData = data.field;
formData.content = quill.getContents().ops
formData.content_html = $('#editor .ql-editor').html()
window.loading = layer.load()
$.post('{:url("update")}', formData, function (result) {
layer.close(window.loading)

View File

@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容管理</title>
{include file="common/_require"}
<link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
<script>
var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
</script>
<style>
html,
body {
background-color: #fff;
height: 100%;
overflow: hidden;
color: #333;
}
#top-container {
border-bottom: 1px solid #e8e8e8;
padding-left: 30px;
}
#editor-toolbar {
background-color: #FCFCFC;
margin: 0 auto;
}
#content {
height: calc(100% - 440px);
background-color: rgb(245, 245, 245);
overflow-y: auto;
position: relative;
}
#editor-container {
width: 850px;
margin: 30px auto 30px auto;
background-color: #fff;
padding: 20px 50px 50px 50px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}
#title-container {
padding: 20px 0;
border-bottom: 1px solid #e8e8e8;
}
#title-container input {
font-size: 30px;
border: 0;
outline: none;
width: 100%;
line-height: 1;
}
#editor-text-area {
min-height: 500px;
margin-top: 20px;
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
{include file="common/_header"}
{include file="common/left_post"}
<div class="layui-body">
<div style="">
<div class="">
<div style="border: 1px solid #e8e8e8;">
<div id="editor-toolbar"></div>
</div>
<div id="content">
<div id="editor-container">
<div id="title-container">
<input id="title-input" value="{$post->title}">
</div>
<div id="editor-text-area"></div>
</div>
</div>
<div id="content-data" style="display: none;">{:urlencode($post->content_html)}</div>
</div>
</div>
</div>
{include file="common/_footer"}
</div>
<script>
var lastContent = '';
var contentSaveLock = true;
function autoSaveContent() {
if (contentSaveLock) {
setTimeout(() => {
autoSaveContent();
}, 5000);
} else {
contentSaveLock = true;
$.post('{:url("update")}', {
content_html: editor.getHtml(),
id: '{$post->id}'
}, function (result) {
setTimeout(() => {
autoSaveContent();
}, 5000);
})
}
}
const E = window.wangEditor;
const editorConfig = { MENU_CONF: {} }
editorConfig.placeholder = '请输入内容'
editorConfig.scroll = false // 禁止编辑器滚动
editorConfig.MENU_CONF['uploadImage'] = {
fieldName: 'file',
}
editorConfig.onChange = (editor) => {
console.log('content', editor)
contentSaveLock = false;
}
// 先创建 editor
const editor = E.createEditor({
selector: '#editor-text-area',
content: [],
html: decodeURIComponent($('#content-data').html()),
config: editorConfig
})
// 创建 toolbar
const toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {
excludeKeys: 'fullScreen',
},
})
setTimeout(() => {
$('#content').height(window.innerHeight - $('#editor-toolbar').outerHeight() - 30 - 45 - 7)
}, 300);
// 点击空白处 focus 编辑器
document.getElementById('editor-text-area').addEventListener('click', e => {
if (e.target.id === 'editor-text-area') {
editor.blur()
editor.focus(true) // focus 到末尾
}
})
$('#title-input').change(function () {
window.loading = layer.load()
$.post('{:url("update")}', {
title: $('#title-input').val(),
id: '{$post->id}'
}, function (result) {
layer.close(window.loading)
})
})
</script>
</body>
</html>

View File

@@ -2,115 +2,116 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容管理</title>
{include file="common/_require"}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容管理</title>
{include file="common/_require"}
<script>
var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
</script>
<script>
var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
</script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
{include file="common/_header"}
<div class="layui-layout layui-layout-admin">
{include file="common/_header"}
{include file="common/left_post"}
{include file="common/left_post"}
<div class="layui-body">
<div class="layui-body">
<div style="padding:15px">
<div class="main-header">
<span class="layui-breadcrumb">
<a>首页</a>
<a><cite>系统信息</cite></a>
</span>
<div style="padding:15px">
<div class="main-header">
<span class="layui-breadcrumb">
<a>首页</a>
<a><cite>系统信息</cite></a>
</span>
</div>
<div class="main-container">
<div>
<a href="{:url('create',['type'=>$Request.param.type])}" class="layui-btn">添加</a>
</div>
</div>
<div>
<table class="layui-table" lay-skin="line">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>封面</th>
<th>简介</th>
<th>排序</th>
<th>状态</th>
<th>分类</th>
<th>标签</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{volist name='list' id='vo'}
<tr class="item" data-id="{$vo.id}">
<td>{$vo.id}</td>
<td style="max-width: 160px;">{$vo.title}</td>
<td><img src="{$vo.poster}" alt=""></td>
<td style="max-width: 200px;">{$vo.desc_short}</td>
<td>{$vo.sort}</td>
<td>{$vo.status_name}</td>
<td>
{volist name='vo.categorys_list' id='category'}
<p>{:str_repeat('|--',$category.level)}{$category.title}</p>
{/volist}
</td>
<td>
{volist name='vo.tags_list' id='tag'}
<span class="layui-badge layui-bg-blue">{$tag.title}</span>
{/volist}
</td>
<td>
<div class="layui-btn-container">
<a class="layui-btn layui-btn-sm" target="_blank" href="{$vo.read_url}">查看</a>
<a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">设置</a>
<a class="layui-btn layui-btn-sm" href="{:url('editContent',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
<div class="layui-btn layui-btn-sm delete">删除</div>
</div>
</td>
</tr>
{/volist}
{if condition="count($list) == 0" }
<tr>
<td colspan="7">暂无数据</td>
</tr>
{/if}
</tbody>
</table>
<div>
{$list|raw}
</div>
</div>
</div>
</div>
<div class="main-container">
<div>
<a href="{:url('create',['type'=>$Request.param.type])}" class="layui-btn">添加</a>
</div>
</div>
<div>
<table class="layui-table" lay-skin="line">
<thead>
<tr>
<th>ID</th>
<th >名称</th>
<th>封面</th>
<th >简介</th>
<th>排序</th>
<th>状态</th>
<th>分类</th>
<th>标签</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{volist name='list' id='vo'}
<tr class="item" data-id="{$vo.id}">
<td>{$vo.id}</td>
<td style="max-width: 160px;">{$vo.title}</td>
<td><img src="{$vo.poster}" alt=""></td>
<td style="max-width: 200px;">{$vo.desc_short}</td>
<td>{$vo.sort}</td>
<td>{$vo.status_name}</td>
<td>
{volist name='vo.categorys_list' id='category'}
<p>{:str_repeat('|--',$category.level)}{$category.title}</p>
{/volist}
</td>
<td>
{volist name='vo.tags_list' id='tag'}
<span class="layui-badge layui-bg-blue">{$tag.title}</span>
{/volist}
</td>
<td>
<div class="layui-btn-container">
<a class="layui-btn layui-btn-sm" target="_blank" href="{$vo.read_url}">查看</a>
<a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
<div class="layui-btn layui-btn-sm delete">删除</div>
</div>
</td>
</tr>
{/volist}
{if condition="count($list) == 0" }
<tr>
<td colspan="7">暂无数据</td>
</tr>
{/if}
</tbody>
</table>
<div>
{$list|raw}
</div>
</div>
</div>
{include file="common/_footer"}
</div>
{include file="common/_footer"}
</div>
<script>
$('.delete').click(function () {
var item = this;
layer.confirm('确定要删除吗?', function () {
$.get('{:url("delete")}', {
id: $(item).parents('.item').data('id')
}, function (result) {
layer.msg('删除成功');
<script>
$('.delete').click(function () {
var item = this;
layer.confirm('确定要删除吗?', function () {
$.get('{:url("delete")}', {
id: $(item).parents('.item').data('id')
}, function (result) {
layer.msg('删除成功');
$(item).parents('.item').remove();
$(item).parents('.item').remove();
})
})
})
})
})
</script>
</script>
</body>
</html>