Files
PC-Light-Forum/publish_admin.html
DESKTOP-RQ919RC\Pc acafc9792a feat: 更新CSS样式、添加TinyMCE插件及优化发布页面
修复移动端登录框样式问题
更新公共JS文件中的授权令牌
添加TinyMCE插件(代码、视觉块、预览等)
优化发布管理页面的编辑器和布局
调整登录组件的响应式样式
2025-12-25 17:21:52 +08:00

258 lines
6.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发布主题</title>
<link href="https://framework.x-php.com/gter/forum/css/normalize.min.css" rel="stylesheet">
<!-- <link href="https://framework.x-php.com/gter/forum/css/editorStyle.css" rel="stylesheet"> -->
<script src="https://framework.x-php.com/gter/forum/js/vue.global.js"></script>
<script src="https://framework.x-php.com/gter/forum/js/tinymce/tinymce.min.js"></script>
<link rel="stylesheet" href="katex/css/katex.min.css">
<script src="katex/js/katex.min.js"></script>
<!-- <link rel="stylesheet" href="/css/textbus.min.css"> -->
<!-- <script src="/js/textbus.min.js"></script> -->
<style>
html,
body {
background-color: #fff;
height: 100%;
overflow: hidden;
color: #333;
}
#edit {
height: calc(100% - 130px);
}
#edit * {
box-sizing: border-box;
}
#top-container {
border-bottom: 1px solid #e8e8e8;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
display: block;
}
#editor-toolbar {
width: 1350px;
background-color: #FCFCFC;
margin: 0 auto;
}
#content {
height: calc(100% - 40px);
background-color: rgb(245, 245, 245);
overflow-y: auto;
position: relative;
}
#editor-container {
/* width: 850px;
margin: 30px auto 150px auto;
background-color: #fff;
padding: 20px 50px 10px 50px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 10px rgb(0 0 0 / 12%); */
width: 100vh;
height: calc(100% - 40px);
margin: 20px auto 20px auto;
background-color: #fff;
padding: 10px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
display: flex;
flex-direction: column;
}
#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 { */
.tox.tox-tinymce {
/* height: 500px; */
/* max-height: 80vh; */
/* height: calc(100vh - 330px) !important; */
font-size: 18px;
line-height: 1.5;
color: rgb(51, 51, 51);
}
.bottom-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 1px solid #e8e8e8;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
z-index: 1000;
}
.btn {
padding: 8px 16px;
border: 1px solid #d9d9d9;
background: #fafafa;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn-primary {
background: #1890ff;
border-color: #1890ff;
color: #fff;
}
.save-status {
font-size: 12px;
color: #888;
}
.action-buttons {
border-top: 1px solid #ebebeb;
padding: 0 36px;
justify-content: space-between;
}
.action-buttons .left-section {
font-size: 14px;
color: #333;
cursor: pointer;
}
.action-buttons .left-section .icon-pitch {
width: 16px;
height: 16px;
margin-right: 5px;
}
.action-buttons .left-section .icon {
width: 16px;
height: 16px;
border: 1px solid #797979;
margin-right: 5px;
}
.action-buttons .right-section {
height: 80px;
}
.action-buttons .right-section .draft-btn,
.action-buttons .right-section .publish-btn {
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
.action-buttons .right-section .draft-btn {
width: 100px;
height: 42px;
line-height: 42px;
background-color: rgba(242, 242, 242, 0.69803922);
color: #7f7f7f;
font-size: 14px;
margin-right: 15px;
transition: background-color 0.3s ease;
}
.action-buttons .right-section .draft-btn .icon {
width: 20px;
height: 20px;
margin-right: 6px;
}
.action-buttons .right-section .draft-btn:hover {
background-color: #ebebeb;
}
.action-buttons .right-section .publish-btn {
width: 150px;
height: 40px;
line-height: 40px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
background-color: #50e3c2;
transition: background-color 0.3s ease;
}
.action-buttons .right-section .publish-btn:hover {
background-color: #40d1aa;
}
.tox-tinymce {
border: none !important;
}
</style>
</head>
<body>
<script src="https://app.gter.net/bottom?tpl=header&menukey=bbs"></script>
<div class="container" id="edit" v-cloak>
<a href="./" id="top-container">&lt;&lt; 返回</a>
<div style="border-bottom: 1px solid #e8e8e8;">
<div id="editor-toolbar"></div>
</div>
<div id="content">
<div id="editor-container">
<div id="title-container">
<input id="title-input" placeholder="Page title..." v-model="title" @input="handleTitleInput">
</div>
<div id="editor-text-area"></div>
</div>
</div>
<!-- <div class="bottom-bar">
<button id="save-btn" class="btn btn-primary" @click="saveDraft">保存</button>
<span id="save-status" class="save-status">{{ saveStatus }}</span>
</div> -->
<div class="bottom-bar action-buttons flexacenter">
<div class="left-section flexacenter" @click="cutAnonymity">
<img v-if="info.anonymous == 1" class="icon-pitch" src="https://framework.x-php.com/gter/forum/img/tick-box.svg" />
<div v-else class="icon"></div>
<div class="text">匿名发布</div>
</div>
<div class="right-section flexcenter">
<div class="draft-btn flexcenter" @click="submit(0)"><img class="icon" src="https://framework.x-php.com/gter/forum/img/draft-icon.png?v=iem44eqj4HfC"> 存草稿 </div>
<div id="save-btn" class="publish-btn flexcenter" @click="submit(1)">保存</div>
</div>
</div>
</div>
<script src="https://framework.x-php.com/gter/forum/js/axios.min.js"></script>
<script src="/js/public.js"></script>
<script type="module" src="/js/publish_admin.js"></script>
<!-- <script src="https://framework.x-php.com/gter/forum/js/public.js"></script>
<script type="module" src="https://framework.x-php.com/gter/forum/js/publish_admin.js"></script> -->
</body>
</html>