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