mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-03-03 16:24:28 +08:00
329 lines
9.7 KiB
HTML
329 lines
9.7 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%);
|
||
}
|
||
|
||
#editor-container li {
|
||
list-style: inherit;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
#settle-content-mark {
|
||
cursor: pointer;
|
||
}
|
||
</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 style="height: 30px;line-height: 30px;padding-left: 15px;border-top: 1px solid #e8e8e8;color: #666;">
|
||
<span id="content-state">内容变动自动提交</span>
|
||
<span id="settle-content-mark">
|
||
智能优化标点
|
||
</span>
|
||
</div>
|
||
<div id="content-data" style="display: none;">{:rawurlencode($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.hoverbarKeys = {
|
||
text: {
|
||
menuKeys: ['headerSelect', 'code', 'insertLink', 'bulletedList', '|', 'bold', 'through', 'color', 'bgColor', 'clearStyle']
|
||
}
|
||
}
|
||
editorConfig.onChange = (editor) => {
|
||
contentSaveLock = false;
|
||
|
||
$('#content-state').text('等待自动提交')
|
||
}
|
||
|
||
|
||
editorConfig.customPaste = function (editor, event) {
|
||
|
||
var pasteStr = event.clipboardData.getData('text/html');
|
||
//1，匹配出图片img标签（即匹配出所有图片），过滤其他不需要的字符
|
||
//2.从匹配出来的结果（img标签中）循环匹配出图片地址（即src属性）
|
||
|
||
//匹配图片（g表示匹配所有结果i表示区分大小写）
|
||
var imgReg = /<img.*?(?:>|\/>)/gi;
|
||
//匹配src属性
|
||
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
|
||
var arr = pasteStr.match(imgReg);
|
||
|
||
if (arr == null || arr.length == 0) {
|
||
return true;
|
||
}
|
||
layer.load();
|
||
for (var i = 0; i < arr.length; i++) {
|
||
var src = arr[i].match(srcReg);
|
||
//获取图片地址
|
||
if (src[1]) {
|
||
var imgSrc = src[1];
|
||
var prefix = imgSrc.substr(0, 4);
|
||
if (prefix == 'http') {
|
||
$.ajax({
|
||
async: false,
|
||
type: 'POST',
|
||
url: "{:url('File/urlSave')}",
|
||
data: {
|
||
url: imgSrc,
|
||
type: 'editor'
|
||
},
|
||
success: function (result) {
|
||
pasteStr = pasteStr.replace(imgSrc, result.data.src)
|
||
}
|
||
})
|
||
} else if (prefix == 'data') {
|
||
|
||
$.ajax({
|
||
async: false,
|
||
type: 'POST',
|
||
url: '{:url("File/base64Save")}',
|
||
data: {
|
||
data: imgSrc,
|
||
type: 'editor'
|
||
},
|
||
success: function (result) {
|
||
pasteStr = pasteStr.replace(imgSrc, result.data.src)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
layer.closeAll('loading')
|
||
|
||
|
||
editor.dangerouslyInsertHtml(pasteStr)
|
||
|
||
// 阻止默认的粘贴行为
|
||
event.preventDefault()
|
||
return 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 - 31)
|
||
}, 300);
|
||
|
||
|
||
$('#settle-content-mark').click(function () {
|
||
|
||
var contentDom = editor.getEditableContainer();
|
||
$(contentDom).find('.w-e-scroll>div').children().each(function (index, elem) {
|
||
var tagName = elem.tagName;
|
||
console.log(elem);
|
||
var settleTagList = [
|
||
'P',
|
||
'H1',
|
||
'H2',
|
||
'H3',
|
||
'H4',
|
||
'UL',
|
||
];
|
||
if (settleTagList.indexOf(tagName) < 0) {
|
||
|
||
return true;
|
||
}
|
||
|
||
var html = $(elem).html();
|
||
html = html.replaceAll(',', '，');
|
||
html = html.replaceAll('.', '。');
|
||
html = html.replaceAll('!', '！');
|
||
html = html.replaceAll(';', '；');
|
||
html = html.replaceAll(':', '：');
|
||
html = html.replaceAll('?', '？');
|
||
// html = html.replaceAll('<', '《');
|
||
// html = html.replaceAll('>', '》');
|
||
// html = html.replaceAll('/', '、');
|
||
console.log(elem);
|
||
$(elem).html(html)
|
||
|
||
})
|
||
|
||
return false;
|
||
|
||
|
||
})
|
||
|
||
|
||
// 点击空白处 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> |