✨ Add quick insert for gallery
https://github.com/justice2001/halo-plugin-vditor/issues/15 #45
This commit is contained in:
parent
49ab197ffb
commit
4724bc04e9
|
@ -24,6 +24,13 @@ const lang: I18nLang = {
|
||||||
link: "Link",
|
link: "Link",
|
||||||
password: "Password",
|
password: "Password",
|
||||||
quick_insert: "Quick Insert",
|
quick_insert: "Quick Insert",
|
||||||
|
insert_gallery: "Insert Gallery",
|
||||||
|
grid: "Grid",
|
||||||
|
linear: "Linear",
|
||||||
|
image_group: "Image Group",
|
||||||
|
image: "Image",
|
||||||
|
image_alt: "Alt",
|
||||||
|
image_alt_ph: "Use File Name If You Dont Place This",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default lang;
|
export default lang;
|
||||||
|
|
|
@ -24,6 +24,13 @@ const lang: I18nLang = {
|
||||||
link: "链接",
|
link: "链接",
|
||||||
password: "密码",
|
password: "密码",
|
||||||
quick_insert: "快速插入",
|
quick_insert: "快速插入",
|
||||||
|
insert_gallery: "插入图集",
|
||||||
|
grid: "九宫格",
|
||||||
|
linear: "线性",
|
||||||
|
image_group: "图片组",
|
||||||
|
image: "图片",
|
||||||
|
image_alt: "图片介绍",
|
||||||
|
image_alt_ph: "不填写此项则默认使用图像文件名",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default lang;
|
export default lang;
|
||||||
|
|
|
@ -24,6 +24,13 @@ const lang: I18nLang = {
|
||||||
link: "鏈接",
|
link: "鏈接",
|
||||||
password: "密碼",
|
password: "密碼",
|
||||||
quick_insert: "快速插入",
|
quick_insert: "快速插入",
|
||||||
|
insert_gallery: "插入圖集",
|
||||||
|
grid: "九宮格",
|
||||||
|
linear: "線性",
|
||||||
|
image_group: "圖片組",
|
||||||
|
image: "圖片",
|
||||||
|
image_alt: "圖片介紹",
|
||||||
|
image_alt_ph: "不填寫此項則默認使用影像檔名",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default lang;
|
export default lang;
|
||||||
|
|
|
@ -31,8 +31,11 @@ const generateCode = () => {
|
||||||
emit("done", htmlEncode(code));
|
emit("done", htmlEncode(code));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
props.schema.handler && props.schema.handler(data.value);
|
|
||||||
emit("done", null);
|
emit(
|
||||||
|
"done",
|
||||||
|
(props.schema.handler && props.schema.handler(data.value)) || null
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 修改FormKit ID来实现Schema重载
|
// 修改FormKit ID来实现Schema重载
|
||||||
|
|
|
@ -0,0 +1,83 @@
|
||||||
|
import type { Schema, SchemaData } from "@/type/editor";
|
||||||
|
import { t } from "@/utils/i18n-utils";
|
||||||
|
|
||||||
|
const schema: Schema = {
|
||||||
|
type: "template",
|
||||||
|
id: "gallery",
|
||||||
|
icon: "",
|
||||||
|
name: t("insert_gallery"),
|
||||||
|
formKit: [
|
||||||
|
{
|
||||||
|
$formkit: "select",
|
||||||
|
name: "type",
|
||||||
|
label: t("type"),
|
||||||
|
value: "grid",
|
||||||
|
options: {
|
||||||
|
grid: t("grid"),
|
||||||
|
linear: t("linear"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
$formkit: "text",
|
||||||
|
name: "title",
|
||||||
|
label: t("title"),
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
$formkit: "repeater",
|
||||||
|
name: "attachments",
|
||||||
|
label: t("image_group"),
|
||||||
|
min: 1,
|
||||||
|
value: [{}],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
$formkit: "attachment",
|
||||||
|
name: "attachment",
|
||||||
|
label: t("image"),
|
||||||
|
accepts: ["image/*"],
|
||||||
|
value: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
$formkit: "text",
|
||||||
|
name: "attach_title",
|
||||||
|
label: t("image_alt"),
|
||||||
|
value: "",
|
||||||
|
placeholder: t("image_alt_ph"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
handler: (data: SchemaData) => {
|
||||||
|
// title type list[]
|
||||||
|
const galleryData = data as GallerySchemaData;
|
||||||
|
let html = `\`\`\`halo\ngallery:${galleryData.type}`;
|
||||||
|
if (galleryData.title) {
|
||||||
|
html += `[${galleryData.title}]`;
|
||||||
|
}
|
||||||
|
html += "\n";
|
||||||
|
galleryData.attachments?.forEach((att) => {
|
||||||
|
let title = "";
|
||||||
|
if (att.attach_title) {
|
||||||
|
title = att.attach_title;
|
||||||
|
} else {
|
||||||
|
const start = att.attachment.lastIndexOf("/");
|
||||||
|
const end = att.attachment.lastIndexOf(".");
|
||||||
|
title = att.attachment.slice(start, end);
|
||||||
|
}
|
||||||
|
html += `![${title}](${att.attachment})\n`;
|
||||||
|
});
|
||||||
|
html += "```";
|
||||||
|
return html;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface GallerySchemaData extends SchemaData {
|
||||||
|
title: string;
|
||||||
|
type: "grid" | "linear";
|
||||||
|
attachments: Array<{
|
||||||
|
attachment: string;
|
||||||
|
attach_title?: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default schema;
|
|
@ -22,7 +22,11 @@ export interface Schema {
|
||||||
// 解析后处理
|
// 解析后处理
|
||||||
afterHandle?: (data: { [key: string]: string }, code: string) => string;
|
afterHandle?: (data: { [key: string]: string }, code: string) => string;
|
||||||
// 覆盖解析
|
// 覆盖解析
|
||||||
handler?: (data: { [key: string]: string }) => string;
|
handler?: (data: SchemaData) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SchemaData {
|
||||||
|
_id?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface QuickInsert {
|
export interface QuickInsert {
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { t } from "@/utils/i18n-utils";
|
||||||
import tips from "@/schema/tips";
|
import tips from "@/schema/tips";
|
||||||
import git from "@/schema/git";
|
import git from "@/schema/git";
|
||||||
import drive from "@/schema/drive";
|
import drive from "@/schema/drive";
|
||||||
|
import gallery from "@/schema/gallery";
|
||||||
|
|
||||||
export function getOptions(options: Options): IOptions {
|
export function getOptions(options: Options): IOptions {
|
||||||
const cdn =
|
const cdn =
|
||||||
|
@ -141,6 +142,11 @@ function getToolbar(
|
||||||
icon: t("insert_drive"),
|
icon: t("insert_drive"),
|
||||||
click: () => openModal(drive),
|
click: () => openModal(drive),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "insert_gallery",
|
||||||
|
icon: t("insert_gallery"),
|
||||||
|
click: () => openModal(gallery),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue