From 4724bc04e903a374f9568da5df8e920682048711 Mon Sep 17 00:00:00 2001 From: zhengyi Date: Tue, 16 Jan 2024 20:43:53 +0800 Subject: [PATCH] :sparkles: Add quick insert for gallery https://github.com/justice2001/halo-plugin-vditor/issues/15 https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/issues/45 --- console/src/i18n/en-US.ts | 7 +++ console/src/i18n/zh-CN.ts | 7 +++ console/src/i18n/zh-TW.ts | 7 +++ console/src/model/TemplateModal.vue | 7 ++- console/src/schema/gallery.ts | 83 +++++++++++++++++++++++++++++ console/src/type/editor.d.ts | 6 ++- console/src/utils/vditor-utils.ts | 6 +++ 7 files changed, 120 insertions(+), 3 deletions(-) create mode 100644 console/src/schema/gallery.ts diff --git a/console/src/i18n/en-US.ts b/console/src/i18n/en-US.ts index 648a8aa..628583d 100644 --- a/console/src/i18n/en-US.ts +++ b/console/src/i18n/en-US.ts @@ -24,6 +24,13 @@ const lang: I18nLang = { link: "Link", password: "Password", 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; diff --git a/console/src/i18n/zh-CN.ts b/console/src/i18n/zh-CN.ts index e7698a8..d72b13b 100644 --- a/console/src/i18n/zh-CN.ts +++ b/console/src/i18n/zh-CN.ts @@ -24,6 +24,13 @@ const lang: I18nLang = { link: "链接", password: "密码", quick_insert: "快速插入", + insert_gallery: "插入图集", + grid: "九宫格", + linear: "线性", + image_group: "图片组", + image: "图片", + image_alt: "图片介绍", + image_alt_ph: "不填写此项则默认使用图像文件名", }; export default lang; diff --git a/console/src/i18n/zh-TW.ts b/console/src/i18n/zh-TW.ts index f165317..3d7c4d8 100644 --- a/console/src/i18n/zh-TW.ts +++ b/console/src/i18n/zh-TW.ts @@ -24,6 +24,13 @@ const lang: I18nLang = { link: "鏈接", password: "密碼", quick_insert: "快速插入", + insert_gallery: "插入圖集", + grid: "九宮格", + linear: "線性", + image_group: "圖片組", + image: "圖片", + image_alt: "圖片介紹", + image_alt_ph: "不填寫此項則默認使用影像檔名", }; export default lang; diff --git a/console/src/model/TemplateModal.vue b/console/src/model/TemplateModal.vue index dccc58f..dd69e1a 100644 --- a/console/src/model/TemplateModal.vue +++ b/console/src/model/TemplateModal.vue @@ -31,8 +31,11 @@ const generateCode = () => { emit("done", htmlEncode(code)); 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重载 diff --git a/console/src/schema/gallery.ts b/console/src/schema/gallery.ts new file mode 100644 index 0000000..21dd527 --- /dev/null +++ b/console/src/schema/gallery.ts @@ -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; diff --git a/console/src/type/editor.d.ts b/console/src/type/editor.d.ts index 6a79c54..6611ff3 100644 --- a/console/src/type/editor.d.ts +++ b/console/src/type/editor.d.ts @@ -22,7 +22,11 @@ export interface Schema { // 解析后处理 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 { diff --git a/console/src/utils/vditor-utils.ts b/console/src/utils/vditor-utils.ts index 8ff25e0..9d32817 100644 --- a/console/src/utils/vditor-utils.ts +++ b/console/src/utils/vditor-utils.ts @@ -4,6 +4,7 @@ import { t } from "@/utils/i18n-utils"; import tips from "@/schema/tips"; import git from "@/schema/git"; import drive from "@/schema/drive"; +import gallery from "@/schema/gallery"; export function getOptions(options: Options): IOptions { const cdn = @@ -141,6 +142,11 @@ function getToolbar( icon: t("insert_drive"), click: () => openModal(drive), }, + { + name: "insert_gallery", + icon: t("insert_gallery"), + click: () => openModal(gallery), + }, ], }, {