From 7f8cee92ad41554211bbc98125420a5f336fdcd4 Mon Sep 17 00:00:00 2001 From: aolinpk <2755561608@qq.com> Date: Mon, 3 Jun 2024 17:41:29 +0800 Subject: [PATCH] =?UTF-8?q?feat(md):=20MarkdownMD=20=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=B7=A5=E5=85=B7=E6=A0=8F=20#1862?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor-md/src/components/toolbar.tsx | 8 +- .../src/composables/use-editor-md-toolbar.ts | 4 +- .../src/composables/use-editor-md.ts | 2 + .../devui/editor-md/src/editor-md-types.ts | 1 + .../devui/editor-md/src/editor-md.tsx | 2 + .../devui-vue/devui/editor-md/src/utils.ts | 2 +- .../docs/components/editor-md/index.md | 81 ++++++++++++++++++- 7 files changed, 92 insertions(+), 8 deletions(-) diff --git a/packages/devui-vue/devui/editor-md/src/components/toolbar.tsx b/packages/devui-vue/devui/editor-md/src/components/toolbar.tsx index b0f19946c1..1939527b1f 100644 --- a/packages/devui-vue/devui/editor-md/src/components/toolbar.tsx +++ b/packages/devui-vue/devui/editor-md/src/components/toolbar.tsx @@ -6,20 +6,20 @@ import './toolbar.scss'; export default defineComponent({ name: 'DMdToolbar', setup() { - const { toolbars, toolbarConfig } = useToolbar(); - + const { toolbars, toolbarConfig, customToolbars } = useToolbar(); + const tempToolbars = { ...toolbars, ...customToolbars?.value }; return () => (
{toolbarConfig.value.map((item, index) => Array.isArray(item) ? ( <> {item.map((key, idx) => ( - + ))} ) : ( - + ) )}
diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts index 7e823c44f7..3c8c6bba69 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts @@ -2,7 +2,7 @@ import { inject } from 'vue'; import { EditorMdInjectionKey, IEditorMdInjection } from '../editor-md-types'; export function useToolbar() { - const { toolbars, toolbarConfig } = inject(EditorMdInjectionKey) as IEditorMdInjection; + const { toolbars, toolbarConfig, customToolbars } = inject(EditorMdInjectionKey) as IEditorMdInjection; - return { toolbars, toolbarConfig }; + return { toolbars, toolbarConfig, customToolbars }; } diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index 72b8925632..65d0c0a00e 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts @@ -414,8 +414,10 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { renderRef, containerRef, toolbars, + toolbarConfig, previewHtmlList, isHintShow, + customToolbars, getEditorIns, onPaste, previewContentChange, diff --git a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts index c6b4fa3b4e..9598190711 100644 --- a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts +++ b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts @@ -136,6 +136,7 @@ export interface IEditorMdInjection { showFullscreen: Ref; toolbars: Record; toolbarConfig: Ref; + customToolbars: Ref | undefined> | undefined; getEditorIns: () => any; t: (name: string) => string; } diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx index 662a6a6398..1d2b2cff30 100644 --- a/packages/devui-vue/devui/editor-md/src/editor-md.tsx +++ b/packages/devui-vue/devui/editor-md/src/editor-md.tsx @@ -17,6 +17,7 @@ export default defineComponent({ const { mode, toolbarConfig, + customToolbars, editorContainerHeight, hidePreviewView, placeholder, @@ -66,6 +67,7 @@ export default defineComponent({ showFullscreen, toolbars, toolbarConfig, + customToolbars, getEditorIns, t: locale, }); diff --git a/packages/devui-vue/devui/editor-md/src/utils.ts b/packages/devui-vue/devui/editor-md/src/utils.ts index 05acbc88fc..a3ffb3be3f 100644 --- a/packages/devui-vue/devui/editor-md/src/utils.ts +++ b/packages/devui-vue/devui/editor-md/src/utils.ts @@ -84,5 +84,5 @@ export function locale(key: string): string { loading: '正在加载中...', pasting: '您粘贴内容较多, 正在努力加载中，请耐心等待...', }; - return localeMap[key]; + return localeMap[key] || key; } diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md index 9914367269..b4f9cf660e 100644 --- a/packages/devui-vue/docs/components/editor-md/index.md +++ b/packages/devui-vue/docs/components/editor-md/index.md @@ -88,6 +88,64 @@ export default defineComponent({ }); ``` +::: + +### 自定义工具栏 + +:::demo 自定义编辑器的工具栏 + +```vue + + + +``` ::: @@ -629,7 +687,9 @@ Bob-->>John: Jolly good! | placeholder | `string` | '' | 编辑器无内容是的提示信息 | | fullscreen-z-index | `number` | 10 | 编辑器全屏状态的 z-index | | image-upload-to-server | `boolean` | false | 是否打开图片自定义上传开关（打开后将将监听图片的复制，toolbar 图片功能上传，传出事件回调） | -|editor-container-height|`number`|--|可选，编辑器内容区高度|| +| editor-container-height| `number`|--|可选，编辑器内容区高度 || +| toolbar-config | `Array(string)` |`[['undo', 'redo'],['h1', 'h2', 'bold', 'italic', 'strike', 'underline', 'color', 'font'],['ul', 'ol', 'checklist', 'code', 'link', 'image', 'table'],'fullscreen']`|展示在toolbar工具栏处的按钮，用[]包起来的表示是同一组，不同组的会有线隔开。也可以自定义，自定义时需要配置参数custom-toolbars || +| custom-toolbars | {[IToolbarItemConfig](#itoolbaritemconfig)} |--|配置toolbar-config中对应按钮的具体设置 [自定义工具栏](#自定义工具栏) | | ### EditorMd 事件 @@ -696,3 +756,22 @@ export interface HintConfig { [key: string]: HintConfigItem; // key为触发提示前缀配置 } ``` + + +### IToolbarItemConfig +```ts +export interface IToolbarItemConfig { + id: string; + name?: string; + exitName?: string; + type?: 'button' | 'dropDown'; + icon?: string; + exitIcon?: string; + template?: any; + component?: any; + shortKey?: string; + params?: { [key: string]: any }; + handler?(editor?: any, params?: any): void; +} +const toolbars = Record +```