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