ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-03-03 16:24:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

基本完成新的编辑器;

Browse Source
This commit is contained in:
augushong
2022-03-04 12:11:06 +08:00
parent 578969d97d
commit 1a7718be0c
6 changed files with 615 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
view/admin/post/create.html
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()

249
view/admin/post/edit.html
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)

200
view/admin/post/edit_content.html Normal file
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>

191
view/admin/post/index.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>