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
宇天 2020-07-29 17:46:14 +08:00
parent 9d793f92c3
commit 594d9956ac
2 changed files with 82 additions and 7 deletions

View File

@ -1,5 +1,5 @@
{ {
"name": "@cc0/wcui", "name": "@bd/wcui",
"version": "2.0.0", "version": "2.0.0",
"description": "基于wc开发的一套UI库, 面向未来, 面向electron", "description": "基于wc开发的一套UI库, 面向未来, 面向electron",
"main": "index.js", "main": "index.js",

View File

@ -121,6 +121,13 @@ wc-scroll {
} }
} }
:host([disabled]) {
.neditor {
cursor: not-allowed;
opacity: 0.6;
}
}
.font-layer, .font-layer,
.color-layer, .color-layer,
.link-layer { .link-layer {
@ -273,7 +280,9 @@ function renderToolbar(list) {
export default class Neditor { export default class Neditor {
props = { props = {
toolbar: null, toolbar: null,
value: '' value: '',
readonly: false,
disabled: false
} }
__init__() { __init__() {
@ -289,6 +298,57 @@ export default class Neditor {
this.__LINK_BTN__ = this.__LINK__.querySelector('wc-button') this.__LINK_BTN__ = this.__LINK__.querySelector('wc-button')
} }
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)
}
}
get disabled() {
return this.props.disabled
}
set disabled(val) {
var type = typeof val
if (val === this.props.disabled) {
return
}
log(
this.__EDITOR__,
'------',
val,
(type === 'boolean' && val) || type !== 'boolean'
)
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() {
var html = this.__EDITOR__.innerHTML var html = this.__EDITOR__.innerHTML
if (~html.indexOf('<table>')) { if (~html.indexOf('<table>')) {
@ -379,17 +439,26 @@ export default class Neditor {
/* ------------------------------ */ /* ------------------------------ */
// 工具栏点击事件 // 工具栏点击事件
this._toolFn = $.bind(this.__TOOLBAR__, 'click', ev => { this._toolFn = $.catch(this.__TOOLBAR__, 'click', ev => {
var target = ev.target
var act, val
this.restoreSelection() this.restoreSelection()
if (ev.target === ev.currentTarget) { if (ev.target === ev.currentTarget) {
return return
} }
let target = ev.target
if (this.props.readonly || this.props.disabled) {
return ev.preventDefault()
}
while (target.tagName !== 'SPAN') { while (target.tagName !== 'SPAN') {
target = target.parentNode target = target.parentNode
} }
var act = target.dataset.act
var val = '' act = target.dataset.act
val = ''
switch (act) { switch (act) {
case 'font': case 'font':
@ -504,6 +573,8 @@ export default class Neditor {
'<img src="$1">' '<img src="$1">'
) )
.replace(/<(?!a|img)([\w\-]+)[^>]*>/g, '<$1>') .replace(/<(?!a|img)([\w\-]+)[^>]*>/g, '<$1>')
.replace(/<xml[^>]*?>[\w\W]*?<\/xml>/g, '')
.replace(/<style>[\w\W]*?<\/style>/g, '')
return this.exec('insertHtml', html) return this.exec('insertHtml', html)
} }
@ -563,7 +634,11 @@ export default class Neditor {
case 'readonly': case 'readonly':
case 'disabled': case 'disabled':
this[name] = true var k = name
if (k === 'readonly') {
k = 'readOnly'
}
this[k] = true
break break
default: default: