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

优化meditor

master
yutent 2023-10-18 19:44:22 +08:00
parent 51369625d2
commit 1d396157c9
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/meditor/index.js
View File

@ -54,8 +54,10 @@ class MEditor extends Component {
}
}
},
placeholder: '',
readonly: false,
disabled: false
disabled: false,
autofocus: false
}
static styles = [
@ -156,7 +158,7 @@ class MEditor extends Component {
padding: 5px 8px;
line-height: 1.5;
border: 0;
font-size: 14px;
font-size: var(--wc-meditor-font-size, 14px);
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
color: var(--color-dark-1);
background: none;
@ -225,14 +227,10 @@ class MEditor extends Component {
left: 0;
top: 0;
z-index: 99;
width: 80px;
height: 0;
padding: 5px 0;
line-height: 25px;
background: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
font-size: 13px;
opacity: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
transition: all ease-in-out 0.2s;
&.fadein {
@ -244,6 +242,8 @@ class MEditor extends Component {
}
.font-layer {
width: 120px;
padding: 5px 0;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
span {
@ -521,6 +521,10 @@ class MEditor extends Component {
}
}
focus() {
this.$refs.editor?.focus()
}
/**
* 往文本框中插入内容
* @param {String} val [要插入的文本]
@ -832,6 +836,8 @@ class MEditor extends Component {
ref="editor"
class="editor"
spellcheck="false"
placeholder=${this.placeholder}
autofocus=${this.autofocus}
:readOnly=${this.readOnly}
:disabled=${this.disabled}
@click=${this.#hideLayers}
@ -850,12 +856,12 @@ class MEditor extends Component {
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>
<span data-value="1">一级标题</span>
<span data-value="2">二级标题</span>
<span data-value="3">三级标题</span>
<span data-value="4">四级标题</span>
<span data-value="5">五级标题</span>
<span data-value="6">六级标题</span>
</div>`
: ''}
${hasTable