feat: 新增编辑器 toolbar 实现文件保存功能

src/App.vue

@@ -17,6 +17,33 @@ async function greet() {
 
 const markdownRef = ref(null);
 const markdownCode = ref("# Hello Markdown")
+const appendToolbar = [
+    {
+        name: "|",
+    },
+    {
+        name: "save-markdown-code",
+        icon: "fa-save", // font-awesome icon. 需确保在 editormd.css 中已定义
+        title: "保存当前内容",
+        shortcut: [
+            navigator.userAgent.toUpperCase().indexOf('MAC') >= 0 ? "Cmd-S" : "Ctrl-S"
+        ],
+        handler: () => {
+            writeFileContent();
+        },
+        nofocus: true,
+    },
+    {
+        name: "publish",
+        icon: "fa-cloud-upload",
+        title: "发布文章",
+        handler: () => {
+            // TODO 调用接口将 markdown 源码或者 HTML 代码发布到云端
+            Message.warning('抱歉，该功能暂未开放');
+        },
+        nofocus: true,
+    },
+];
 // 支持从 localStorage 读写 imageUploadURL
 const imageUploadURLOfEditor = ref(localStorage.getItem('imageUploadURLOfEditor') || "")
 function changeImageUploadURL(newImageUploadURL) {
@@ -27,7 +54,6 @@ async function initMarkdownEditor() {
     if (currentFilePath.value.length > 0) {
         try {
             markdownCode.value = await readTextFile(currentFilePath.value)
-            loadingCurrentFile.value = true
             Message.success('已读取文件内容，并加载到编辑器中:' + currentFilePath.value);
         } catch (err) {
             Message.error('文件读取失败:' + err);
@@ -88,7 +114,6 @@ function showFileTree(treeData) {
 // <FolderTree> 完成文件树渲染后，点击文件得到 currentFilePath
 // 读取 currentFilePath 的文件内容，填充到 MarkdownEditor 之中
 const currentFilePath = ref(localStorage.getItem('currentSelectedFilePath') || "");
-const loadingCurrentFile = ref(false);
 async function fileSelected(fileNodeData) {
     console.log(fileNodeData)
     const filePath = fileNodeData.path
@@ -99,7 +124,6 @@ async function readFileContent(filePath) {
     try {
         markdownRef.value.setMarkdownCode(await readTextFile(filePath))
         currentFilePath.value = filePath
-        loadingCurrentFile.value = true
         Message.success('已读取文件内容，并加载到编辑器中:' + filePath);
     } catch (err) {
         Message.error('文件读取失败:' + err);
@@ -108,14 +132,12 @@ async function readFileContent(filePath) {
 async function writeFileContent() {
     // 如果未选择任何文件，则不触发写文件事件
     if (currentFilePath.value.length == 0) {
+        Message.warning('当前编辑器暂未关联目标文件，请在左侧打开目录并选择一个文件')
         return;
     }
     try {
-        // 如果触发当前事件，是因为刚点击并加载了某个文件内容，则不执行写文件操作
-        if (!loadingCurrentFile.value) {
         await writeTextFile(currentFilePath.value, markdownRef.value.getMarkdownCode())
-        }
+        Message.success('文件更新成功:' + currentFilePath.value);
-        loadingCurrentFile.value = false
     } catch (err) {
         Message.error('文件更新失败:' + err);
     }
@@ -149,7 +171,8 @@ onUnmounted(() => {
                     <MarkdownEditor ref="markdownRef" width="100%" height="100%" :autoInit="false"
                         :markdownCode="markdownCode" :imageUpload="true" :imageUploadURL="imageUploadURLOfEditor"
                         :imageUploadURLChange="changeImageUploadURL" :onload="reloadEditorHeight"
-                        :onfullscreenExit="handleWindowResize" @update:markdownCode="writeFileContent" />
+                        :onFullScreenExit="handleWindowResize" @update:markdownCode="newCode => markdownCode = newCode"
+                        :appendToolbar="appendToolbar" />
                 </div>
             </template>
         </Split>