🐛 Fix some bugs

https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/issues/36 #11
justice2001 · Jan 2, 2024 · 921234a · 921234a
1 parent 12b8d53
commit 921234a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 30 deletions.
diff --git a/console/src/model/TemplateModal.vue b/console/src/model/TemplateModal.vue
@@ -38,6 +38,9 @@ const generateCode = () => {
 watch(props, () => {
   if (props.open) {
     loadKey.value = props.schema.name;
+    props.schema.formKit.forEach((form: { [key: string]: string }) => {
+      data.value[form.name] = form.value;
+    });
   }
 });
 
@@ -46,12 +49,8 @@ const htmlEncode = (str: string) => {
   if (str.length === 0) {
     return "";
   }
-  s = str.replace(/&/g, "&amp;");
-  s = s.replace(/</g, "&lt;");
+  s = str.replace(/</g, "&lt;");
   s = s.replace(/>/g, "&gt;");
-  s = s.replace(/ /g, "&nbsp;");
-  s = s.replace(/'/g, "&#39;");
-  s = s.replace(/"/g, "&quot;");
   return s;
 };
 </script>

diff --git a/console/src/views/Vditor.vue b/console/src/views/Vditor.vue
@@ -37,6 +37,7 @@ const insertValue = (value: string | null) => {
   if (!value) {
     vditor.value.tip("未知错误，插入失败", 3000);
   } else {
+    console.log("Insert" + value);
     vditor.value.insertValue(value);
     vditor.value.focus();
   }

diff --git a/doc/rfc/custom-insert.md b/doc/rfc/custom-insert.md
@@ -1,4 +1,4 @@
-# 自定义插入按钮 设计方案
+# 快速插入 设计方案
 
 > Issue https://github.com/justice2001/halo-plugin-vditor/issues/11
  
@@ -15,31 +15,33 @@
 ### 配置格式
 
 ```json
-[
+{
+"type": "template",
+"id": "joe-progress",
+"icon": "",
+"name": "Joe Progress Bar",
+"formkit": [
   {
-    "type": "template",
-    "id": "joe-progress",
-    "icon": "",
-    "name": "Joe Progress Bar",
-    "formkit": [
-      {
-        "$formkit": "text",
-        "name": "percentage",
-        "label": "Percentage",
-        "help": "This is the percentage for progress bar."
-      },
-      {
-        "$formkit": "text",
-        "name": "color",
-        "label": "Color",
-        "help": "This is the color for progress bar."
-      }
-    ],
-    "template": "<joe-progress percentage=\"$percentage$\" color=\"$color$\"></joe-progress>"
+    "$formkit": "text",
+    "name": "percentage",
+    "label": "Percentage",
+    "help": "This is the percentage for progress bar."
+  },
+  {
+    "$formkit": "text",
+    "name": "color",
+    "label": "Color",
+    "help": "This is the color for progress bar."
   }
-]
+],
+"template": "<joe-progress percentage=\"$percentage$\" color=\"$color$\"></joe-progress>"
+}
 ```
 
+### 配置文件示例
+
+[quick-insert-demo.json](quick-insert-demo.json)
+
 ### 表单方案
 
 与Halo相同的使用FormKit Schema方案，便于Halo开发者使用，但不应支持特别复杂的语法，应当支持一些较为基础的语法为优。

diff --git a/src/main/resources/static/test.json → doc/rfc/quick-insert-demo.json b/src/main/resources/static/test.json → doc/rfc/quick-insert-demo.json
@@ -11,18 +11,21 @@
             "name": "进度条",
             "formKit": [
                 {
-                    "$formkit": "text",
+                    "$formkit": "number",
+                    "min": 0,
+                    "max": 100,
+                    "step": 1,
                     "name": "percentage",
                     "label": "进度",
                     "help": "This is the percentage for progress bar.",
-                    "value": "0"
+                    "value": 50
                 },
                 {
                     "$formkit": "color",
                     "name": "color",
                     "label": "颜色",
                     "help": "This is the color for progress bar.",
-                    "value": "#ffffff"
+                    "value": "#fb6c28"
                 }
             ],
             "template": "<joe-progress percentage=\"$percentage$%\" color=\"$color$\"></joe-progress>"