460450c339
1. 添加wangEditor富文本编辑器替换原有简易编辑器 2. 新增编辑器相关CSS样式和功能按钮 3. 优化详情页和编辑页的响应式布局 4. 调整评论区域样式结构 5. 添加移动端适配样式
140 lines
6.6 KiB
HTML
140 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>发布帖子 - 轻论坛</title>
|
||
<link rel="stylesheet" href="./css/public.css" />
|
||
<link rel="stylesheet" href="./css/edit.css" />
|
||
<link href="./css/editor.css" rel="stylesheet" />
|
||
|
||
<script src="./js/vue.global.js"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
#editor—wrapper {
|
||
/* border: 1px solid #ccc; */
|
||
z-index: 100;
|
||
/* 按需定义 */
|
||
}
|
||
|
||
#toolbar-container {
|
||
/* border-bottom: 1px solid #ccc; */
|
||
}
|
||
|
||
#editor-container {
|
||
min-height: 509px;
|
||
max-height: 80vh;
|
||
}
|
||
</style>
|
||
<script src="./js/editor.js"></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container" id="edit" v-cloak>
|
||
<div class="edit-head flexacenter">
|
||
<div class="edit-head-container flexacenter">
|
||
<a class="" href="/" target="_blank"><img class="icon" src="{@/img/edit-logo-icon.png}" /></a>
|
||
<div class="dot"></div>
|
||
<div class="title">发帖</div>
|
||
<div class="hint">发帖奖励 3 个寄托币/篇，每天最高奖励3篇</div>
|
||
<div class="flex1"></div>
|
||
<img v-if="userInfoWin.avatar" class="avatar" :src="userInfoWin.avatar" />
|
||
</div>
|
||
</div>
|
||
<div class="edit-container">
|
||
<!-- 标题输入 -->
|
||
<div class="title-box">
|
||
<input class="title-input" type="title" placeholder="输入标题（非必填）" v-model="info.title" :maxlength="titleLength" />
|
||
<div class="sum">{{ info?.title?.length ? titleLength - info?.title?.length : titleLength }}</div>
|
||
</div>
|
||
<div id="editor—wrapper">
|
||
|
||
<!-- 工具栏 -->
|
||
<div id="toolbar-container" class="editor-toolbar flexacenter">
|
||
<div class="toolbar-item flexacenter h2" :class="{'pitch': isPTitle}" @click="paragraphTitle">
|
||
<img class="icon" src="{@/img/t-icon.png}" alt="段落标题" />
|
||
<span>段落标题</span>
|
||
</div>
|
||
<div class="toolbar-item flexacenter">
|
||
<img class="icon" src="{@/img/img-icon.png}" alt="图片" />
|
||
<span>图片</span>
|
||
<input class="file" type="file" @change="insertImage" accept=".png, .jpg, .jpeg" />
|
||
</div>
|
||
<div class="toolbar-item flexacenter">
|
||
<img class="icon" src="{@/img/video-icon.png}" alt="视频" />
|
||
<span>视频</span>
|
||
<input class="file" type="file" @change="insertVideo" accept=".mp4, .avi, .mov" />
|
||
</div>
|
||
<div class="toolbar-item flexacenter expression" :class="{'pitch': emojiState}" @click="openEmoji">
|
||
<img class="icon" src="{@/img/smiling-face-round-black.png}" alt="表情" />
|
||
<span>表情</span>
|
||
<div class="emoji-box-mask" @click.stop="closeEmoji"></div>
|
||
<div class="emoji-box">
|
||
<div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="toolbar-item flexacenter link" :class="{'pitch': linkState}" @click="openLink">
|
||
<img class="icon" src="{@/img/link-icon.png}" alt="链接" />
|
||
<span>链接</span>
|
||
<div class="link-box-mask" @click.stop="closeLink"></div>
|
||
<div class="link-box flexflex" @click.stop="linkClick">
|
||
<div class="item flexflex">
|
||
<div class="name">请输入链接地址：</div>
|
||
<input class="input" type="text" v-model="linkUrl" />
|
||
</div>
|
||
<div class="item flexflex">
|
||
<div class="name">请输入链接文字：</div>
|
||
<input class="input" type="text" v-model="linkText" />
|
||
</div>
|
||
<div class="btn flexcenter" @click.stop="insertLink">OK</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar-item flexacenter expression" :class="{'pitch': emojiState}" @click="overstriking">
|
||
<img class="icon" src="{@/img/overstriking-icon.png}" alt="加粗" />
|
||
<span>加粗</span>
|
||
<div class="emoji-box-mask" @click.stop="closeEmoji"></div>
|
||
<div class="emoji-box">
|
||
<div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- <div id="toolbar-container"></div> -->
|
||
<div id="editor-container"><!-- 编辑器 --></div>
|
||
</div>
|
||
<!-- 内容编辑区 -->
|
||
<!-- <div class="content-input" id="editor" contenteditable="true" :class="{ 'empty': isEmpty }" placeholder="输入正文" ref="editorRef" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content" @click="handleClick"></div> -->
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-buttons flexacenter">
|
||
<div class="left-section flexacenter" @click="cutAnonymity">
|
||
<img v-if="info.anonymous == 1" class="icon-pitch" src="{@/img/tick-box.svg}" />
|
||
<div v-else class="icon"></div>
|
||
<div class="text">匿名发布</div>
|
||
</div>
|
||
<div class="right-section flexcenter">
|
||
<div v-if="!uniqid" class="draft-btn flexcenter" @click="submit(0)">
|
||
<img class="icon" src="{@/img/draft-icon.png}" />
|
||
存草稿
|
||
</div>
|
||
<div class="publish-btn flexcenter" @click="submit(1)">发表帖子</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="./js/axios.min.js"></script>
|
||
<script src="./js/public.js"></script>
|
||
<script type="module" src="./js/edit.js"></script>
|
||
</body>
|
||
|
||
</html> |