更新富文本编辑器

src/editor/index.js

@@ -0,0 +1,397 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/09/14 16:49:15
+ */
+
+import { css, raw, html, Component, nextTick, styleMap } from 'wkit'
+import ICONS from './svg.js'
+import '../form/input.js'
+import '../form/button.js'
+
+const ACTTION = {
+  bold: 'bold',
+  italic: 'italic',
+  under: 'underline',
+  delete: 'strikeThrough',
+  left: 'justifyLeft',
+  center: 'justifyCenter',
+  right: 'justifyRight',
+  image: 'insertImage',
+  font: 'fontSize',
+  color: 'foreColor',
+  link: 'createLink',
+  ordered: 'insertOrderedList',
+  unordered: 'insertUnorderedList'
+}
+
+const DEFAULT_TOOLS = [
+  'font',
+  'color',
+  'bold',
+  'italic',
+  'under',
+  'delete',
+  'ordered',
+  'unordered',
+  'left',
+  'center',
+  'right',
+  'link',
+  'image'
+]
+
+const COLORS = [
+  '#f3f5fb',
+  '#dae1e9',
+  '#62778d',
+  '#58d68d',
+  '#3fc2a7',
+  '#52a3de',
+  '#ac61ce',
+  '#ffb618',
+  '#e67e22',
+  '#ff5061',
+  '#ff0000',
+  '#000000'
+]
+
+class Editor extends Component {
+  static props = {
+    toolbar: {
+      type: String,
+      default: '',
+      attribute: false,
+      observer(v) {
+        if (v === null) {
+          this.#toolbar = [...DEFAULT_TOOLS]
+        } else if (v) {
+          this.#toolbar = v.split(',').map(it => it.trim())
+        }
+      }
+    },
+    value: 'str!',
+    readonly: false,
+    disabled: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        min-width: 200px;
+        min-height: 100px;
+        max-height: 720px;
+        border-radius: 3px;
+        transition: box-shadow 0.15s linear;
+      }
+      table {
+        width: 100%;
+        border-spacing: 0;
+        border-collapse: collapse;
+
+        tr {
+          background: #fff;
+        }
+        thead tr {
+          background: var(--color-plain-1);
+        }
+        th,
+        td {
+          padding: 6px 13px;
+          border: 1px solid var(--color-plain-2);
+          vertical-align: middle;
+        }
+        th {
+          font-weight: bold;
+        }
+        tr:nth-child(2n) {
+          background: #fcfdff;
+        }
+      }
+
+      ul,
+      ol {
+        margin-left: 1em;
+      }
+      a {
+        color: var(--color-teal-1);
+      }
+      .noselect {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+      }
+    `,
+
+    css`
+      .editor {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        border: 1px solid #e7e8eb;
+        border-radius: inherit;
+        font-size: 14px;
+      }
+      .toolbar {
+        display: flex;
+        height: 34px;
+        padding: 5px;
+        line-height: 24px;
+        border-bottom: 1px solid #e7e8eb;
+
+        span {
+          position: relative;
+          overflow: hidden;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 24px;
+          height: 24px;
+          margin: 0 3px;
+          border-radius: 3px;
+
+          input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+          .icon {
+            overflow: hidden;
+            width: 70%;
+            height: 70%;
+            fill: currentColor;
+            color: #62778d;
+          }
+
+          &:hover {
+            background: #f7f8fb;
+          }
+        }
+      }
+
+      .scroll-outerbox {
+        overflow: hidden;
+        position: relative;
+        flex: 1;
+        padding: 5px 8px;
+      }
+      .scroll-innerbox {
+        overflow-y: auto;
+        width: 100%;
+        height: 100%;
+        scrollbar-width: 0;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      .is-vertical {
+        // visibility: hidden;
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: flex;
+        justify-content: flex-end;
+        width: 10px;
+        height: 100%;
+        // opacity: 0;
+        transition: opacity 0.3s linear, visibility 0.3s linear;
+
+        .thumb {
+          display: block;
+          width: 6px;
+          height: 90px;
+          border-radius: 5px;
+          background: rgba(44, 47, 53, 0.25);
+          cursor: default;
+          transition: width 0.1s linear, height 0.1s linear;
+
+          &:hover {
+            width: 10px;
+            background: rgba(44, 47, 53, 0.5);
+          }
+        }
+      }
+
+      .typearea {
+        width: 100%;
+        height: 100%;
+        outline: none;
+        text-wrap: wrap;
+        word-break: break-all;
+
+        img {
+          max-width: 100%;
+        }
+      }
+    `,
+
+    css`
+      :host(:hover) {
+        .is-vertical {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+      :host([disabled]) {
+        .editor {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+      }
+
+      :host([readonly]) {
+        .editor {
+          cursor: default;
+          opacity: 0.8;
+        }
+      }
+      :host([readonly]),
+      :host([disabled]) {
+        .toolbar {
+          span:hover {
+            background: none;
+          }
+        }
+      }
+
+      :host(:focus-within) {
+        box-shadow: 0 0 0 2px var(--color-plain-a);
+      }
+    `,
+
+    css`
+      @use 'sass:list';
+
+      .font-layer,
+      .color-layer,
+      .link-layer {
+        visibility: hidden;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 99;
+        width: 80px;
+        padding: 5px 0;
+        line-height: 25px;
+        background: #fff;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+        font-size: 13px;
+        opacity: 0;
+        transition: all ease-in-out 0.2s;
+
+        &.fadein {
+          visibility: visible;
+          top: 34px;
+          opacity: 1;
+        }
+      }
+
+      .font-layer {
+        span {
+          display: block;
+          padding: 0 8px;
+
+          &:hover {
+            background: #f7f8fb;
+          }
+        }
+      }
+      $colors: #f3f5fb, #dae1e9, #62778d, #58d68d, #3fc2a7, #52a3de, #ac61ce,
+        #ffb618, #e67e22, #ff5061, #ff0000, #000000;
+
+      .color-layer {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        left: 30px;
+        width: 100px;
+
+        span {
+          width: 20px;
+          height: 20px;
+          margin: 2px;
+
+          @for $i from 1 to 13 {
+            &:nth-child(#{$i}) {
+              background: list.nth($colors, $i);
+            }
+          }
+        }
+      }
+
+      .link-layer {
+        display: flex;
+        flex-direction: column;
+        left: 330px;
+        width: 230px;
+        padding: 8px;
+
+        wc-button {
+          width: 40px;
+          margin-top: 8px;
+        }
+      }
+    `
+  ]
+
+  #toolbar = []
+
+  render() {
+    toolbar = [
+      ...(this.#toolbar.length ? this.#toolbar : DEFAULT_TOOLS),
+      'copy'
+    ]
+
+    return html`
+      <div class="editor">
+        <section class="toolbar">
+          ${toolbar.map(
+            it => html`
+              <span data-act=${it}>
+                <svg class="icon" viewBox="0 0 1024 1024">
+                  <path d=${ICONS[it]} />
+                </svg>
+                ${it === 'image'
+                  ? html`<input type="file" accept="image/*" />`
+                  : ''}
+              </span>
+            `
+          )}
+        </section>
+        <div class="scroll-outerbox">
+          <div class="scroll-innerbox">
+            <div contenteditable="true" class="typearea" spellcheck="false">
+              ${raw(this.value)}
+            </div>
+          </div>
+          <div class="is-vertical noselect">
+            <span ref="y" class="thumb"></span>
+          </div>
+        </div>
+        <div class="font-layer noselect">
+          <span data-size="6">6号字体</span>
+          <span data-size="5">5号字体</span>
+          <span data-size="4">4号字体</span>
+          <span data-size="3">3号字体</span>
+          <span data-size="2">2号字体</span>
+        </div>
+        <div class="color-layer noselect">
+          ${COLORS.map(c => html`<span data-value=${c}></span>`)}
+        </div>
+        <div class="link-layer noselect">
+          <wc-input label="请输入链接地址"></wc-input>
+          <wc-button color="teal" size="mini">插入</wc-button>
+        </div>
+      </div>
+    `
+  }
+}
+
+Editor.reg('editor')

src/editor/svg.js

@@ -0,0 +1,31 @@
+/**
+ * icon字典
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2019/07/08 17:39:11
+ */
+
+export default {
+  font: 'M123.68639053 456.52662723l332.84023669 0 0 110.94674556-110.94674556 0 0 332.84023669-110.94674557 0 0-332.84023669-110.94674556 0zM900.31360947 234.6331361l-218.20118344 0 0 665.68047338-118.31360947 0 0-665.68047338-218.20118342 0 0-110.94674556 554.7337278 0z',
+  color:
+    'M470.975 137l-214.462 562.5h102l44.513-131.25h217.949l48.038 131.25h102.002l-214.501-562.5h-85.5zM512 256.55l78.525 233.175h-160.538l82.013-233.212zM212 774.5v112.5h599.999v-112.5h-599.999z',
+  copy: 'M646.4 960H243.2C182.9 960 128 903.8 128 842.1V291.9c0-29.4 11.8-59 32.5-81.3 21.4-23.1 49.2-35.8 78.4-35.8l23.9-0.6c0.3-29 12.6-56.6 34.7-77.7C319.2 75.9 348.4 64 377.6 64c3.2 0 319.3 0.9 322.6 0.9h3.4L896 289.6v442.5c0 61.7-54.9 117.9-115.1 117.9l-19.3-0.2c-0.2 29.2-12.5 56.8-34.9 78-21.8 20.4-51 32.2-80.3 32.2zM240.6 232.3c-23.3 0-56.6 35.1-56.6 59.6v550.2c0 10.9 8.1 26.2 20.6 39.1 12.8 13.2 27.6 21.4 38.6 21.4h403.3c19.1 0 44.5-25.7 46.3-52.9l-315.2 0.3c-60.3 0-115.2-56.2-115.2-117.9V231.7l-21.8 0.6z m124-110.9c-22.9 0-46.2 35.2-46.2 60.5v550.2c0 25.3 23.3 60.5 46.2 60.5h416.3c11 0 25.8-8.2 38.6-21.4 12.5-12.9 20.6-28.3 20.6-39.1V341.5h-86c-61.1 0-102.2-41.7-102.2-103.9 0-0.5-0.4-56.4 0-116.2H364.6z m335.6 536.3h-242c-19 0-34.5-15.9-34.5-35.3 0-19.5 15.5-35.3 34.5-35.3h242c19 0 34.5 15.9 34.5 35.3s-15.5 35.3-34.5 35.3z m0-137.4h-242c-19 0-34.5-15.9-34.5-35.3 0-19.5 15.5-35.3 34.5-35.3h242c19 0 34.5 15.9 34.5 35.3s-15.5 35.3-34.5 35.3z m7.6-310.2c0 26.1 23.7 74.6 46.2 74.6h64.3L707.8 149.2v60.9z',
+  bold: 'M584.81777778 724.57443555H414.91000889v-145.63555556H584.81777778c40.29212445 0 72.81777778 32.52565333 72.81777777 72.81777778 0 40.29326222-32.52565333 72.81777778-72.81777777 72.81777778m-169.90776889-436.90666667h145.63555556c40.29212445 0 72.81777778 32.52565333 72.81777777 72.81777778 0 40.29326222-32.52565333 72.81777778-72.81777777 72.81777778h-145.63555556m271.85265778 62.62328889C733.85187555 462.91626666 766.86222222 409.03111111 766.86222222 360.48554666c0-109.71136-84.95445333-194.17998222-194.18112-194.17998222H269.27445333V845.93777777H611.03217778c101.94488889 0 180.10225778-82.52643555 180.10225777-183.98663111 0-73.78830222-41.74848-136.89742222-104.37176888-166.02453333z',
+  image:
+    'M552.0003125 392h219.999375L552.0003125 171.9996875V392M272 111.9996875h319.9996875l240 240v480c0 44.000625-36 80.000625-79.9996875 80.000625H272c-44.4 0-79.9996875-36-79.9996875-80.000625V192.0003125A79.723125 79.723125 0 0 1 272 111.9996875m0 720h480V512L591.9996875 672.0003125 512 591.9996875l-240 240M351.9996875 392C308 392 272 428 272 471.9996875c0 44.000625 36 80.000625 79.9996875 80.000625 44.000625 0 80.000625-36 80.000625-80.000625 0-43.9996875-36-79.9996875-80.000625-79.9996875z',
+  left: 'M128 128h768v85.333H128V128m0 170.667h512V384H128v-85.333m0 170.666h768v85.334H128v-85.334M128 640h512v85.333H128V640m0 170.667h768V896H128v-85.333z',
+  link: 'M879.2 131.6c-103-95.5-264.1-88-361.4 11.2L474.7 184c-13.1 13.1-3.7 35.6 13.1 37.5 26.2 1.9 52.4 7.5 78.7 15 7.5 1.9 16.9 0 22.5-5.6l9.4-9.4c54.3-54.3 142.3-59.9 198.5-11.2 63.7 54.3 65.5 151.7 7.5 209.7L662 562.3c-18.7 18.7-41.2 30-63.7 37.5-30 7.5-61.8 5.6-89.9-5.6-16.9-7.5-33.7-16.9-48.7-31.8-7.5-7.5-13.1-15-18.7-24.3-7.5-13.1-24.3-15-33.7-3.7l-52.4 52.4c-7.5 7.5-7.5 18.7-1.9 28.1 7.5 11.2 16.9 20.6 26.2 30 13.1 13.1 30 26.2 44.9 35.6 26.2 16.9 56.2 28.1 86.1 33.7 58.1 11.2 121.7 1.9 174.2-26.2 20.6-11.2 41.2-26.2 58.1-43.1l142.3-142.3c104.9-103.2 101.2-271.8-5.6-371zM534.7 803.9l-39.3-5.6s-26.2-5.6-39.3-11.2c-7.5-1.9-16.9 0-22.5 5.6l-9.4 9.4c-54.3 54.3-142.3 59.9-198.5 11.2-63.7-54.3-65.5-151.7-7.5-209.7l142.3-142.3c18.7-18.7 41.2-30 63.7-37.5 30-7.5 61.8-5.6 89.9 5.6 16.9 7.5 33.7 16.9 48.7 31.8 7.5 7.5 13.1 15 18.7 24.3 7.5 13.1 24.3 15 33.7 3.7l52.4-52.4c7.5-7.5 7.5-18.7 1.9-28.1-7.5-11.2-16.9-20.6-26.2-30-13.1-13.1-28.1-26.2-44.9-35.6-26.2-16.9-56.2-28.1-88-33.7-58.1-11.2-121.7-1.9-174.2 26.2-20.6 11.2-41.2 26.2-58.1 43.1L141.4 515.5c-99.3 99.3-106.7 260.3-11.2 361.4C229.5 985.5 398 987.4 501 884.4l46.8-46.8c13.1-9.4 3.7-31.9-13.1-33.7z',
+  ordered:
+    'M298.667 554.667H896v-85.334H298.667m0 341.334H896v-85.334H298.667m0-426.666H896v-85.334H298.667m-213.334 256h76.8l-76.8 89.6v38.4h128v-42.666h-76.8l76.8-89.6v-38.4h-128M128 341.333h42.667V170.667H85.333v42.666H128m-42.667 512h85.334v21.334H128v42.666h42.667v21.334H85.333v42.666h128V682.667h-128v42.666z',
+  italic:
+    'M414.91000889 163.63889777v145.63555555h107.28448L356.16995555 697.63555555H220.72888889v145.63555555h388.36110222V697.63555555H501.80551111l166.02453334-388.36110222H803.27111111v-145.63555556H414.91000889z',
+  delete:
+    'M898.719 512v70.312H744.383c35.156 75.235 33.398 281.25-219.024 281.25-292.851 1.758-281.601-228.515-281.601-228.515l139.57 1.758c1.055 118.476 111.094 118.476 132.89 117.07 22.5-1.758 106.524-1.406 113.204-83.672 2.812-38.32-35.86-67.5-78.047-87.89H125.281V512H898.72M772.508 367.508l-139.922-1.055s5.976-97.383-115.313-97.734c-121.289-0.703-110.742 77.343-110.742 87.187 1.407 9.844 11.953 58.36 105.469 81.563H290.867S168.172 200.867 467.703 160.437c306.211-42.187 305.508 207.774 304.805 207.07z',
+  under:
+    'M232 872h560v-80H232v80m280-160c132.4 0 240-107.6 240-240V152H652v320c0 77.2-62.8 140-140 140s-140-62.8-140-140V152H272v320c0 132.4 107.6 240 240 240z',
+  center:
+    'M128 128h768v85.333H128V128m170.667 170.667h426.666V384H298.667v-85.333M128 469.333h768v85.334H128v-85.334M298.667 640h426.666v85.333H298.667V640M128 810.667h768V896H128v-85.333z',
+  unordered:
+    'M298.667 213.333v85.334H896v-85.334M298.667 554.667H896v-85.334H298.667m0 341.334H896v-85.334H298.667m-128-14.08c-31.574 0-56.747 25.6-56.747 56.747s25.6 56.747 56.747 56.747c31.146 0 56.746-25.6 56.746-56.747s-25.173-56.747-56.746-56.747m0-519.253c-35.414 0-64 28.587-64 64s28.586 64 64 64c35.413 0 64-28.587 64-64s-28.587-64-64-64m0 256c-35.414 0-64 28.587-64 64s28.586 64 64 64c35.413 0 64-28.587 64-64s-28.587-64-64-64z',
+  right:
+    'M128 128h768v85.333H128V128m256 170.667h512V384H384v-85.333M128 469.333h768v85.334H128v-85.334M384 640h512v85.333H384V640M128 810.667h768V896H128v-85.333z'
+}

src/layer/index.js

@@ -377,9 +377,11 @@ class Layer extends Component {
     this.#play()
   }
 
-  updated() {
+  updated(props, force) {
+    if (force) {
       this.#play()
     }
+  }
 
   moveTo(obj = {}) {
     var css = ''
@@ -524,7 +526,7 @@ function layer(opt = {}) {
     tmp.innerHTML = content
 
     layDom.appendChild(tmp.content.cloneNode(true))
-    layDom.updated()
+    layDom.updated(null, true)
   } else {
     layDom.innerHTML = content
     document.body.appendChild(layDom)