no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
255
css/index.css
Normal file
255
css/index.css
Normal file
@@ -0,0 +1,255 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
view,
|
||||
swiper,
|
||||
swiper-item,
|
||||
scroll-view,
|
||||
textarea,
|
||||
editor {
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 3.2rem;
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
.container .title-box {
|
||||
width: 9.4rem;
|
||||
margin: 0 auto 0.4rem;
|
||||
background-color: #ffffff;
|
||||
border: 0.0133rem solid #f2f2f2;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
.container .title-box .input {
|
||||
width: 100%;
|
||||
min-height: 1rem;
|
||||
word-break: break-all;
|
||||
line-height: 0.56rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.container .editor-box {
|
||||
width: 9.4rem;
|
||||
margin: 0 auto 0.4rem;
|
||||
background-color: #ffffff;
|
||||
border: 0.0133rem solid #f2f2f2;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.container .editor-box .editor {
|
||||
margin: 0.4rem;
|
||||
width: 8.6rem;
|
||||
min-height: 10rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
}
|
||||
.container .editor-box .editor img {
|
||||
width: 8.6rem;
|
||||
display: block;
|
||||
}
|
||||
.container .editor-box .label {
|
||||
white-space: nowrap;
|
||||
width: 100vw;
|
||||
height: 0.64rem;
|
||||
margin-bottom: 0.4rem;
|
||||
width: 9.4rem;
|
||||
overflow: auto;
|
||||
}
|
||||
.container .editor-box .label .item {
|
||||
width: fit-content;
|
||||
height: 0.64rem;
|
||||
line-height: 0.64rem;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 1.46rem;
|
||||
font-size: 0.28rem;
|
||||
color: #606060;
|
||||
padding: 0 0.24rem;
|
||||
display: inline-flex;
|
||||
}
|
||||
.container .editor-box .label .item:not(:last-of-type) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.container .editor-box .label .item:first-of-type {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.container .editor-box .label .item:last-of-type {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.container .editor-box .btn-list {
|
||||
margin: 0 0.4rem 0.4rem;
|
||||
}
|
||||
.container .editor-box .btn-list .item {
|
||||
width: fit-content;
|
||||
height: 0.72rem;
|
||||
line-height: 0.72rem;
|
||||
background-color: #f6f6f6;
|
||||
border: 0.0133rem solid #ebebeb;
|
||||
border-radius: 1.46rem;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 0.32rem;
|
||||
color: #555555;
|
||||
padding: 0 0.24rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.container .editor-box .btn-list .item.pitch {
|
||||
background-color: #f6f6bd;
|
||||
}
|
||||
.container .editor-box .btn-list .item .icon {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
margin-right: 0.14rem;
|
||||
}
|
||||
.container .editor-box .btn-list .unfold {
|
||||
width: 0.72rem;
|
||||
height: 0.72rem;
|
||||
background-color: #f6f6f6;
|
||||
border: 0.0133rem solid #ebebeb;
|
||||
border-radius: 1.4667rem;
|
||||
}
|
||||
.container .editor-box .btn-list .unfold .icon {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
.container .anonymity {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.container .anonymity .icon {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
border: 0.0133rem solid #797979;
|
||||
}
|
||||
.container .anonymity .icon-pitch {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
.container .anonymity .text {
|
||||
color: #000000;
|
||||
margin-left: 0.16rem;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
.container .new-footer-btn {
|
||||
width: 10rem;
|
||||
height: 2.4rem;
|
||||
background-color: #ffffff;
|
||||
border: 0.0133rem solid #ebebeb;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
padding: 0.34rem 0.3rem 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
.container .new-footer-btn .save-draft-btn {
|
||||
flex-direction: column;
|
||||
margin-right: 0.4rem;
|
||||
color: #7f7f7f;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
.container .new-footer-btn .save-draft-btn .save-draft-icon-box {
|
||||
width: 0.84rem;
|
||||
height: 0.84rem;
|
||||
background-color: rgba(242, 242, 242, 0.69803922);
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.12rem;
|
||||
}
|
||||
.container .new-footer-btn .save-draft-btn .save-draft-icon-box .save-draft-icon {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
.container .new-footer-btn .new-footer-submit {
|
||||
height: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
text-align: center;
|
||||
background-color: #cff7ff;
|
||||
border: 0.0133rem solid #badee6;
|
||||
border-radius: 0.2rem;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-size: 0.5067rem;
|
||||
color: #026277;
|
||||
}
|
||||
.container .pop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 101;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.container .pop .emoji-system-list {
|
||||
width: 100vw;
|
||||
background-color: #ececec;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 0.4rem 0.4rem 0;
|
||||
font-size: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
animation: growHeight 0.5s ease forwards;
|
||||
}
|
||||
@keyframes growHeight {
|
||||
0% {
|
||||
height: 0;
|
||||
}
|
||||
100% {
|
||||
height: 8.6667rem;
|
||||
}
|
||||
}
|
||||
.container .pop .emoji-system-list .item {
|
||||
margin-bottom: 0.1333rem;
|
||||
display: inline-block;
|
||||
min-width: 1.15rem;
|
||||
min-height: 0.9333rem;
|
||||
text-align: center;
|
||||
}
|
||||
.container .pop .emoji-system-list .item:nth-child(8n-1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.container .pop .emoji-system-list .fill {
|
||||
width: 100%;
|
||||
height: 2.2667rem;
|
||||
}
|
||||
297
css/index.less
Normal file
297
css/index.less
Normal file
@@ -0,0 +1,297 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
view,
|
||||
swiper,
|
||||
swiper-item,
|
||||
scroll-view,
|
||||
textarea,
|
||||
editor {
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: rgba(245, 245, 245, 1);
|
||||
padding-bottom: 3.2rem;
|
||||
padding-top: 0.4rem;
|
||||
|
||||
.title-box {
|
||||
width: 9.4rem;
|
||||
margin: 0 auto 0.4rem;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 0.0133rem solid rgba(242, 242, 242, 1);
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.4rem;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
min-height: 1rem;
|
||||
word-break: break-all;
|
||||
line-height: 0.56rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-box {
|
||||
width: 9.4rem;
|
||||
margin: 0 auto 0.4rem;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 0.0133rem solid rgba(242, 242, 242, 1);
|
||||
border-radius: 0.4rem;
|
||||
|
||||
.editor {
|
||||
margin: 0.4rem;
|
||||
width: 8.6rem;
|
||||
min-height: 10rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
|
||||
img {
|
||||
width: 8.6rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
white-space: nowrap;
|
||||
width: 100vw;
|
||||
height: 0.64rem;
|
||||
margin-bottom: 0.4rem;
|
||||
width: 9.4rem;
|
||||
overflow: auto;
|
||||
|
||||
.item {
|
||||
width: fit-content;
|
||||
height: 0.64rem;
|
||||
line-height: 0.64rem;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 1.46rem;
|
||||
font-size: 0.28rem;
|
||||
color: #606060;
|
||||
padding: 0 0.24rem;
|
||||
display: inline-flex;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
margin: 0 0.4rem 0.4rem;
|
||||
|
||||
.item {
|
||||
width: fit-content;
|
||||
height: 0.72rem;
|
||||
line-height: 0.72rem;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 0.0133rem solid rgba(235, 235, 235, 1);
|
||||
border-radius: 1.46rem;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 0.32rem;
|
||||
color: #555555;
|
||||
padding: 0 0.24rem;
|
||||
margin-right: 0.2rem;
|
||||
|
||||
&.pitch {
|
||||
background-color: rgba(246, 246, 189, 1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
margin-right: 0.14rem;
|
||||
}
|
||||
}
|
||||
|
||||
.unfold {
|
||||
width: 0.72rem;
|
||||
height: 0.72rem;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 0.0133rem solid rgba(235, 235, 235, 1);
|
||||
border-radius: 1.4667rem;
|
||||
|
||||
.icon {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anonymity {
|
||||
margin-left: 0.4rem;
|
||||
|
||||
.icon {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
border: 0.0133rem solid #797979;
|
||||
}
|
||||
|
||||
.icon-pitch {
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: rgb(0, 0, 0);
|
||||
margin-left: 0.16rem;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
}
|
||||
|
||||
.new-footer-btn {
|
||||
width: 10rem;
|
||||
height: 2.4rem;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 0.0133rem solid rgba(235, 235, 235, 1);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
padding: 0.34rem 0.3rem 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.save-draft-btn {
|
||||
flex-direction: column;
|
||||
margin-right: 0.4rem;
|
||||
color: #7f7f7f;
|
||||
font-size: 0.32rem;
|
||||
|
||||
.save-draft-icon-box {
|
||||
width: 0.84rem;
|
||||
height: 0.84rem;
|
||||
background-color: rgba(242, 242, 242, 0.698039215686274);
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.12rem;
|
||||
|
||||
.save-draft-icon {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-footer-submit {
|
||||
height: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
text-align: center;
|
||||
background-color: rgba(207, 247, 255, 1);
|
||||
border: 0.0133rem solid rgba(186, 222, 230, 1);
|
||||
border-radius: 0.2rem;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-size: 0.5067rem;
|
||||
color: #026277;
|
||||
}
|
||||
}
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 101;
|
||||
align-items: flex-end;
|
||||
|
||||
.emoji-system-list {
|
||||
width: 100vw;
|
||||
background-color: rgba(236, 236, 236, 1);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 0.4rem 0.4rem 0;
|
||||
font-size: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
height: 0;
|
||||
animation: growHeight 0.5s ease forwards;
|
||||
|
||||
@keyframes growHeight {
|
||||
0% {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 8.6667rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 0.1333rem;
|
||||
display: inline-block;
|
||||
min-width: 1.15rem;
|
||||
min-height: 0.9333rem;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(8n-1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fill {
|
||||
width: 100%;
|
||||
height: 2.2667rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
70
index.html
Normal file
70
index.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>发布帖子</title>
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="appIndex">
|
||||
<div class="title-box">
|
||||
<textarea class="input" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea>
|
||||
</div>
|
||||
<div class="editor-box">
|
||||
<div class="editor" ref="editorRef" id="editor" placeholder="输入正文" contenteditable="true" @input="onEditorInput"></div>
|
||||
|
||||
<div class="label flexflex" scroll-x>
|
||||
<div class="item" v-for="index in 8" :key="index" @click="insertLabel">#推荐标签</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-list flexacenter">
|
||||
<div class="item flexacenter" :class="{ 'pitch': isPTitle }" @click="paragraphTitle">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/T-icon.png" />
|
||||
<div class="text">段落标题</div>
|
||||
</div>
|
||||
<div class="item flexacenter" @click="insertImage">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/img-icon.png" />
|
||||
<div class="text">图片</div>
|
||||
</div>
|
||||
<div class="item flexacenter" bind:tap="openEmoji">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/smiling-face-round-black.png" />
|
||||
<div class="text">表情</div>
|
||||
</div>
|
||||
<div class="flex1"></div>
|
||||
<div class="unfold flexcenter">
|
||||
<!-- https://app.gter.net/image/miniApp/offer/fold-icon.png -->
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/unfold-icon.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="anonymity flexacenter" bind:tap="cutAnonymity">
|
||||
<img v-if="info.anonymity == 1" class="icon-pitch" src="https://app.gter.net/image/miniApp/offer/tick-box.svg" />
|
||||
<div v-else class="icon"></div>
|
||||
<div class="text">匿名发布</div>
|
||||
</div>
|
||||
|
||||
<!-- <cover-view class="new-footer-btn">
|
||||
<cover-view view class="flexacenter save-draft-btn" bindtap="handleLastPublish" data-state="0">
|
||||
<cover-view class="flexcenter save-draft-icon-box">
|
||||
<cover-image class="save-draft-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/draft-icon.png"></cover-image>
|
||||
</cover-view>
|
||||
<cover-view>存草稿</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="new-footer-submit flex1 flexcenter" bindtap="authenticationSubmit">发布</cover-view>
|
||||
</cover-view> -->
|
||||
|
||||
<!-- <view class="pop flexflex" wx:if="{{ emojiState }}" bind:tap="closeEmoji">
|
||||
<scroll-view class="emoji-system-list" scroll-y="{{ true }}" show-scrollbar="{{ false }}" enhanced="{{ true }}" style="font-size: {{ isIos ? '60rpx' : '50rpx' }};">
|
||||
<view class="item" wx:for="{{ optionEmoji }}" wx:key="index" catch:tap="selectEmoji" data-item="{{ item }}">{{ item }}</view>
|
||||
<view class="fill"></view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
</div>
|
||||
|
||||
<script src="./js/fontSize.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
js/axios.min.js
vendored
Normal file
2
js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
40
js/fontSize.js
Normal file
40
js/fontSize.js
Normal file
@@ -0,0 +1,40 @@
|
||||
(function (window, document) {
|
||||
var sizeUI = 750; // 定义设计图尺寸
|
||||
var remBase = 75; // 定义基准值
|
||||
var docEl = document.documentElement;
|
||||
var bodyEl = document.querySelector("body");
|
||||
|
||||
setRemUnit();
|
||||
|
||||
window.addEventListener("resize", setRemUnit);
|
||||
window.addEventListener("pageshow", function (e) {
|
||||
if (e.persisted) setRemUnit();
|
||||
});
|
||||
|
||||
function setRemUnit() {
|
||||
var docFontSize = (docEl.clientWidth / sizeUI) * remBase;
|
||||
console.log("bodyEl", bodyEl);
|
||||
docEl.style.fontSize = docFontSize + "px";
|
||||
bodyEl.style.fontSize = 16 / docFontSize + "rem";
|
||||
handleRemAdapt();
|
||||
}
|
||||
|
||||
function handleRemAdapt() {
|
||||
var currentFontSize = parseInt(docEl.style.fontSize);
|
||||
var temp = currentFontSize;
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize);
|
||||
var differ = realFontSize - currentFontSize;
|
||||
if (Math.abs(differ) >= 1) {
|
||||
if (differ > 0) {
|
||||
temp--;
|
||||
} else {
|
||||
temp++;
|
||||
}
|
||||
docEl.style.fontSize = temp + "px";
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
})(window, document);
|
||||
131
js/index.js
Normal file
131
js/index.js
Normal file
@@ -0,0 +1,131 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||
createApp({
|
||||
setup() {
|
||||
let titleLength = ref(200);
|
||||
|
||||
let title = ref("发");
|
||||
|
||||
let info = ref({
|
||||
anonymity: 0,
|
||||
});
|
||||
|
||||
const titleTextarea = ref(null);
|
||||
|
||||
const adjustTextareaHeight = () => {
|
||||
nextTick(() => {
|
||||
const textarea = titleTextarea.value;
|
||||
if (textarea) {
|
||||
textarea.style.height = "auto";
|
||||
textarea.style.height = textarea.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(title, () => {
|
||||
adjustTextareaHeight();
|
||||
});
|
||||
|
||||
const editorRef = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener("selectionchange", getFocusedNodeName);
|
||||
});
|
||||
|
||||
// 获取当前焦点所在的节点名称（仅在.editor内）
|
||||
const getFocusedNodeName = () => {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return null;
|
||||
|
||||
lastSelection = selection.getRangeAt(0);
|
||||
|
||||
// 获取焦点所在的节点
|
||||
let focusedNode = selection.focusNode;
|
||||
|
||||
// 如果是文本节点，取其父元素
|
||||
if (focusedNode.nodeType === Node.TEXT_NODE) {
|
||||
focusedNode = focusedNode.parentNode;
|
||||
}
|
||||
|
||||
// 检查节点是否在.editor容器内
|
||||
const isInEditor = editorRef.value.contains(focusedNode);
|
||||
if (!isInEditor) return null;
|
||||
|
||||
if (focusedNode.tagName?.toLowerCase() == "h2") isPTitle.value = true;
|
||||
else isPTitle.value = false;
|
||||
};
|
||||
|
||||
const isPTitle = ref(false);
|
||||
|
||||
let lastSelection = null;
|
||||
|
||||
const onEditorInput = () => {
|
||||
const selection = window.getSelection();
|
||||
|
||||
if (selection.rangeCount > 0) {
|
||||
lastSelection = selection.getRangeAt(0);
|
||||
updatePTitleStatus();
|
||||
}
|
||||
};
|
||||
|
||||
const paragraphTitle = () => {
|
||||
editorRef.value.focus();
|
||||
if (!lastSelection) return;
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(lastSelection);
|
||||
const focusNode = lastSelection.startContainer;
|
||||
document.execCommand("formatBlock", false, focusNode?.parentNode?.tagName == "H2" ? "P" : "H2");
|
||||
};
|
||||
|
||||
const updatePTitleStatus = () => {
|
||||
if (lastSelection) {
|
||||
const node = lastSelection.commonAncestorContainer;
|
||||
isPTitle.value = node.nodeName === "H2" || (node.nodeType === Node.TEXT_NODE && node.parentNode?.nodeName === "H2");
|
||||
}
|
||||
};
|
||||
|
||||
const insertImage = () => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "image/*";
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// 创建图片元素
|
||||
const img = document.createElement("img");
|
||||
img.src = e.target.result;
|
||||
img.alt = "用户上传图片";
|
||||
|
||||
// 确保编辑器获得焦点
|
||||
editorRef.value.focus();
|
||||
|
||||
// 获取选择对象
|
||||
const selection = window.getSelection();
|
||||
|
||||
// 如果有选择范围，在选择范围插入图片
|
||||
console.log("rangeCount", selection.rangeCount);
|
||||
|
||||
if (selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
range.deleteContents(); // 清除当前选择内容
|
||||
range.insertNode(img); // 插入图片
|
||||
|
||||
// 将光标移动到图片后面
|
||||
range.setStartAfter(img);
|
||||
range.setEndAfter(img);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
} else {
|
||||
// 如果没有选择范围，直接追加到编辑器末尾
|
||||
editorRef.value.appendChild(img);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
return { editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput };
|
||||
},
|
||||
}).mount("#appIndex");
|
||||
18039
js/vue.global.js
Normal file
18039
js/vue.global.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user