@haluo/biz 2.0.12 → 2.0.13-beta.1

package/dist/haluo-biz.js

@@ -1804,7 +1804,9 @@ const _sfc_main = {
       },
       countList: [],
       replaceSeamless: 0,
-      seamlessCount: 0
+      seamlessCount: 0,
+      overLine: "",
+      currentVideo: null
     };
   },
   computed: {
@@ -1954,6 +1956,12 @@ const _sfc_main = {
         this.imgUploadHandler(type, src);
       });
     },
+    replacePoster(e) {
+      this.$emit("insertImgs", e.target.files, "replace-poster", (type, src) => {
+        this.visibleImg = false;
+        this.imgUploadHandler(type, src);
+      });
+    },
     againImg(e) {
       this.$emit("insertImgs", e.target.files, "uploadAgainImages", (type, src) => {
         this.visibleImg = false;
@@ -2143,7 +2151,9 @@ const _sfc_main = {
       node.onclick = function() {
         me.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
       };
+      const replaceBtn = me.insertVideoBtns(this, video);
       node.appendChild(delBtn);
+      node.appendChild(replaceBtn);
     },
     async parseArticle(node) {
       const data = JSON.parse(node.dataset.article);
@@ -2275,6 +2285,20 @@ const _sfc_main = {
               seamlessFlag: me.replaceSeamless,
               type: "2"
             }, this.range);
+          } else if (type === "replace-poster") {
+            if (this.currentVideo) {
+              this.currentVideo.poster = imgSrc;
+              try {
+                const videoData = JSON.parse(this.currentVideo.getAttribute("data") || "{}");
+                this.currentVideo.setAttribute("data", JSON.stringify({ ...videoData, img: imgSrc }));
+                const contentNode = this.currentVideo.parentNode;
+                const contentData = JSON.parse(contentNode.dataset.video || "{}");
+                contentNode.dataset.video = JSON.stringify({ ...contentData, img: imgSrc });
+              } catch (error) {
+                console.log(error);
+              }
+              this.currentVideo = null;
+            }
           } else {
             this.seamlessCount++;
             const isLast = this.seamlessCount === this.imgList.length;
@@ -2293,6 +2317,21 @@ const _sfc_main = {
         this.setToast(rst.origin.name + "\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
       }
     },
+    insertVideoBtns(editor, node) {
+      const me = this;
+      var replaceBtn = editor.createElement("div", {
+        "class": "video-cover-replace pointer",
+        "contenteditable": "false"
+      });
+      replaceBtn.onclick = function(e) {
+        const posterBtn = document.querySelector(".replace-poster");
+        posterBtn.click();
+        me.currentVideo = node;
+        e.stopPropagation();
+      };
+      replaceBtn.innerText = "\u66F4\u6362\u5C01\u9762";
+      return replaceBtn;
+    },
     insertImgOperateBtns(editor, data) {
       const me = this;
       var replaceBtn = editor.createElement("div", {
@@ -2405,7 +2444,7 @@ const _sfc_main = {
     },
     initSquire() {
       const me = this;
-      me.editorDom;
+      const editorDom = me.editorDom;
       me.editor = new window.Squire(me.editorDom, {
         blockTag: "p",
         blockAttributes: {
@@ -2524,7 +2563,8 @@ const _sfc_main = {
           "data": JSON.stringify(data),
           "style": isSeameless ? "margin: 0" : "margin-top: 0",
           "data-content": data.content || "",
-          "contenteditable": "false"
+          "contenteditable": "false",
+          "draggable": "false"
         });
         const btns = me.insertImgOperateBtns(this, data);
         var childList = [];
@@ -2535,8 +2575,15 @@ const _sfc_main = {
         !isHaloImage && childList.push(again);
         var p = this.createElement("div", {
           "class": "halo-img-content",
-          "contenteditable": "false"
+          "contenteditable": "false",
+          "draggable": "false"
         }, [...childList]);
+        p.onfocus = function() {
+          img.style["outline"] = "1px solid #1a74ff";
+        };
+        p.onblur = function() {
+          img.style["outline"] = "none";
+        };
         this.insertElement(p, range);
         if (isSeameless) {
           me.removeDefault(p, "nextElementSibling");
@@ -2585,14 +2632,41 @@ const _sfc_main = {
           }
         });
         console.log(delBtn);
+        const posterBtn = me.insertVideoBtns(this, video);
         var p = this.createElement("DIV", {
           "class": "halo-video-content",
-          "contenteditable": "true",
-          "data-video": JSON.stringify(data)
-        }, [video, delBtn]);
+          "contenteditable": "false",
+          "data-video": JSON.stringify(data),
+          "draggable": "true"
+        }, [video, delBtn, posterBtn]);
         p.onclick = function() {
           me.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
         };
+        let targetMove = "";
+        p.ondragstart = function(e) {
+          if (!(e.target.className.indexOf("halo-video-content") < 0)) {
+            e.dataTransfer.setData("text/html", e.target);
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.dropEffect = "move";
+            targetMove = e.target;
+          }
+        };
+        editorDom.ondragover = function(e) {
+          if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
+            e.preventDefault();
+          }
+        };
+        editorDom.ondrop = function(e) {
+          if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
+            if (e.target === editorDom) {
+              e.target.appendChild(targetMove);
+            } else {
+              e.target.after(targetMove);
+            }
+            targetMove = "";
+            e.preventDefault();
+          }
+        };
         this.insertElement(p);
         setTimeout(() => {
           document.documentElement.scrollTop = scrollTop;
@@ -3160,6 +3234,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "replace-input hide",
       accept: "image/*",
       onChange: _cache[12] || (_cache[12] = (...args) => $options.replaceImg && $options.replaceImg(...args))
+    }, null, 32),
+    createElementVNode("input", {
+      type: "file",
+      name: "file",
+      class: "replace-poster hide",
+      accept: "image/*",
+      onChange: _cache[13] || (_cache[13] = (...args) => $options.replacePoster && $options.replacePoster(...args))
     }, null, 32)
   ]);
 }

package/dist/haluo-biz.umd.cjs

@@ -1806,7 +1806,9 @@
         },
         countList: [],
         replaceSeamless: 0,
-        seamlessCount: 0
+        seamlessCount: 0,
+        overLine: "",
+        currentVideo: null
       };
     },
     computed: {
@@ -1956,6 +1958,12 @@
           this.imgUploadHandler(type, src);
         });
       },
+      replacePoster(e) {
+        this.$emit("insertImgs", e.target.files, "replace-poster", (type, src) => {
+          this.visibleImg = false;
+          this.imgUploadHandler(type, src);
+        });
+      },
       againImg(e) {
         this.$emit("insertImgs", e.target.files, "uploadAgainImages", (type, src) => {
           this.visibleImg = false;
@@ -2145,7 +2153,9 @@
         node.onclick = function() {
           me.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
         };
+        const replaceBtn = me.insertVideoBtns(this, video);
         node.appendChild(delBtn);
+        node.appendChild(replaceBtn);
       },
       async parseArticle(node) {
         const data = JSON.parse(node.dataset.article);
@@ -2277,6 +2287,20 @@
                 seamlessFlag: me.replaceSeamless,
                 type: "2"
               }, this.range);
+            } else if (type === "replace-poster") {
+              if (this.currentVideo) {
+                this.currentVideo.poster = imgSrc;
+                try {
+                  const videoData = JSON.parse(this.currentVideo.getAttribute("data") || "{}");
+                  this.currentVideo.setAttribute("data", JSON.stringify({ ...videoData, img: imgSrc }));
+                  const contentNode = this.currentVideo.parentNode;
+                  const contentData = JSON.parse(contentNode.dataset.video || "{}");
+                  contentNode.dataset.video = JSON.stringify({ ...contentData, img: imgSrc });
+                } catch (error) {
+                  console.log(error);
+                }
+                this.currentVideo = null;
+              }
             } else {
               this.seamlessCount++;
               const isLast = this.seamlessCount === this.imgList.length;
@@ -2295,6 +2319,21 @@
           this.setToast(rst.origin.name + "\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
         }
       },
+      insertVideoBtns(editor, node) {
+        const me = this;
+        var replaceBtn = editor.createElement("div", {
+          "class": "video-cover-replace pointer",
+          "contenteditable": "false"
+        });
+        replaceBtn.onclick = function(e) {
+          const posterBtn = document.querySelector(".replace-poster");
+          posterBtn.click();
+          me.currentVideo = node;
+          e.stopPropagation();
+        };
+        replaceBtn.innerText = "\u66F4\u6362\u5C01\u9762";
+        return replaceBtn;
+      },
       insertImgOperateBtns(editor, data) {
         const me = this;
         var replaceBtn = editor.createElement("div", {
@@ -2407,7 +2446,7 @@
       },
       initSquire() {
         const me = this;
-        me.editorDom;
+        const editorDom = me.editorDom;
         me.editor = new window.Squire(me.editorDom, {
           blockTag: "p",
           blockAttributes: {
@@ -2526,7 +2565,8 @@
             "data": JSON.stringify(data),
             "style": isSeameless ? "margin: 0" : "margin-top: 0",
             "data-content": data.content || "",
-            "contenteditable": "false"
+            "contenteditable": "false",
+            "draggable": "false"
           });
           const btns = me.insertImgOperateBtns(this, data);
           var childList = [];
@@ -2537,8 +2577,15 @@
           !isHaloImage && childList.push(again);
           var p = this.createElement("div", {
             "class": "halo-img-content",
-            "contenteditable": "false"
+            "contenteditable": "false",
+            "draggable": "false"
           }, [...childList]);
+          p.onfocus = function() {
+            img.style["outline"] = "1px solid #1a74ff";
+          };
+          p.onblur = function() {
+            img.style["outline"] = "none";
+          };
           this.insertElement(p, range);
           if (isSeameless) {
             me.removeDefault(p, "nextElementSibling");
@@ -2587,14 +2634,41 @@
             }
           });
           console.log(delBtn);
+          const posterBtn = me.insertVideoBtns(this, video);
           var p = this.createElement("DIV", {
             "class": "halo-video-content",
-            "contenteditable": "true",
-            "data-video": JSON.stringify(data)
-          }, [video, delBtn]);
+            "contenteditable": "false",
+            "data-video": JSON.stringify(data),
+            "draggable": "true"
+          }, [video, delBtn, posterBtn]);
           p.onclick = function() {
             me.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
           };
+          let targetMove = "";
+          p.ondragstart = function(e) {
+            if (!(e.target.className.indexOf("halo-video-content") < 0)) {
+              e.dataTransfer.setData("text/html", e.target);
+              e.dataTransfer.effectAllowed = "move";
+              e.dataTransfer.dropEffect = "move";
+              targetMove = e.target;
+            }
+          };
+          editorDom.ondragover = function(e) {
+            if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
+              e.preventDefault();
+            }
+          };
+          editorDom.ondrop = function(e) {
+            if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
+              if (e.target === editorDom) {
+                e.target.appendChild(targetMove);
+              } else {
+                e.target.after(targetMove);
+              }
+              targetMove = "";
+              e.preventDefault();
+            }
+          };
           this.insertElement(p);
           setTimeout(() => {
             document.documentElement.scrollTop = scrollTop;
@@ -3162,6 +3236,13 @@
         class: "replace-input hide",
         accept: "image/*",
         onChange: _cache[12] || (_cache[12] = (...args) => $options.replaceImg && $options.replaceImg(...args))
+      }, null, 32),
+      vue.createElementVNode("input", {
+        type: "file",
+        name: "file",
+        class: "replace-poster hide",
+        accept: "image/*",
+        onChange: _cache[13] || (_cache[13] = (...args) => $options.replacePoster && $options.replacePoster(...args))
       }, null, 32)
     ]);
   }

package/dist/style.css

@@ -722,6 +722,9 @@
   min-height: 150px;
   margin: 5px 0;
 }
+.editor #editor-content .halo-img-content .halo-picture-area::focus {
+  outline: 1px solid #1a74ff;
+}
 .editor #editor-content .halo-img-content .no-upload,
 .editor #editor-content .halo-img-content .upload-fail {
   -webkit-filter: brightness(0.5);
@@ -742,6 +745,19 @@
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
+.editor #editor-content .video-cover-replace {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  left: 204px;
+  text-align: center;
+  font-size: 14px;
+  width: 88px;
+  line-height: 32px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
 .editor #editor-content .halo-video-area {
   max-height: 200px;
   width: 500px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haluo/biz",
   "description": "rich text",
-  "version": "2.0.12",
+  "version": "2.0.13-beta.1",
   "type": "module",
   "module": "./dist/haluo-biz.js",
   "main": "./dist/haluo-biz.umd.cjs",