feat(editor): 集成富文本编辑器并优化响应式布局
1. 添加wangEditor富文本编辑器替换原有简易编辑器 2. 新增编辑器相关CSS样式和功能按钮 3. 优化详情页和编辑页的响应式布局 4. 调整评论区域样式结构 5. 添加移动端适配样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
130
edit.html
130
edit.html
@@ -7,21 +7,40 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -32,63 +51,68 @@
|
||||
<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>
|
||||
<div id="editor—wrapper">
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<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 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="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="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">
|
||||
|
||||
Reference in New Issue
Block a user