@vuux/editor/dist/es/src/index.vue.mjs

Vue Nuxt 富文本编辑器

import { defineComponent as N, useTemplateRef as p, createElementBlock as q, openBlock as H, normalizeStyle as n, normalizeClass as S, unref as e, createVNode as C, createElementVNode as l, withDirectives as F, isRef as L, vModelText as T } from "vue";
import A from "./component/top.vue.mjs";
import { useMarkdown as B } from "./hook/useMarkdown.mjs";
import { Utils as I } from "@vuux/utils";
import { useMethod as V } from "./hook/useMethod.mjs";
const D = ["id", "name"], R = ["innerHTML"], G = /* @__PURE__ */ N({
  __name: "index",
  props: {
    theme: { default: () => ({
      color: "#339af0",
      backgroundColor: "#ffffff",
      textColor: "#596671"
    }) },
    height: { default: "100%" },
    action: {},
    headers: {},
    uploadName: { default: "file" }
  },
  emits: ["success", "error"],
  setup(v, { expose: w, emit: h }) {
    const a = v, g = h, s = I.snowflakeId().toString(), i = p("textareaEl"), d = p("contentEl"), { markdown: t, html: m, markdownActions: c } = B(i), { styles: k, isFull: x, leftWidth: E, rightWidth: M, startDrag: u, onSuccess: y, onError: z, onFull: _ } = V(a, d, g);
    return w({
      /**
       * 插入图片
       */
      insertImage: c.insertImage,
      /**
       * 写入Markdown文本
       */
      setMarkdown: (f) => {
        t.value = f;
      },
      /**
       * 获取Markdown文本
       */
      getMarkdown: () => t.value,
      /**
       * 获取渲染后的HTML文本
       */
      getHtml: () => m.value,
      /**
       * 清空Markdown文本
       */
      clearMarkdown: () => {
        t.value = "";
      }
    }), (f, o) => (H(), q("div", {
      class: S(["app-editor", { "is-full": e(x) }]),
      style: n(e(k))
    }, [
      C(A, {
        markdownActions: e(c),
        onSuccess: e(y),
        onError: e(z),
        onFull: e(_),
        action: a.action,
        headers: a.headers,
        uploadName: a.uploadName
      }, null, 8, ["markdownActions", "onSuccess", "onError", "onFull", "action", "headers", "uploadName"]),
      l("div", {
        ref_key: "contentEl",
        ref: d,
        class: "editor-content"
      }, [
        F(l("textarea", {
          ref_key: "textareaEl",
          ref: i,
          "onUpdate:modelValue": o[0] || (o[0] = (r) => L(t) ? t.value = r : null),
          id: e(s),
          name: e(s),
          class: "editor-left",
          style: n({ width: e(E) + "%" })
        }, null, 12, D), [
          [T, e(t)]
        ]),
        l("div", {
          class: "editor-resizer",
          onMousedown: o[1] || (o[1] = //@ts-ignore
          (...r) => e(u) && e(u)(...r))
        }, [...o[2] || (o[2] = [
          l("svg", {
            xmlns: "http://www.w3.org/2000/svg",
            opacity: "0.8",
            viewBox: "0 0 24 24"
          }, [
            l("g", { fill: "none" }, [
              l("path", { d: "m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" }),
              l("path", {
                fill: "var(--app-icon-color)",
                d: "M13 4a1 1 0 0 0-2 0v1a1 1 0 1 0 2 0zm0 5a1 1 0 0 0-2 0v1a1 1 0 1 0 2 0zm-1 4a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0v-1a1 1 0 0 1 1-1m1 6a1 1 0 0 0-2 0v1a1 1 0 1 0 2 0zm-7.414-8l1.121-1.121a1 1 0 1 0-1.414-1.414l-2.828 2.828a1 1 0 0 0 0 1.414l2.828 2.829a1 1 0 0 0 1.414-1.415L5.586 13H9a1 1 0 1 0 0-2zM14 12a1 1 0 0 1 1-1h3.414l-1.121-1.121a1 1 0 1 1 1.414-1.414l2.829 2.828a1 1 0 0 1 0 1.414l-2.829 2.829a1 1 0 0 1-1.414-1.415L18.414 13H15a1 1 0 0 1-1-1"
              })
            ])
          ], -1)
        ])], 32),
        l("div", {
          class: "editor-right",
          innerHTML: e(m),
          style: n({ width: e(M) + "%" })
        }, null, 12, R)
      ], 512)
    ], 6));
  }
});
export {
  G as default
};