feat(simple-demo): 使用 Vditor 替代 el-input 进行内容编辑

- 引入 Vditor 富文本编辑器，替换原有的 el-input 组件
- 添加图片粘贴功能和实时预览
- 优化标签处理逻辑，确保每个笔记至少有一个标签
- 调整界面布局，增加 Vditor 容器

simple-demo/memos.html

@@ -286,15 +286,22 @@
               placeholder="选择日期时间"
             >
             </el-date-picker>
-          </div>
-          <div>
+            <!-- el-input 只处理粘贴事件 -->
             <el-input
               @paste.native="handlePaste2"
+              placeholder="粘贴图片"
+              style="width: 50%"
+            >
+            </el-input>
+          </div>
+          <div>
+            <div id="vditor"></div>
+            <!-- <el-input
               ref="contentEdit"
               v-model="tmpItem.content"
               type="textarea"
               :autosize="{minRows: 2}"
-            ></el-input>
+            ></el-input> -->
           </div>
           <div style="display: flex">
             <div v-for="item in cloneFileIds">
@@ -378,6 +385,7 @@
       let vm = new Vue({
         el: "#app",
         data: {
+          contentEditor: "", // vditor实例
           dialogVisible2: false,
           old_text: "",
           new_text: "",
@@ -723,7 +731,11 @@
             if (content.indexOf(cTag) === -1) {
               return;
             }
-            item.content = content.replace("#" + cTag + " ", "");
+            item.content = content.replaceAll("#" + cTag + " ", "");
+            // 最少有一个标签
+            if (!item.content.includes("#")) {
+              item.content = "#tmp " + item.content;
+            }
             // 提交记录
             let res = requestUtil.sync(
               "https://web_history.tianyunperfect.cn/memos/updateContent",
@@ -792,7 +804,7 @@
               "post",
               {
                 id: this.tmpItem.id,
-                content: this.tmpItem.content,
+                content: this.contentEditor.getValue(),
                 created_ts: this.tmpItem.created_ts,
                 resourceIdList: this.cloneFileIds.map((it) => it.id),
               },
@@ -800,6 +812,7 @@
             );
             if (res.code === 200) {
               this.msg("更新成功");
+              this.tmpItem.content = this.contentEditor.getValue();
               this.resetView(this.tmpItem);
               // 更新主页面的图片
               this.resourceMap[this.tmpItem.id] = this.cloneFileIds;
@@ -813,9 +826,21 @@
             this.tmpItem = item;
             this.cloneFileIds = this.getCloneResourceIds(item.id);
             this.dialogVisible = true;
-            // 获取焦点
             this.$nextTick(() => {
-              this.$refs.contentEdit.focus();
+              this.contentEditor = new Vditor("vditor", {
+                height: 360,
+                toolbarConfig: {
+                  pin: true,
+                },
+                cache: {
+                  enable: false,
+                },
+                // 其他配置...
+                after: () => {
+                  this.contentEditor.setValue(this.tmpItem.content);
+                  this.contentEditor.focus();
+                },
+              });
             });
           },
           isDisabled(item) {
@@ -837,6 +862,10 @@
             }
             // updatedContent 去除尾部的\n,可能有多个
             updatedContent = updatedContent.replace(/\n+$/, "");
+            // updatedContent 最少有一个标签，如果没有就添加一个标签 #tmp，检测是否有 #标签
+            if (!updatedContent.includes("#")) {
+              updatedContent = "#tmp " + updatedContent;
+            }
 
             let res = requestUtil.sync(
               "https://memos.tianyunperfect.cn/api/v1/memo",