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
+```