f49d937f19
- 添加视频上传功能，支持提取视频第一帧作为封面 - 优化图片和视频上传的数量限制检查 - 修复编辑器内容为空判断逻辑，增加视频元素检测 - 改进链接插入功能，自动填充选中文本 - 调整表情选择插入方式，使用execCommand实现 - 优化附件提取逻辑，支持视频元素解析 - 添加编辑器点击事件处理，更新选区状态 - 修复样式问题，调整按钮悬停效果
116 lines
5.5 KiB
HTML
116 lines
5.5 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">
|
||
<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 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>
|
||
|
||
<!-- 内容编辑区 -->
|
||
<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="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 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> |