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
Code Issues Pull Requests Wiki Activity

优化editor组件高度初始化

old
yutent 2022-02-24 10:22:38 +08:00
parent d79bb96b6b
commit 3d23648658
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/editor/index.wc
View File

@ -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
View File

@ -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
} }
} }