作品集編輯器UI優化

backstage/static/js/editor.js

@@ -126,7 +126,7 @@ axios.get(contentApiUrl).then(({ data }) => {
         }
       }
       ,
-      code: CodeTool,
+      // code: CodeTool,
       delimiter: Delimiter,
       embed: Embed,
     }
@@ -151,7 +151,7 @@ axios.get(contentApiUrl).then(({ data }) => {
 
 submitButton.onclick = function () {
 
-  editor.save().then((outputData) => {
+  editor.save().then((outputData) => {  
     console.log('Article data: ', outputData);
 
     var mdContent = '';
@@ -214,6 +214,7 @@ submitButton.onclick = function () {
     };
     axios.post(contentApiUrl, json = postData);
 
+    alert('作品資料已儲存');
   }).catch((error) => {
     console.log('Saving failed: ', error)
   });

backstage/templates/editor.html

@@ -3,10 +3,32 @@
 <div class="ui segment">
   <div class="ui two column very relaxed grid">
     <!-- <div class="column column__edit"> -->
-    <div style='width:100%'>
-      <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-2"></i>編輯</h3>
-      <div class="mb-2">
-        title:<input id="ctitle" type="text" /><br />
+    <div class="container col-sm-12 col-md-8">
+      <button id='submit_button' class="btn__submit"><b>編輯完成</b></button>
+      <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-1 mb-2"></i> 作品編輯</h3>
+      <table class="table table-bordered">
+        <tbody>
+          <tr>
+            <td><h4>標題</h4></td>
+            <td><input class="form-control" id="ctitle" type="text" /></td>
+          </tr>
+          <tr>
+            <td><h4>描述</h4></td>
+            <td><textarea class="form-control" rows="3" id="cdescription"></textarea></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="d-none">
+        <input id="cdate" type="text" /><br />
+        <input id="cdraft" type="text" /><br />
+        <input id="ctype" type="text" /><br />
+        <input id="curl" type="text" /><br />
+        <input id="cimage" type="text" /><br />
+      </div>
+      
+      <!-- <div class="mb-2"> -->
+        <!-- title:<input id="ctitle" type="text" /><br />
         date:<input id="cdate" type="text" /><br />
         draft:<input id="cdraft" type="text" /><br />
         type:<input id="ctype" type="text" /><br />
@@ -14,11 +36,17 @@
         image:<input id="cimage" type="text" /><br />
         description:<input id="cdescription" type="text" /><br />
         weight:<input id="cweight" type="text" /><br />
-        tag:<input id="ctag" type="text" /><br />
+        tag:<input id="ctag" type="text" /><br /> -->
         <!-- <button class="btn__arTitle mb-2" id="title_button">標題修改</button> -->
+      <!-- </div> -->
+        
+      <h3 class="h3 column__h3"><i class="fa fa-file-text mr-2 mb-2"></i> 內容編輯</h3>
+      <div class="card">
+        <div class="card-body">
+          <div id="editorjs"></div>
+        </div>
       </div>
-      <button id='submit_button' class="btn__submit">修改完成</button>
-      <div id="editorjs"></div>
+      
       <div id="editor_block"><span><button class="btn__arTitle mb-2"
             id="add_title_button">+標題</button></span><span><button class="btn__arTitle mb-2"
             id="add_img_button">+圖</button></span><span><button class="btn__arTitle mb-2"