@vuux/editor
Version:
Vue Nuxt 富文本编辑器
114 lines (113 loc) • 3 kB
JavaScript
import { reactive as f } from "vue";
import i from "../message.mjs";
import { Utils as d } from "@vuux/utils";
import { UploadRequest as N } from "../../hook/useAjax.mjs";
const P = (a, u, r, t) => {
const s = f({
//默认颜色
color: "#339af0",
//是否正在进行上传
isUploadIng: !1,
//上传进度百分比
percent: 0,
//图片地址
imageUrl: "",
//列表行数
rows: 2,
//列表列数
cols: 3,
//是否全屏
isFull: !1
}), l = f({
color: !1,
heading: !1,
size: !1,
panel: !1,
list: !1,
image: !1,
table: !1
}), g = () => {
for (const e in l)
l[e] = !1;
}, m = (e) => {
const n = l[e];
g(), l[e] = !n;
}, w = () => {
a.markdownActions.insertColor(s.color), l.color = !1;
}, h = (e) => {
a.markdownActions.insertHeading(e), l.heading = !1;
}, U = (e) => {
a.markdownActions.insertPanel(e), l.panel = !1;
}, p = (e) => {
a.markdownActions.insertFontSize(e), l.size = !1;
}, b = (e) => {
a.markdownActions.insertList(e), l.list = !1;
}, k = () => {
const e = s.imageUrl.trim();
if (!/^https?:\/\/.+\.(png|jpe?g|gif|svg|webp|bmp|ico)$/i.test(e)) {
i.error("请输入正确的图片地址");
return;
}
a.markdownActions.insertImage(e), l.image = !1, s.imageUrl = "";
}, F = () => {
const e = r.value;
e && e.click();
}, I = () => {
const e = r.value;
if (!e || !e.files || !e.files.length) {
l.image = !1;
return;
}
const n = e.files[0];
s.isUploadIng = !0, l.image = !1, N({
uid: Date.now().toString(),
uploadUrl: a.action || "",
selectedFile: n,
//自定义请求头
headers: a.headers,
name: a.uploadName || "file",
onSuccess: (c, o) => {
t("success", o, n.name), e.value = "", s.isUploadIng = !1;
},
onError: async (c, o) => {
t("error", o), e.value = "", await d.wait(200), s.isUploadIng = !1;
},
onProgress: (c, o) => {
s.percent = o;
}
});
}, A = () => {
const e = Number(s.rows), n = Number(s.cols);
if (isNaN(e) || e < 1 || e > 20) {
i.error("行数必须为1-20的整数");
return;
}
if (isNaN(n) || n < 1 || n > 20) {
i.error("列数必须为1-20的整数");
return;
}
a.markdownActions.insertTable(e, n), l.table = !1, s.rows = 2, s.cols = 3;
}, S = () => {
s.isFull = !s.isFull, t("full", s.isFull);
};
return d.useClickOutside(u, () => {
l.color = !1, l.heading = !1, l.size = !1, l.panel = !1, l.list = !1, l.image = !1, l.table = !1, s.imageUrl = "";
}), {
state: s,
dropdowns: l,
toggleDropdown: m,
onColor: w,
handleSelectHeading: h,
handleSelectePanelValue: U,
handleSelectSizeValue: p,
handleSelectListValue: b,
handleInsertImage: k,
handleFileChange: F,
handleFileUpload: I,
handeInsertTable: A,
handleFull: S
};
};
export {
P as useTop
};