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

优化富文本编辑器;优化滚动条组件

old
宇天 2021-05-25 19:33:55 +08:00
parent c7e8da83e9
commit a04d6658c5
4 changed files with 48 additions and 58 deletions

View File

@ -37,7 +37,7 @@
display: flex; display: flex;
min-width: 200px; min-width: 200px;
min-height: 100px; min-height: 100px;
max-height: 360px; max-height: 640px;
border-radius: 2px; border-radius: 2px;
} }
@ -108,6 +108,7 @@ table {
} }
} }
wc-scroll { wc-scroll {
overflow: hidden;
flex: 1; flex: 1;
} }
.editor { .editor {
@ -277,14 +278,18 @@ function renderToolbar(list) {
.join('') .join('')
} }
export default class Neditor { export default class Editor {
props = { props = {
toolbar: null, toolbar: '',
value: '', value: '',
readonly: false, readonly: false,
disabled: false disabled: false
} }
state = {
toolbar: null
}
__init__() { __init__() {
/* render */ /* render */
@ -298,26 +303,30 @@ export default class Neditor {
this.__LINK_BTN__ = this.__LINK__.querySelector('wc-button') 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() { get readOnly() {
return this.props.readonly return this.props.readonly
} }
set readOnly(val) { set readOnly(val) {
var type = typeof val this.__stat__('readonly', 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)
}
} }
get disabled() { get disabled() {
@ -325,21 +334,7 @@ export default class Neditor {
} }
set disabled(val) { set disabled(val) {
var type = typeof val this.__stat__('disabled', 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)
}
} }
get value() { get value() {
@ -357,18 +352,9 @@ export default class Neditor {
} }
_updateToolbar() { _updateToolbar() {
var { toolbar } = this.props var { toolbar } = this.state
var isToolbarShow = true
if (Array.isArray(toolbar)) { this.__TOOLBAR__.innerHTML = renderToolbar(toolbar)
if (toolbar.length) {
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.__observer = new MutationObserver(_ => {
this.dispatchEvent( this.dispatchEvent(new CustomEvent('input'))
new CustomEvent('input', {
detail: this.value
})
)
}) })
this.__observer.observe(this.__EDITOR__, { this.__observer.observe(this.__EDITOR__, {
@ -615,9 +597,11 @@ export default class Neditor {
watch() { watch() {
switch (name) { switch (name) {
case 'toolbar': case 'toolbar':
if (val) { if (val === null) {
this.state.toolbar = [...DEFAULT_TOOLS]
} else if (val) {
val = val.split(',').map(it => it.trim()) val = val.split(',').map(it => it.trim())
this.props.toolbar = val this.state.toolbar = val
} }
break break
@ -631,7 +615,7 @@ export default class Neditor {
if (k === 'readonly') { if (k === 'readonly') {
k = 'readOnly' k = 'readOnly'
} }
this[k] = true this[k] = val !== null
break break
default: default:

View File

@ -8,7 +8,7 @@ import './keyboard/index'
import './layer/index' import './layer/index'
import './markd/index' import './markd/index'
import './meditor/index' import './meditor/index'
import './neditor/index' import './editor/index'
import './pager/index' import './pager/index'
import './picker/date' import './picker/date'
// import './picker/time' // import './picker/time'

View File

@ -390,16 +390,22 @@ export default class Scroll {
$.bind(document, 'mouseup', mouseupFn) $.bind(document, 'mouseup', mouseupFn)
}) })
this.__observer = new ResizeObserver(this._initFn) this.__observer1 = new ResizeObserver(this._initFn)
this.__observer.observe(this.__BOX__) this.__observer2 = new MutationObserver(this._initFn)
this.__observer1.observe(this.__BOX__)
this.__observer2.observe(this, {
childList: true,
subtree: true,
characterData: true
})
} }
unmounted() { unmounted() {
this.__observer.disconnect() this.__observer1.disconnect()
this.__observer2.disconnect()
$.unbind(this.__X__, 'mousedown', this._xBarFn) $.unbind(this.__X__, 'mousedown', this._xBarFn)
$.unbind(this.__Y__, 'mousedown', this._yBarFn) $.unbind(this.__Y__, 'mousedown', this._yBarFn)
$.unbind(this, 'ready', this._initFn)
$.unbind(this.__BOX__, 'scroll', this._scrollFn) $.unbind(this.__BOX__, 'scroll', this._scrollFn)
} }