From 8db4cec91efd1664a24bd63104192382fa40946c Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 28 Jun 2023 17:54:11 +0800 Subject: [PATCH] feat: add support for inserting external media resources to the default editor (#4126) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind feature /area console /area editor /milestone 2.7.x #### What this PR does / why we need it: 默认编辑器支持直接插入图片、视频、音频，提供除了附件库的媒体插入入口。 image 通过链接插入图片需要 https://github.com/halo-sigs/richtext-editor/pull/17 的支持。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/3882 Fixes https://github.com/halo-dev/halo/issues/3994 #### Special notes for your reviewer: 测试编辑器通过链接插入图片、视频、音频的功能是否正常。 #### Does this PR introduce a user-facing change? ```release-note 默认编辑器支持不通过附件库直接插入图片、视频、音频。 ``` --- .../src/components/editor/DefaultEditor.vue | 66 ++++++++++++++++++- console/src/locales/en.yaml | 4 ++ console/src/locales/zh-CN.yaml | 4 ++ console/src/locales/zh-TW.yaml | 4 ++ 4 files changed, 77 insertions(+), 1 deletion(-) diff --git a/console/src/components/editor/DefaultEditor.vue b/console/src/components/editor/DefaultEditor.vue index 66c6aeaf9..bc89c5fc5 100644 --- a/console/src/components/editor/DefaultEditor.vue +++ b/console/src/components/editor/DefaultEditor.vue @@ -36,10 +36,12 @@ import { lowlight, type AnyExtension, Editor, + ToolbarSubItem, } from "@halo-dev/richtext-editor"; import { IconCalendar, IconCharacterRecognition, + IconFolder, IconLink, IconUserFollow, Toast, @@ -49,6 +51,9 @@ import { import AttachmentSelectorModal from "@/modules/contents/attachments/components/AttachmentSelectorModal.vue"; import ExtensionCharacterCount from "@tiptap/extension-character-count"; import MdiFileImageBox from "~icons/mdi/file-image-box"; +import MdiVideoPlusOutline from "~icons/mdi/video-plus-outline"; +import MdiImagePlusOutline from "~icons/mdi/image-plus-outline"; +import MdiVolume from "~icons/mdi/volume"; import MdiFormatHeader1 from "~icons/mdi/format-header-1"; import MdiFormatHeader2 from "~icons/mdi/format-header-2"; import MdiFormatHeader3 from "~icons/mdi/format-header-3"; @@ -221,8 +226,67 @@ onMounted(() => { title: i18n.global.t( "core.components.default_editor.toolbar.attachment" ), - action: () => (attachmentSelectorModal.value = true), }, + children: [ + { + priority: 10, + component: ToolbarSubItem, + props: { + editor, + isActive: false, + icon: markRaw(IconFolder), + title: i18n.global.t( + "core.components.default_editor.toolbar.select_attachment" + ), + action: () => (attachmentSelectorModal.value = true), + }, + }, + { + priority: 20, + component: ToolbarSubItem, + props: { + editor, + isActive: false, + icon: markRaw(MdiImagePlusOutline), + title: i18n.global.t( + "core.components.default_editor.toolbar.insert_image" + ), + action: () => { + editor.chain().focus().setImage({ src: "" }).run(); + }, + }, + }, + { + priority: 30, + component: ToolbarSubItem, + props: { + editor, + isActive: false, + icon: markRaw(MdiVideoPlusOutline), + title: i18n.global.t( + "core.components.default_editor.toolbar.insert_video" + ), + action: () => { + editor.chain().focus().setVideo({ src: "" }).run(); + }, + }, + }, + { + priority: 40, + component: ToolbarSubItem, + props: { + editor, + isActive: false, + icon: markRaw(MdiVolume), + title: i18n.global.t( + "core.components.default_editor.toolbar.insert_audio" + ), + action: () => { + editor.chain().focus().setAudio({ src: "" }).run(); + }, + }, + }, + ], }; }, }; diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml index 252c293c2..1c7158c89 100644 --- a/console/src/locales/en.yaml +++ b/console/src/locales/en.yaml @@ -1076,6 +1076,10 @@ core: placeholder: "Enter / to select input type." toolbar: attachment: Insert attachment + select_attachment: Attachments library + insert_image: Insert image + insert_video: Insert video + insert_audio: Insert audio upload_attachment: toast: no_available_policy: There is currently no available storage policy diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml index 61d7922e4..ee0644ecb 100644 --- a/console/src/locales/zh-CN.yaml +++ b/console/src/locales/zh-CN.yaml @@ -1076,6 +1076,10 @@ core: placeholder: "输入 / 以选择输入类型" toolbar: attachment: 插入附件 + select_attachment: 从附件库选择 + insert_image: 从外链插入图片 + insert_video: 从外链插入视频 + insert_audio: 从外链插入音频 upload_attachment: toast: no_available_policy: 目前没有可用的存储策略 diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml index 46ece699b..3775163b4 100644 --- a/console/src/locales/zh-TW.yaml +++ b/console/src/locales/zh-TW.yaml @@ -1076,6 +1076,10 @@ core: placeholder: "輸入 / 以選擇輸入類型" toolbar: attachment: 插入附件 + select_attachment: 從附件庫選擇 + insert_image: 從外部連結插入圖片 + insert_video: 從外部連結插入影片 + insert_audio: 從外部連結插入音訊 upload_attachment: toast: no_available_policy: 目前沒有可用的存儲策略