103 lines
5.2 KiB
HTML
103 lines
5.2 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" />
|
||
<script src="./js/vue.global.js"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container" id="edit" v-cloak>
|
||
<div class="edit-head flexacenter">
|
||
<div class="edit-head-container flexacenter">
|
||
<img class="icon" src="./img/edit-logo-icon.png" />
|
||
<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>
|
||
|
||
<!-- 工具栏 -->
|
||
<div class="editor-toolbar flexacenter">
|
||
<div class="toolbar-item flexacenter" @click="paragraphTitle">
|
||
<img class="icon" src="./img/t-icon.png" alt="段落标题" />
|
||
<span>段落标题</span>
|
||
</div>
|
||
<div class="toolbar-item flexacenter" @click="insertImage">
|
||
<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 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">
|
||
<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>
|
||
|
||
<!-- 内容编辑区 -->
|
||
<div class="content-input" id="editor" contenteditable="true" :class="{ 'empty': isEmpty }" placeholder="输入正文" ref="editorRef" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content"></div>
|
||
|
||
<!-- 标签选择 -->
|
||
<div class="tags-list flexacenter">
|
||
<div class="tag-item" v-for="item in tagList" :key="item.tagId" @click="insertLabel(item.tagId)">#{{ item.title }}</div>
|
||
</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 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>
|