A1300399510/min-offer-forum-issue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(编辑器): 实现富文本编辑功能并优化交互体验

Browse Source 
添加富文本编辑功能，包括插入图片、表情和标签
优化键盘事件处理，支持特殊文本块操作
增加编辑器空状态提示和样式优化
修复光标定位和滚动行为问题
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-10 18:57:05 +08:00
parent 452d486573
commit ad975d5c25
5 changed files with 519 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
css/index.css
View File

@@ -49,6 +49,7 @@ editor {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 3.2rem;
padding-bottom: 8.6667rem;
padding-top: 0.4rem;
}
.container .title-box {
@@ -66,6 +67,11 @@ editor {
line-height: 0.56rem;
outline: none;
border: none;
resize: none;
font-size: 0.36rem;
}
.container .title-box .input::placeholder {
color: #757575;
}
.container .editor-box {
width: 9.4rem;
@@ -81,18 +87,47 @@ editor {
border: none;
outline: none;
overflow: auto;
font-size: 0.36rem;
color: #555555;
line-height: 0.56rem;
white-space: break-spaces;
position: relative;
}
.container .editor-box .editor.empty:before {
content: "输入正文";
pointer-events: none;
position: absolute;
top: 0;
left: 0;
color: #757575;
}
.container .editor-box .editor h2 {
font-size: 0.48rem;
color: #000000;
line-height: normal;
}
.container .editor-box .editor img {
width: 8.6rem;
width: 90%;
display: block;
margin: auto;
}
.container .editor-box .editor .blue {
color: #026277;
margin: 0 0.1rem;
}
.container .editor-box .editor .cursor {
background-color: red;
width: 1px;
height: 1px;
display: inline-block;
}
.container .editor-box .label {
white-space: nowrap;
width: 100vw;
height: 0.64rem;
margin-bottom: 0.4rem;
/* height: 0.84rem; */
margin-bottom: 0.2rem;
width: 9.4rem;
overflow: auto;
padding-bottom: 0.2rem;
}
.container .editor-box .label .item {
width: fit-content;
@@ -129,6 +164,7 @@ editor {
color: #555555;
padding: 0 0.24rem;
margin-right: 0.2rem;
position: relative;
}
.container .editor-box .btn-list .item.pitch {
background-color: #f6f6bd;
@@ -138,6 +174,26 @@ editor {
height: 0.4rem;
margin-right: 0.14rem;
}
.container .editor-box .btn-list .item .file {
opacity: 0;
/* 隐藏输入框 */
background: transparent;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.container .editor-box .btn-list .item .file::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.container .editor-box .btn-list .unfold {
width: 0.72rem;
height: 0.72rem;

77
css/index.less
View File

@@ -58,6 +58,8 @@ editor {
min-height: 100vh;
background-color: rgba(245, 245, 245, 1);
padding-bottom: 3.2rem;
padding-bottom: 8.6667rem;
padding-top: 0.4rem;
.title-box {
@@ -75,6 +77,11 @@ editor {
line-height: 0.56rem;
outline: none;
border: none;
resize: none;
font-size: 0.36rem;
&::placeholder {
color: rgba(117, 117, 117, 1);
}
}
}
@@ -92,20 +99,60 @@ editor {
border: none;
outline: none;
overflow: auto;
font-size: 0.36rem;
color: #555555;
line-height: 0.56rem;
white-space: break-spaces;
position: relative;
&.empty:before {
content: "输入正文";
pointer-events: none;
position: absolute;
top: 0;
left: 0;
color: rgba(117, 117, 117, 1);
}
h2 {
font-size: 0.48rem;
color: #000000;
line-height: normal;
}
img {
width: 8.6rem;
width: 90%;
display: block;
margin: auto;
}
.fill {
// min-width: 2px;
// height: 0.56rem;
// display: inline-block;
}
.blue {
color: #026277;
margin: 0 0.1rem;
// display: inline-block;
}
.cursor {
background-color: red;
width: 1px;
height: 1px;
display: inline-block;
}
}
.label {
white-space: nowrap;
width: 100vw;
height: 0.64rem;
margin-bottom: 0.4rem;
/* height: 0.84rem; */
margin-bottom: 0.2rem;
width: 9.4rem;
overflow: auto;
padding-bottom: 0.2rem;
.item {
width: fit-content;
@@ -147,6 +194,7 @@ editor {
color: #555555;
padding: 0 0.24rem;
margin-right: 0.2rem;
position: relative;
&.pitch {
background-color: rgba(246, 246, 189, 1);
@@ -157,6 +205,27 @@ editor {
height: 0.4rem;
margin-right: 0.14rem;
}
.file {
opacity: 0; /* 隐藏输入框 */
background: transparent;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
.unfold {