优化富文本编辑器;优化滚动条组件
parent
c7e8da83e9
commit
a04d6658c5
|
@ -37,7 +37,7 @@
|
|||
display: flex;
|
||||
min-width: 200px;
|
||||
min-height: 100px;
|
||||
max-height: 360px;
|
||||
max-height: 640px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
@ -108,6 +108,7 @@ table {
|
|||
}
|
||||
}
|
||||
wc-scroll {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
.editor {
|
||||
|
@ -277,14 +278,18 @@ function renderToolbar(list) {
|
|||
.join('')
|
||||
}
|
||||
|
||||
export default class Neditor {
|
||||
export default class Editor {
|
||||
props = {
|
||||
toolbar: null,
|
||||
toolbar: '',
|
||||
value: '',
|
||||
readonly: false,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
state = {
|
||||
toolbar: null
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
|
@ -298,26 +303,30 @@ export default class Neditor {
|
|||
this.__LINK_BTN__ = this.__LINK__.querySelector('wc-button')
|
||||
}
|
||||
|
||||
__stat__(name, val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props[name]) {
|
||||
return
|
||||
}
|
||||
|
||||
if ((type === name && val) || type !== 'boolean') {
|
||||
this.props[name] = true
|
||||
this.setAttribute(name, '')
|
||||
this.__EDITOR__.removeAttribute('contenteditable')
|
||||
} else {
|
||||
this.props[name] = false
|
||||
this.removeAttribute(name)
|
||||
this.__EDITOR__.setAttribute('contenteditable', true)
|
||||
}
|
||||
}
|
||||
|
||||
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.setAttribute('readonly', '')
|
||||
this.__EDITOR__.removeAttribute('contenteditable')
|
||||
} else {
|
||||
this.props.readonly = false
|
||||
this.removeAttribute('readonly')
|
||||
this.__EDITOR__.setAttribute('contenteditable', true)
|
||||
}
|
||||
this.__stat__('readonly', val)
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
|
@ -325,21 +334,7 @@ export default class Neditor {
|
|||
}
|
||||
|
||||
set disabled(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.disabled = true
|
||||
this.setAttribute('disabled', '')
|
||||
this.__EDITOR__.removeAttribute('contenteditable')
|
||||
} else {
|
||||
this.props.disabled = false
|
||||
this.removeAttribute('disabled')
|
||||
this.__EDITOR__.setAttribute('contenteditable', true)
|
||||
}
|
||||
this.__stat__('disabled', val)
|
||||
}
|
||||
|
||||
get value() {
|
||||
|
@ -357,18 +352,9 @@ export default class Neditor {
|
|||
}
|
||||
|
||||
_updateToolbar() {
|
||||
var { toolbar } = this.props
|
||||
var isToolbarShow = true
|
||||
if (Array.isArray(toolbar)) {
|
||||
if (toolbar.length) {
|
||||
var { toolbar } = this.state
|
||||
|
||||
this.__TOOLBAR__.innerHTML = renderToolbar(toolbar)
|
||||
} else {
|
||||
isToolbarShow = false
|
||||
}
|
||||
} else {
|
||||
this.__TOOLBAR__.innerHTML = renderToolbar()
|
||||
}
|
||||
this.__TOOLBAR__.style.display = isToolbarShow ? 'flex' : ''
|
||||
}
|
||||
|
||||
// 保存选中
|
||||
|
@ -588,11 +574,7 @@ export default class Neditor {
|
|||
})
|
||||
|
||||
this.__observer = new MutationObserver(_ => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('input', {
|
||||
detail: this.value
|
||||
})
|
||||
)
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
})
|
||||
|
||||
this.__observer.observe(this.__EDITOR__, {
|
||||
|
@ -615,9 +597,11 @@ export default class Neditor {
|
|||
watch() {
|
||||
switch (name) {
|
||||
case 'toolbar':
|
||||
if (val) {
|
||||
if (val === null) {
|
||||
this.state.toolbar = [...DEFAULT_TOOLS]
|
||||
} else if (val) {
|
||||
val = val.split(',').map(it => it.trim())
|
||||
this.props.toolbar = val
|
||||
this.state.toolbar = val
|
||||
}
|
||||
break
|
||||
|
||||
|
@ -631,7 +615,7 @@ export default class Neditor {
|
|||
if (k === 'readonly') {
|
||||
k = 'readOnly'
|
||||
}
|
||||
this[k] = true
|
||||
this[k] = val !== null
|
||||
break
|
||||
|
||||
default:
|
|
@ -8,7 +8,7 @@ import './keyboard/index'
|
|||
import './layer/index'
|
||||
import './markd/index'
|
||||
import './meditor/index'
|
||||
import './neditor/index'
|
||||
import './editor/index'
|
||||
import './pager/index'
|
||||
import './picker/date'
|
||||
// import './picker/time'
|
||||
|
|
|
@ -390,16 +390,22 @@ export default class Scroll {
|
|||
$.bind(document, 'mouseup', mouseupFn)
|
||||
})
|
||||
|
||||
this.__observer = new ResizeObserver(this._initFn)
|
||||
this.__observer.observe(this.__BOX__)
|
||||
this.__observer1 = new ResizeObserver(this._initFn)
|
||||
this.__observer2 = new MutationObserver(this._initFn)
|
||||
this.__observer1.observe(this.__BOX__)
|
||||
this.__observer2.observe(this, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
})
|
||||
}
|
||||
|
||||
unmounted() {
|
||||
this.__observer.disconnect()
|
||||
this.__observer1.disconnect()
|
||||
this.__observer2.disconnect()
|
||||
|
||||
$.unbind(this.__X__, 'mousedown', this._xBarFn)
|
||||
$.unbind(this.__Y__, 'mousedown', this._yBarFn)
|
||||
$.unbind(this, 'ready', this._initFn)
|
||||
$.unbind(this.__BOX__, 'scroll', this._scrollFn)
|
||||
}
|
||||
|
||||
|
|
Reference in New Issue