feat: 实现保存,显示隐藏目录等功能

README.md

@@ -60,6 +60,7 @@
 
 1. `npm install md-editor-v3 --save`
 2. 在 src/components/MainEditor.vue 组件里使用 md-editor-v3 组件
+3. 实现保存功能；自定义工具栏实现显示/隐藏目录以及发布等功能
 
 ### 调试应用
 

src/App.vue

@@ -36,7 +36,7 @@ async function greet() {
 }
 
 // 使用 Split 组件动态控制页面左右布局
-const split = ref(0.2);
+const split = ref(0.15);
 const splitTrigger = useTemplateRef('splitTrigger');
 const splitRight = useTemplateRef('splitRight');
 const splitRightWidth = ref(0);

src/components/MainEditor.vue

@@ -2,7 +2,20 @@
     <Split v-model="split">
         <template #left>
             <MdEditor ref="editorRef" v-model="editorState.text" :id="editorState.id" :theme="editorState.theme"
-                :style="{ height: editorState.height }" :toolbars="editorState.toolbars" :toolbarsExclude="['github']">
+                :style="{ height: editorState.height }" :toolbars="editorState.toolbars"
+                :toolbarsExclude="['github', 'catalog']" @onSave="onSave" @onHtmlChanged="getPreviewedHTML">
+                <template #defToolbars>
+                    <NormalToolbar title="显示/隐藏目录" @onClick="toggleCatalog">
+                        <template #trigger>
+                            <Icon class="md-editor-icon" type="ios-list-box-outline" size="22" />
+                        </template>
+                    </NormalToolbar>
+                    <NormalToolbar title="发布文章" @onClick="publish">
+                        <template #trigger>
+                            <Icon class="md-editor-icon" type="md-cloud-upload" size="22" />
+                        </template>
+                    </NormalToolbar>
+                </template>
             </MdEditor>
         </template>
         <template #trigger>
@@ -18,7 +31,7 @@
 
 <script setup>
 import 'md-editor-v3/lib/style.css';
-import { MdEditor, MdCatalog } from 'md-editor-v3';
+import { MdEditor, MdCatalog, NormalToolbar } from 'md-editor-v3';
 import { ref, reactive, watch } from "vue";
 import { Message } from 'view-ui-plus'
 
@@ -42,7 +55,8 @@ const emit = defineEmits([
 ]);
 
 // 定义布局，主要用于在右边显示文章目录
-const split = ref(0.8);
+const split = ref(1);
+const defaultCatalogSplit = 0.2; // 默认目录和编辑器的比例为 8:2
 const hiddenSplitRight = split.value == 1 ? ref('hidden') : ref('');
 watch(split, (newSplit) => {
     if (newSplit > 0.95) {
@@ -65,6 +79,8 @@ const editorState = reactive({
     height: '100vh',
     text: props.markdownCode,
     toolbars: [
+        0,
+        '-',
         'bold',
         'underline',
         'italic',
@@ -89,6 +105,7 @@ const editorState = reactive({
         'revoke',
         'next',
         'save',
+        1,
         '=',
         'prettier',
         'pageFullscreen',
@@ -110,6 +127,33 @@ watch(() => editorState.text, (newCode) => {
     emit('update:markdownCode', newCode);
 })
 
+const onSave = (v, h) => {
+    // 调用 save 方法保存代码（参数 v 为 markdown code）
+    props.save(v);
+
+    // 使用 h 可以在保存时直接获取 html
+    // h.then((html) => {
+    //     console.log(html);
+    // });
+};
+
+const getPreviewedHTML = (html) => {
+    console.log(html);
+}
+
+const toggleCatalog = () => {
+    if (split.value < 1) {
+        split.value = 1;
+    } else {
+        split.value = 1 - defaultCatalogSplit;
+    }
+}
+
+const publish = () => {
+    // TODO 调用接口将 markdown 源码或者 HTML 代码发布到云端
+    Message.warning('抱歉，该功能暂未开放');
+}
+
 // 对父组件暴露数据或方法
 defineExpose({})
 </script>