2022.11.15 新增插入文件图片按钮。

README.md

@@ -1,5 +1,7 @@
 ## 更新日志
 
+2022.11.15 新增插入文件图片按钮。
+
 2022.11.13 新增插入 todo 按钮。
 
 2022.11.8 支持拖拽上传附件（一个个传）。

css/main.css

@@ -105,16 +105,13 @@ input.inputer{border-bottom: 1px solid #ccc;width:75%;}
     cursor: not-allowed;
 }
 
-svg.icon{width:24px;height:24px;}
+.common-tools-container .mr-5{margin-right: .5rem;}
+.common-tools-container svg.icon,#blog_info_edit svg.icon{width:24px;height:24px;opacity: 0.6;cursor: pointer;}
 #newtodo svg.icon{padding-top: 2px;}
 #tags svg.icon{padding: 2px;width:23px;height:23px;}
-#tags,#getlink,#newtodo{margin-right: .5rem;}
+#tags:hover svg,#getlink:hover svg,#locked:hover svg,#unlock:hover svg,#newtodo:hover svg,#upres:hover svg{opacity: 1;}
-#tags svg,#getlink svg,#locked svg,#unlock svg,#newtodo svg{opacity: 0.6;}
-#tags:hover svg,#getlink:hover svg,#locked:hover svg,#unlock:hover svg,#newtodo:hover svg{opacity: 1;cursor: pointer;}
 
-#locked{display: none;}
+#locked,#taglist,#visibilitylist{display: none;}
-
-#taglist,#visibilitylist{display: none;}
 .tag-list,.visibility-list {
     margin-top: .5rem;
     max-height: 13rem;

js/oper.js

@@ -241,6 +241,20 @@ $('#getlink').click(function () {
   })
 })
 
+$('#upres').click(async function () {
+  $('#inFile').click()
+})
+
+$('#inFile').on('change', function(data){
+  var fileVal = $('#inFile').val();
+  var file = null
+  if(fileVal == '') {
+    return;
+  }
+  file= this.files[0];
+  uploadImage(file)
+});
+
 function add(str) {
   var tc = document.getElementById("content");
   var tclen = tc.value.length;

manifest.json

@@ -1,7 +1,7 @@
 {
    "manifest_version": 3,
    "name": "__MSG_extName__",
-   "version": "2022.11.13",
+   "version": "2022.11.15",
    "action": {
       "default_popup": "popup.html",
       "default_icon": "assets/logo_24x24.png",

popup.html

@@ -43,32 +43,38 @@
 
   <div class="common-tools-wrapper">
     <div class="common-tools-container">
-      <div id="tags">
+      <div id="tags" class="mr-5">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
           <path fill="#666" d="M171 341h682q43 0 43 43t-43 43H171q-43 0-43-43t43-43Z"/>
           <path fill="#666" d="M423 85h4a39 39 0 0 1 38 43l-77 772a43 43 0 0 1-43 39h-4a39 39 0 0 1-38-43l77-772a43 43 0 0 1 43-39zm256 0h4a39 39 0 0 1 38 43l-77 772a43 43 0 0 1-43 39h-4a39 39 0 0 1-38-43l77-772a43 43 0 0 1 43-39z"/>
           <path fill="#666" d="M171 597h682q43 0 43 43t-43 43H171q-43 0-43-43t43-43Z"/>
         </svg>
       </div>
-      <div id="newtodo">
+      <div id="newtodo" class="mr-5">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
           <path fill="#666" d="M407 365a41 41 0 0 0-59 0 41 41 0 0 0 0 60l149 149c9 8 19 13 30 13s21-5 30-13l341-341c17-18 17-43 0-60s-43-17-60 0L527 484 407 365z"/>
           <path fill="#666" d="M868 416c-23 0-45 19-45 45v277c0 2 0 7-2 9 0 2-2 4-4 6s-4 4-6 4l-9 2H247c-2 0-6 0-8-2-2 0-4-2-6-4-3-2-5-4-5-6l-2-9V183l2-8c0-2 2-4 5-6 2-3 4-5 6-5l8-2h278c23 0 45-19 45-45s-20-44-45-44H247c-14 0-27 2-42 8a144 144 0 0 0-55 60c-7 13-9 28-9 42v555c0 15 2 28 8 43a122 122 0 0 0 58 58c13 6 28 8 43 8h554a108 108 0 0 0 77-32c11-11 17-21 24-34 6-13 8-28 8-43V461c-2-26-21-45-45-45z"/>
         </svg>
       </div>
-      <div id="getlink">
+      <div id="upres" class="mr-5">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
+          <path fill="#555" d="M752 80H272c-70 0-128 58-128 128v608c0 70 58 128 128 128h354c33 0 65-13 91-37l126-126c24-24 37-56 37-91V208c0-70-58-128-128-128zM208 816V208c0-35 29-64 64-64h480c35 0 64 29 64 64v464h-96c-70 0-128 58-128 128v80H272c-35 0-64-29-64-64zm462 45c-4 5-9 8-14 11v-72c0-35 29-64 64-64h75L670 861z"/>
+          <path fill="#555" d="M368 352h288c18 0 32-14 32-32s-14-32-32-32H368c-18 0-32 14-32 32s14 32 32 32zm128 256H368c-18 0-32 14-32 32s14 32 32 32h128c18 0 32-14 32-32s-14-32-32-32zm-128-96h288c18 0 32-14 32-32s-14-32-32-32H368c-18 0-32 14-32 32s14 32 32 32z"/>
+        </svg>
+      </div>
+      <div id="getlink" class="mr-5">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
           <path fill="#666" d="m600 697-1 1-94 76a198 198 0 0 1-280-30c-69-85-56-211 30-280l99-81-46-57-99 81a273 273 0 0 0 143 483 279 279 0 0 0 29 1c63 0 122-21 171-61l95-76-46-56-1-1zm256-464a273 273 0 0 0-383-40l-91 73 47 58 90-74a199 199 0 1 1 250 310l-96 77-1 1 46 57 97-78c56-46 92-111 99-184 9-72-12-143-58-200z"/>
           <path fill="#666" d="m388 668 306-255 1-1-48-56-305 255h-2z"/>
         </svg>
       </div>
-      <div id="unlock">
+      <div id="unlock" class="mr-5">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
           <path fill="#666" d="M725 427H299a128 128 0 0 0-128 128v256a128 128 0 0 0 128 128h426a128 128 0 0 0 128-128V555a128 128 0 0 0-128-128zm-426 85h426a43 43 0 0 1 43 43v256a43 43 0 0 1-43 42H299a43 43 0 0 1-43-42V555a43 43 0 0 1 43-43z"/>
           <path fill="#666" d="M512 597a85 85 0 1 0 0 171 85 85 0 0 0 0-171zm0-554a213 213 0 0 1 213 213 43 43 0 0 1-85 5v-5a128 128 0 0 0-256-8v221a43 43 0 0 1-85 5V256A213 213 0 0 1 512 43z"/>
         </svg>
       </div>
-      <div id="locked">
+      <div id="locked" class="mr-5">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
           <path fill="#666" d="M725 427H299a128 128 0 0 0-128 128v256a128 128 0 0 0 128 128h426a128 128 0 0 0 128-128V555a128 128 0 0 0-128-128zm-426 85h426a43 43 0 0 1 43 43v256a43 43 0 0 1-43 42H299a43 43 0 0 1-43-42V555a43 43 0 0 1 43-43z"/>
           <path fill="#666" d="M512 597a85 85 0 1 0 0 171 85 85 0 0 0 0-171zm0-512a213 213 0 0 1 213 204v180a43 43 0 0 1-85 5V299a128 128 0 0 0-256-8v178a43 43 0 0 1-85 5V299A213 213 0 0 1 512 85z"/>
@@ -81,6 +87,7 @@
   </div>
   <div class="tag-list" id="taglist"></div>
   <div class="visibility-list" id="visibilitylist"></div>
+  <input type="file" id="inFile" style="display:none;">
   <script src="../js/jquery.min.js"></script>
   <script src="../js/message.js"></script>
   <script src="../js/oper.js"></script>