@vuux/editor
Version:
Vue Nuxt 富文本编辑器
408 lines (407 loc) • 14.4 kB
JavaScript
import { defineComponent as N, ref as U, createElementBlock as b, openBlock as f, createElementVNode as l, createCommentVNode as q, createVNode as i, unref as e, Transition as a, withCtx as k, withDirectives as r, vShow as p, Fragment as D, renderList as P, toDisplayString as X, vModelText as g, normalizeStyle as j } from "vue";
import o from "../Icon.vue.mjs";
import M from "./color.vue.mjs";
import { Utils as z } from "@vuux/utils";
import { useTop as G } from "./hook/useTop.mjs";
const J = { class: "top-select is-color" }, K = { class: "top-select" }, O = ["onClick"], Q = { class: "top-select" }, R = { class: "top-select" }, W = { class: "top-select" }, Y = { class: "top-select is-table" }, Z = { class: "editor-add-table" }, c = { class: "table-value" }, _ = { class: "top-select is-image" }, h = { class: "editor-add-image" }, nn = { class: "is-url" }, ln = ["id", "name"], un = /* @__PURE__ */ N({
__name: "top",
props: {
markdownActions: {},
action: {},
headers: {},
uploadName: {}
},
emits: ["success", "error", "full"],
setup(x, { emit: E }) {
const s = x, $ = U(null), A = U(null), L = E, T = ["", "一级标题", "二级标题", "三级标题", "四级标题", "五级标题", "六级标题"], { state: d, dropdowns: m, toggleDropdown: u, onColor: F, handleSelectHeading: H, handleSelectePanelValue: v, handleSelectSizeValue: C, handleSelectListValue: w, handleInsertImage: y, handleFileChange: S, handleFileUpload: I, handeInsertTable: V, handleFull: B } = G(s, $, A, L);
return (tn, n) => (f(), b("div", {
ref_key: "topEl",
ref: $,
class: "editor-top"
}, [
l("ul", null, [
l("li", null, [
l("button", {
onClick: n[0] || (n[0] = (t) => e(u)("color"))
}, [
i(o, { name: "color" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", J, [
i(M, {
modelValue: e(d).color,
"onUpdate:modelValue": n[1] || (n[1] = (t) => e(d).color = t),
onClose: e(F)
}, null, 8, ["modelValue", "onClose"])
], 512), [
[p, e(m).color]
])
]),
_: 1
})
]),
l("li", null, [
l("button", {
onClick: n[2] || (n[2] = (t) => e(u)("heading"))
}, [
i(o, { name: "hh1" }),
i(o, { name: "arrow" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", K, [
(f(), b(D, null, P(4, (t) => l("div", {
key: t,
onClick: (en) => e(H)(t),
class: "select-item"
}, [
i(o, {
name: `hh${t}`
}, null, 8, ["name"]),
l("p", null, X(T[t]), 1)
], 8, O)), 64))
], 512), [
[p, e(m).heading]
])
]),
_: 1
})
]),
l("li", null, [
l("button", {
onClick: n[3] || (n[3] = (t) => e(u)("panel"))
}, [
i(o, { name: "tips" }),
i(o, { name: "arrow" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", Q, [
l("div", {
class: "select-item",
onClick: n[4] || (n[4] = (t) => e(v)("primary"))
}, [...n[41] || (n[41] = [
l("p", null, "默认提示", -1)
])]),
l("div", {
class: "select-item",
onClick: n[5] || (n[5] = (t) => e(v)("warning"))
}, [...n[42] || (n[42] = [
l("p", null, "警告提示", -1)
])]),
l("div", {
class: "select-item",
onClick: n[6] || (n[6] = (t) => e(v)("danger"))
}, [...n[43] || (n[43] = [
l("p", null, "危险提示", -1)
])]),
l("div", {
class: "select-item",
onClick: n[7] || (n[7] = (t) => e(v)("success"))
}, [...n[44] || (n[44] = [
l("p", null, "成功提示", -1)
])])
], 512), [
[p, e(m).panel]
])
]),
_: 1
})
]),
l("li", null, [
l("button", {
onClick: n[8] || (n[8] = (t) => e(u)("size"))
}, [
i(o, { name: "size" }),
i(o, { name: "arrow" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", R, [
l("div", {
class: "select-item",
onClick: n[9] || (n[9] = (t) => e(C)(10))
}, [
i(o, { name: "sizeXs" })
]),
l("div", {
class: "select-item",
onClick: n[10] || (n[10] = (t) => e(C)(13))
}, [
i(o, { name: "sizeSmall" })
]),
l("div", {
class: "select-item",
onClick: n[11] || (n[11] = (t) => e(C)(16))
}, [
i(o, { name: "sizeL" })
]),
l("div", {
class: "select-item",
onClick: n[12] || (n[12] = (t) => e(C)(20))
}, [
i(o, { name: "sizeXl" })
])
], 512), [
[p, e(m).size]
])
]),
_: 1
})
]),
l("li", null, [
l("button", {
onClick: n[13] || (n[13] = //@ts-ignore
(...t) => s.markdownActions.insertBold && s.markdownActions.insertBold(...t))
}, [
i(o, { name: "bold" })
])
]),
l("li", null, [
l("button", {
onClick: n[14] || (n[14] = //@ts-ignore
(...t) => s.markdownActions.insertUnderline && s.markdownActions.insertUnderline(...t))
}, [
i(o, { name: "underline" })
])
]),
l("li", null, [
l("button", {
onClick: n[15] || (n[15] = //@ts-ignore
(...t) => s.markdownActions.insertItalic && s.markdownActions.insertItalic(...t))
}, [
i(o, { name: "italic" })
])
]),
l("li", null, [
l("button", {
onClick: n[16] || (n[16] = //@ts-ignore
(...t) => s.markdownActions.insertStrike && s.markdownActions.insertStrike(...t))
}, [
i(o, { name: "dels" })
])
]),
l("li", null, [
l("button", {
onClick: n[17] || (n[17] = //@ts-ignore
(...t) => s.markdownActions.insertBlockquote && s.markdownActions.insertBlockquote(...t))
}, [
i(o, { name: "blockquotes" })
])
]),
l("li", null, [
l("button", {
onClick: n[18] || (n[18] = //@ts-ignore
(...t) => s.markdownActions.insertPinyin && s.markdownActions.insertPinyin(...t))
}, [
i(o, { name: "pinyin" })
])
]),
l("li", null, [
l("button", {
onClick: n[19] || (n[19] = //@ts-ignore
(...t) => s.markdownActions.insertHr && s.markdownActions.insertHr(...t))
}, [
i(o, { name: "hr" })
])
]),
l("li", null, [
l("button", {
onClick: n[20] || (n[20] = (t) => s.markdownActions.insertAlignBlock("left"))
}, [
i(o, { name: "left" })
])
]),
l("li", null, [
l("button", {
onClick: n[21] || (n[21] = (t) => s.markdownActions.insertAlignBlock("center"))
}, [
i(o, { name: "center" })
])
]),
l("li", null, [
l("button", {
onClick: n[22] || (n[22] = (t) => s.markdownActions.insertAlignBlock("right"))
}, [
i(o, { name: "right" })
])
]),
l("li", null, [
l("button", {
onClick: n[23] || (n[23] = (t) => s.markdownActions.insertHtmlBlock(1))
}, [
i(o, { name: "details" })
])
]),
l("li", null, [
l("button", {
onClick: n[24] || (n[24] = (t) => e(u)("list"))
}, [
i(o, { name: "unordered" }),
i(o, { name: "arrow" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", W, [
l("div", {
class: "select-item",
onClick: n[25] || (n[25] = (t) => e(w)("unordered"))
}, [
i(o, { name: "unordered" }),
n[45] || (n[45] = l("p", null, "无序列表", -1))
]),
l("div", {
class: "select-item",
onClick: n[26] || (n[26] = (t) => e(w)("ordered"))
}, [
i(o, { name: "ordered" }),
n[46] || (n[46] = l("p", null, "有序列表", -1))
]),
l("div", {
class: "select-item",
onClick: n[27] || (n[27] = (t) => e(w)("task"))
}, [
i(o, { name: "task" }),
n[47] || (n[47] = l("p", null, "任务列表", -1))
])
], 512), [
[p, e(m).list]
])
]),
_: 1
})
]),
l("li", null, [
l("button", {
onClick: n[28] || (n[28] = //@ts-ignore
(...t) => s.markdownActions.insertInlineCode && s.markdownActions.insertInlineCode(...t))
}, [
i(o, { name: "lineCode" })
])
]),
l("li", null, [
l("button", {
onClick: n[29] || (n[29] = (t) => s.markdownActions.insertCodeBlock("javascript"))
}, [
i(o, { name: "codes" })
])
]),
l("li", null, [
l("button", {
onClick: n[30] || (n[30] = //@ts-ignore
(...t) => s.markdownActions.insertLink && s.markdownActions.insertLink(...t))
}, [
i(o, { name: "links" })
])
]),
l("li", null, [
l("button", {
onClick: n[31] || (n[31] = (t) => e(u)("table"))
}, [
i(o, { name: "tables" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", Y, [
l("div", Z, [
l("div", c, [
n[48] || (n[48] = l("div", { class: "is-title" }, "行数", -1)),
r(l("input", {
type: "text",
"onUpdate:modelValue": n[32] || (n[32] = (t) => e(d).rows = t),
class: "is-table-input"
}, null, 512), [
[g, e(d).rows]
]),
n[49] || (n[49] = l("div", { class: "is-title" }, "列数", -1)),
r(l("input", {
type: "text",
"onUpdate:modelValue": n[33] || (n[33] = (t) => e(d).cols = t),
class: "is-table-input"
}, null, 512), [
[g, e(d).cols]
])
]),
l("p", {
onClick: n[34] || (n[34] = //@ts-ignore
(...t) => e(V) && e(V)(...t))
}, "确定")
])
], 512), [
[p, e(m).table]
])
]),
_: 1
})
]),
n[52] || (n[52] = l("li", { class: "is-line" }, null, -1)),
l("li", null, [
l("button", {
onClick: n[35] || (n[35] = (t) => e(u)("image"))
}, [
i(o, { name: "image" })
]),
i(a, { name: "tooltip" }, {
default: k(() => [
r(l("div", _, [
l("div", h, [
n[50] || (n[50] = l("div", { class: "is-title" }, "图片地址", -1)),
l("div", nn, [
r(l("input", {
type: "text",
id: e(z).snowflakeId().toString(),
name: e(z).snowflakeId().toString(),
"onUpdate:modelValue": n[36] || (n[36] = (t) => e(d).imageUrl = t)
}, null, 8, ln), [
[g, e(d).imageUrl]
]),
l("p", {
onClick: n[37] || (n[37] = //@ts-ignore
(...t) => e(y) && e(y)(...t))
}, "确定")
]),
n[51] || (n[51] = l("div", { class: "is-title" }, "图片上传", -1)),
l("div", {
class: "is-upload",
onClick: n[38] || (n[38] = //@ts-ignore
(...t) => e(S) && e(S)(...t))
}, "上传图片"),
l("input", {
ref_key: "fileInputEl",
ref: A,
type: "file",
accept: "image/*",
onChange: n[39] || (n[39] = //@ts-ignore
(...t) => e(I) && e(I)(...t))
}, null, 544)
])
], 512), [
[p, e(m).image]
])
]),
_: 1
})
])
]),
l("ul", null, [
l("li", null, [
l("button", {
onClick: n[40] || (n[40] = //@ts-ignore
(...t) => e(B) && e(B)(...t))
}, [
i(o, { name: "full" })
])
])
]),
e(d).isUploadIng ? (f(), b("div", {
key: 0,
class: "editor-upload-percent",
style: j(`width: ${e(d).percent}%`)
}, null, 4)) : q("", !0)
], 512));
}
});
export {
un as default
};