mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-03-03 16:24:28 +08:00
211 lines
5.6 KiB
HTML
211 lines
5.6 KiB
HTML
<!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-state" style="height: 30px;line-height: 30px;padding-left: 15px;border-top: 1px solid #e8e8e8;color: #666;">
|
|
内容变动自动提交
|
|
</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();
|
|
}, 2600);
|
|
} else {
|
|
contentSaveLock = true;
|
|
$.post('{:url("update")}', {
|
|
content_html: editor.getHtml(),
|
|
id: '{$post->id}'
|
|
}, function (result) {
|
|
$('#content-state').text('自动提交成功')
|
|
setTimeout(() => {
|
|
autoSaveContent();
|
|
}, 2600);
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
|
|
autoSaveContent();
|
|
|
|
const E = window.wangEditor;
|
|
|
|
const editorConfig = { MENU_CONF: {} }
|
|
editorConfig.placeholder = '请输入内容'
|
|
editorConfig.scroll = false // 禁止编辑器滚动
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
server: '{:url("File/wangEditorSave")}',
|
|
fieldName: 'file',
|
|
meta: {
|
|
type: 'editor'
|
|
}
|
|
}
|
|
editorConfig.onChange = (editor) => {
|
|
console.log('content', editor)
|
|
contentSaveLock = false;
|
|
|
|
$('#content-state').text('等待自动提交')
|
|
}
|
|
|
|
// 先创建 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 - 31)
|
|
}, 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> |