bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化meditor

master
yutent 2023-10-17 12:25:02 +08:00
parent c6a0cfbcef
commit 51369625d2
1 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/meditor/index.js
View File

@ -226,6 +226,7 @@ class MEditor extends Component {
top: 0;
z-index: 99;
width: 80px;
height: 0;
padding: 5px 0;
line-height: 25px;
background: #fff;
@ -237,6 +238,7 @@ class MEditor extends Component {
&.fadein {
visibility: visible;
top: 34px;
height: auto;
opacity: 1;
}
}
@ -274,12 +276,12 @@ class MEditor extends Component {
}
.table-layer {
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
left: 240px;
width: 200px;
height: 200px;
padding: 2px;
background: #fff;
@ -292,6 +294,10 @@ class MEditor extends Component {
background: rgba(77, 182, 172, 0.3);
}
}
&.fadein {
height: 200px;
}
}
.link-layer {
@ -358,9 +364,9 @@ class MEditor extends Component {
previewEnabled = false
#hideLayers() {
this.$refs.header.classList.remove('fadein')
this.$refs.link.classList.remove('fadein')
this.$refs.table.classList.remove('fadein')
this.$refs.header?.classList.remove('fadein')
this.$refs.link?.classList.remove('fadein')
this.$refs.table?.classList.remove('fadein')
}
// 处理图片
@ -772,7 +778,7 @@ class MEditor extends Component {
#fixedPadding() {
if (this.clientHeight > 64) {
let pb = ~~(this.clientHeight * 0.6)
let pb = ~~(this.clientHeight * 0.6) - (this.#toolbar.length ? 34 : 0)
pb = pb < 64 ? 64 : pb
this.$refs.editor.style.paddingBottom = pb + 'px'
} else {
@ -794,6 +800,10 @@ class MEditor extends Component {
}
render() {
let hasTable = this.#toolbar.includes('table')
let hasHeader = this.#toolbar.includes('header')
let hasLink = this.#toolbar.includes('link')
return html`
<div class="meditor">
<header
@ -834,33 +844,37 @@ class MEditor extends Component {
<wc-markd ref="view" class="preview"></wc-markd>
</div>
<div
class="font-layer noselect"
ref="header"
@click=${this.#setHeaderLevel}
>
<span data-value="1">H1</span>
<span data-value="2">H2</span>
<span data-value="3">H3</span>
<span data-value="4">H4</span>
<span data-value="5">H5</span>
<span data-value="6">H6</span>
</div>
<div
class="table-layer noselect"
ref="table"
@click=${this.#insertTable}
@mousemove=${this.#tableSelect}
@mouseleave=${this.#tableSelect}
>
${range(81).map((_, n) => html`<span data-idx=${n}></span>`)}
</div>
<div class="link-layer noselect" ref="link">
<wc-input ref="linkinput" placeholder="请输入链接地址"></wc-input>
<wc-button size="m" @click=${this.#insertLink}>插入</wc-button>
</div>
${hasHeader
? html`<div
class="font-layer noselect"
ref="header"
@click=${this.#setHeaderLevel}
>
<span data-value="1">H1</span>
<span data-value="2">H2</span>
<span data-value="3">H3</span>
<span data-value="4">H4</span>
<span data-value="5">H5</span>
<span data-value="6">H6</span>
</div>`
: ''}
${hasTable
? html`<div
class="table-layer noselect"
ref="table"
@click=${this.#insertTable}
@mousemove=${this.#tableSelect}
@mouseleave=${this.#tableSelect}
>
${range(81).map((_, n) => html`<span data-idx=${n}></span>`)}
</div>`
: ''}
${hasLink
? html`<div class="link-layer noselect" ref="link">
<wc-input ref="linkinput" placeholder="请输入链接地址"></wc-input>
<wc-button size="m" @click=${this.#insertLink}>插入</wc-button>
</div>`
: ''}
</div>
`
}