配置

src/components/Editor/src/Editor.vue

@@ -18,7 +18,7 @@ i18nChangeLanguage(unref(currentLocale).lang)
 
 const props = defineProps({
   editorId: propTypes.string.def('wangeEditor-1'),
-  height: propTypes.oneOfType([Number, String]).def('500px'),
+  height: propTypes.oneOfType([Number, String]).def('40vh'),
   editorConfig: {
     type: Object as PropType<Partial<IEditorConfig>>,
     default: () => undefined
@@ -154,6 +154,23 @@ const editorStyle = computed(() => {
   }
 })
 
+const toolbarConfig = ref({
+  excludeKeys: [
+    'insertVideo', // 网络视频
+    'insertImage', // 网络图片
+    'insertLink', // 链接
+    'codeBlock', // 代码块
+    'headerSelect', // 标题
+    'blockquote', // 引用
+    'fontFamily', // 字体
+    'todo', // 代办
+    'group-indent', // 缩进
+    'emotion', // 表情
+    'undo', // 撤销
+    'redo' // 重做
+  ]
+})
+
 // 回调函数
 const handleChange = (editor: IDomEditor) => {
   emit('change', editor)
@@ -184,6 +201,7 @@ defineExpose({
     <Toolbar
       :editor="editorRef"
       :editorId="editorId"
+      :defaultConfig="toolbarConfig"
       class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]"
     />
     <!-- 编辑器 -->

src/components/Editor/src/README.md

@@ -0,0 +1,68 @@
+
+**「工具栏key」**  
+[
+    "headerSelect",// 标题
+    "blockquote", // 引用
+    "bold", // 加粗
+    "underline", // 下划线
+    "italic", // 斜体
+    // 删除线、清除格式等
+    "group-more-style",
+    {
+        key: "group-more-style",
+        title: "更多",
+        iconSvg:
+            '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6…0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
+        menuKeys: Array(5)
+    },
+    "color", // 文字颜色
+    "bgColor", // 背景色
+    "fontSize", // 字号
+    "fontFamily", // 字体
+    "lineHeight", // 行高
+    "bulletedList", // 无序列表
+    "numberedList", // 有序列表
+    "todo", // 代办
+    // 对齐
+    "group-justify",
+    {
+        key: "group-justify",
+        title: "对齐",
+        iconSvg:
+            '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
+        menuKeys: Array(4)
+    },
+    // 缩进
+    "group-indent",
+    {
+        key: "group-indent",
+        title: "缩进",
+        iconSvg:
+            '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v1…32h1024v128H0z m0-128V320l256 192z"></path></svg>',
+        menuKeys: Array(2)
+    },
+    "emotion",// 表情
+    "insertLink",// 插入链接
+    "group-image",// 上传图片
+    {
+        key: "group-image",
+        title: "图片",
+        iconSvg:
+            '<svg viewBox="0 0 1024 1024"><path d="M959.877 128…l224.01-384 256 320h64l224.01-192z"></path></svg>',
+        menuKeys: Array(2)
+    },
+    "group-video",// 上传视频
+    {
+        key: "group-video",
+        title: "视频",
+        iconSvg:
+            '<svg viewBox="0 0 1024 1024"><path d="M981.184 160….904zM384 704V320l320 192-320 192z"></path></svg>',
+        menuKeys: Array(2)
+    },
+    "insertTable",// 插入表格
+    "codeBlock", // 代码块
+    "divider", // 分割线
+    "undo", // 撤销
+    "redo", // 重做
+    "fullScreen" // 全屏
+]