优化editor组件高度初始化
parent
d79bb96b6b
commit
3d23648658
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="neditor">
|
<div class="editor">
|
||||||
<section class="toolbar"></section>
|
<section class="toolbar"></section>
|
||||||
<wc-scroll>
|
<wc-scroll>
|
||||||
<div contenteditable="true" class="editor" spellcheck="false"></div>
|
<div contenteditable="true" class="typearea" spellcheck="false"></div>
|
||||||
</wc-scroll>
|
</wc-scroll>
|
||||||
<div class="font-layer">
|
<div class="font-layer">
|
||||||
<span data-size="6">6号字体</span>
|
<span data-size="6">6号字体</span>
|
||||||
|
@ -75,7 +75,7 @@ a {
|
||||||
color: var(--color-teal-1);
|
color: var(--color-teal-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.neditor {
|
.editor {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -126,9 +126,10 @@ wc-scroll {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.editor {
|
.typearea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 64px;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
|
@ -138,14 +139,14 @@ wc-scroll {
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([disabled]) {
|
:host([disabled]) {
|
||||||
.neditor {
|
.editor {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([readonly]) {
|
:host([readonly]) {
|
||||||
.neditor {
|
.editor {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
@ -373,7 +374,7 @@ export default class Editor {
|
||||||
|
|
||||||
get value() {
|
get value() {
|
||||||
var html = this.__EDITOR__.innerHTML
|
var html = this.__EDITOR__.innerHTML
|
||||||
if (~html.indexOf('<table>')) {
|
if (~html.indexOf('<table>') && !html.startsWith('<style>table')) {
|
||||||
html =
|
html =
|
||||||
'<style>table{border-spacing:0;border-collapse:collapse;}table tr{background:#fff;}table thead tr{background:#f3f5fb;}table th,table td{padding:6px 12px;border:1px solid #dae1e9;}table th{font-weight: bold;}</style>' +
|
'<style>table{border-spacing:0;border-collapse:collapse;}table tr{background:#fff;}table thead tr{background:#f3f5fb;}table th,table td{padding:6px 12px;border:1px solid #dae1e9;}table th{font-weight: bold;}</style>' +
|
||||||
html
|
html
|
||||||
|
@ -449,6 +450,8 @@ export default class Editor {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.__EDITOR__.style.cssText = `min-height:${this.clientHeight - 36}px;`
|
||||||
|
|
||||||
/* ------------------------------ */
|
/* ------------------------------ */
|
||||||
|
|
||||||
// 工具栏点击事件
|
// 工具栏点击事件
|
||||||
|
|
11
src/utils.js
11
src/utils.js
|
@ -12,6 +12,9 @@ export default {
|
||||||
*/
|
*/
|
||||||
nextTick: (function() {
|
nextTick: (function() {
|
||||||
let queue = []
|
let queue = []
|
||||||
|
let node = document.createTextNode('<!-- -->')
|
||||||
|
let bool = false
|
||||||
|
|
||||||
function callback() {
|
function callback() {
|
||||||
let n = queue.length
|
let n = queue.length
|
||||||
for (let i = 0; i < n; i++) {
|
for (let i = 0; i < n; i++) {
|
||||||
|
@ -20,10 +23,8 @@ export default {
|
||||||
queue = queue.slice(n)
|
queue = queue.slice(n)
|
||||||
}
|
}
|
||||||
|
|
||||||
let node = document.createTextNode('<!-- -->')
|
|
||||||
new MutationObserver(callback).observe(node, { characterData: true })
|
new MutationObserver(callback).observe(node, { characterData: true })
|
||||||
|
|
||||||
let bool = false
|
|
||||||
return function(fn) {
|
return function(fn) {
|
||||||
queue.push(fn)
|
queue.push(fn)
|
||||||
bool = !bool
|
bool = !bool
|
||||||
|
@ -122,11 +123,7 @@ export default {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
var target = ev.explicitOriginalTarget || ev.target
|
var target = ev.explicitOriginalTarget || ev.target
|
||||||
if (
|
if (dom === target || dom.contains(target) || (dom.root && dom.root.contains(target))) {
|
||||||
dom === target ||
|
|
||||||
dom.contains(target) ||
|
|
||||||
(dom.root && dom.root.contains(target))
|
|
||||||
) {
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue