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) { fullscreen(elem) {
// //
this.props.fullscreen = !this.props.fullscreen 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) elem.classList.toggle('active', this.props.fullscreen)
}, },
preview(elem) { preview(elem) {

View File

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