This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化meditor

old
宇天 2021-04-06 15:12:20 +08:00
parent 2457e14a86
commit e7db91d727
2 changed files with 115 additions and 34 deletions

View File

@ -120,7 +120,11 @@ export default {
fullscreen(elem) {
//
this.props.fullscreen = !this.props.fullscreen
this.classList.toggle('fullscreen', this.props.fullscreen)
if (this.props.fullscreen) {
this.setAttribute('fullscreen', '')
} else {
this.removeAttribute('fullscreen')
}
elem.classList.toggle('active', this.props.fullscreen)
},
preview(elem) {

View File

@ -25,7 +25,7 @@
</li>
<li>
<label></label>
<wc-button class="submit" color="teal" size="mini">确定</wc-button>
<wc-button class="submit" type="primary" size="mini">确定</wc-button>
</li>
</ul>
</wc-layer>
@ -44,7 +44,7 @@
</li>
<li>
<label></label>
<wc-button class="submit" color="teal" size="mini">确定</wc-button>
<wc-button class="submit" type="primary" size="mini">确定</wc-button>
</li>
</ul>
<div class="locale">
@ -59,7 +59,7 @@
display: flex;
min-width: 200px;
min-height: 100px;
// max-height: 360px;
height: 100%;
border-radius: 3px;
transition: box-shadow 0.15s linear;
}
@ -69,9 +69,10 @@
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid var(--color-plain-2);
border: 1px solid var(--color-grey-2);
border-radius: inherit;
font-size: 14px;
background: #fff;
}
.toolbar {
@ -79,7 +80,7 @@
height: 34px;
padding: 5px;
line-height: 24px;
border-bottom: 1px solid var(--color-plain-2);
border-bottom: 1px solid var(--color-grey-1);
span {
position: relative;
@ -91,7 +92,7 @@
height: 24px;
margin: 0 3px;
border-radius: 3px;
color: var(--color-dark-1);
color: var(--color-grey-3);
.icon {
overflow: hidden;
@ -118,6 +119,7 @@
flex: 1;
display: flex;
min-height: 300px;
border-radius: 3px;
background: #fff;
.editor,
@ -132,11 +134,15 @@
border: 0;
font-size: 14px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
color: var(--color-grey-3);
color: var(--color-dark-1);
background: none;
outline: none;
resize: none;
cursor: inherit;
&::placeholder {
color: var(--color-grey-1);
}
}
.preview {
@ -324,13 +330,31 @@
}
:host([disabled]) {
.meditor {
cursor: not-allowed;
opacity: 0.6;
.meditor,
.toolbar {
cursor: not-allowed;
}
.toolbar {
span:hover {
background: none;
}
}
}
:host(.fullscreen) {
:host([readonly]) {
opacity: 0.6;
.toolbar {
span:hover {
background: none;
}
}
}
:host([fullscreen]) {
position: fixed;
left: 0;
top: 0;
@ -358,16 +382,17 @@ import Addon from './addon'
export default class Meditor {
props = {
toolbar: null,
toolbar: '',
value: '',
readonly: false,
disabled: false,
height: 180,
preview: window.innerWidth > 768
preview: '',
placeholder: ''
}
state = {
toolbar: []
toolbar: null,
preview: window.innerWidth > 768
}
__init__() {
@ -385,21 +410,23 @@ export default class Meditor {
}
_updateToolbar() {
var { toolbar, preview } = this.props
var { toolbar, preview } = this.state
var isToolbarShow = true
if (Array.isArray(toolbar)) {
if (toolbar === null) {
this.__TOOLBAR__.innerHTML = renderToolbar(null, 'span', TOOL_TITLE)
} else {
if (toolbar.length) {
this.__TOOLBAR__.innerHTML = renderToolbar(toolbar, 'span', TOOL_TITLE)
} else {
isToolbarShow = false
}
} else {
this.__TOOLBAR__.innerHTML = renderToolbar(null, 'span', TOOL_TITLE)
}
if (isToolbarShow) {
this.__TOOLBAR__.classList.toggle('active', isToolbarShow)
this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview)
this.__VIEW__.classList.toggle('active', preview)
}
}
_createTableAddon() {
var html = ''
@ -506,7 +533,6 @@ export default class Meditor {
var $submit = $link.querySelector('.submit')
this.__LINK_ADDON__.__txt__ = $txt
// Addon.link.call(this, this.__TOOLBAR__.children[12])
$.bind($submit, 'click', ev => {
var txt = $txt.value.trim()
@ -738,11 +764,32 @@ export default class Meditor {
set value(val) {
this.__EDITOR__.value = val
if (this.props.preview) {
if (this.state.preview) {
this.__VIEW__.value = val
}
}
get readOnly() {
return this.props.readonly
}
set readOnly(val) {
var type = typeof val
if (val === this.props.readonly) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.readonly = true
this.__EDITOR__.readOnly = true
this.setAttribute('readonly', '')
} else {
this.props.readonly = false
this.__EDITOR__.readOnly = false
this.removeAttribute('readonly')
}
}
get disabled() {
return this.props.disabled
}
@ -772,8 +819,8 @@ export default class Meditor {
this._createLinkAddon()
this._createAttachAddon()
$.bind(this.__EDITOR__, 'input', _ => {
if (this.props.preview) {
this._inputFn = $.bind(this.__EDITOR__, 'input', _ => {
if (this.state.preview) {
var txt = this.__EDITOR__.value.trim()
if (txt) {
this.__VIEW__.value = txt
@ -783,10 +830,14 @@ export default class Meditor {
}
})
$.bind(this.__EDITOR__, 'keydown', ev => {
this._keydownFn = $.bind(this.__EDITOR__, 'keydown', ev => {
let wrap = this.selection() || ''
let select = !!wrap
if (this.readOnly || this.disabled) {
return
}
switch (ev.keyCode) {
//tab键改为插入2个空格,阻止默认事件,防止焦点失去
case 9:
@ -871,12 +922,16 @@ export default class Meditor {
}
})
$.bind(this.__EDITOR__, 'paste', ev => {
this._pasteFn = $.bind(this.__EDITOR__, 'paste', ev => {
ev.preventDefault()
var txt = ev.clipboardData.getData('text/plain').trim()
var html = ev.clipboardData.getData('text/html').trim()
var items = ev.clipboardData.items
if (this.readOnly || this.disabled) {
return
}
if (html) {
html = html2md(html)
return this.insert(html)
@ -903,13 +958,20 @@ export default class Meditor {
}
})
$.bind(this.__TOOLBAR__, 'click', ev => {
this._clickFn = $.bind(this.__TOOLBAR__, 'click', ev => {
ev.preventDefault()
var elem = ev.target
var act
if (elem === ev.currentTarget) {
return
}
if (this.readOnly || this.disabled) {
return
}
while (elem.tagName !== 'SPAN') {
elem = elem.parentNode
}
@ -918,12 +980,23 @@ export default class Meditor {
})
}
unmount() {
$.unbind(this.__EDITOR__, 'input', this._inputFn)
$.unbind(this.__EDITOR__, 'keydown', this._keydownFn)
$.unbind(this.__EDITOR__, 'paste', this._pasteFn)
$.unbind(this.__TOOLBAR__, 'click', this._clickFn)
}
watch() {
switch (name) {
case 'toolbar':
if (val) {
val = val.split(',').map(it => it.trim())
this.props.toolbar = val
if (val === null) {
this.state.toolbar = null
} else {
this.state.toolbar = val
.split(',')
.map(it => it.trim())
.filter(it => it)
}
break
@ -931,11 +1004,15 @@ export default class Meditor {
this.value = val
break
case 'placeholder':
this.__EDITOR__.setAttribute('placeholder', val || '')
break
case 'preview':
if (val === 'false') {
this.props.preview = false
this.state.preview = false
} else {
this.props.preview = window.innerWidth > 768
this.state.preview = window.innerWidth > 768
}
break