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

9
app/admin/controller/Post.php
View File

@@ -117,6 +117,15 @@ class Post extends Common
return View::fetch();
}
public function editContent($id)
{
$model_post = ModelPost::find($id);
View::assign('post', $model_post);
return View::fetch();
}
/**
* 保存更新的资源
*

18
public/static/css/skin-1.css
View File

@@ -1,6 +1,5 @@
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {}
}
.layui-nav-tree .layui-nav-item a:hover {
background-color: #6699CC;
}
@@ -57,14 +56,17 @@
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 {
background-color: #66CCFF;
}
.layui-form-radio > i:hover, .layui-form-radioed > i{
.layui-form-radio>i:hover,
.layui-form-radioed>i {
color: #66CCFF;
}
@@ -79,6 +81,7 @@
.layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #66CCFF;
}
.layui-form-checked[lay-skin="primary"] i {
border-color : #66CCFF !important;
background-color: #66CCFF !important;
@@ -116,17 +119,21 @@
.layui-nav-tree {
width: 140px;
}
.layui-layout-admin .layui-side {
width: 140px;
top : 45px;
}
.layui-layout-admin .layui-footer {
left : 140px;
height : 35px;
line-height: 35px;
}
.layui-layout-admin .layui-body {
top : 45px;
bottom: 35px;
}
.layui-side-scroll {
@@ -137,7 +144,8 @@
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;
}

89
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()

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

3
view/admin/post/index.html
View File

@@ -74,7 +74,8 @@
<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('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>