feat(editor): 添加预加载动画和编辑器功能优化

- 新增预加载动画组件及样式
- 优化编辑器图片和视频上传处理逻辑
- 修复编辑器内容转换和格式处理问题
- 添加上传进度显示功能
- 改进编辑器工具栏图标和布局
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-28 18:06:40 +08:00
parent 2a227a806d
commit 0960a310aa
8 changed files with 366 additions and 192 deletions

View File

@@ -21,21 +21,25 @@
<body>
<div class="container" id="edit" v-cloak>
<div class="valueA" ref="valueA" style="display: none;">{@}</div>
<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>
<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 class="progress-box" v-if="progress != 0 || progress != 100" :style="{ width: progress + '%' }"></div> -->
</div>
<div class="edit-container">
<!-- 标题输入 -->
<div class="title-box">
<input class="title-input" type="title" placeholder="输入标题(非必填)" v-model="info.title"
:maxlength="titleLength" />
<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>
@@ -89,13 +93,14 @@
<div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
</div>
</div> -->
</div>
<div id="editor-container" ref="editorRef"><!-- 编辑器 --></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">