vue-editify 0.1.32 → 0.1.34

package/examples/App.vue

@@ -14,35 +14,23 @@ const menuConfig = ref<MenuConfigType>({
 	sourceView: {
 		show: true
 	},
+	video: {
+		multiple: true
+	},
 	fullScreen: {
 		show: true
 	}
 })
 
-//自定义插件
-const redPlugin = () => {
-	const plugin: PluginType = () => {
-		return {
-			name: 'red',
-			renderRule: (el: AlexElement) => {
-				if (el.hasStyles()) {
-					el.styles!['color'] = 'red'
-				} else {
-					el.styles = {
-						color: 'red'
-					}
-				}
-				return el
-			}
-		}
-	}
-	return plugin
-}
 const plugins = ref<PluginType[]>([
 	attachment({
-		multiple: true
-	}),
-	redPlugin()
+		multiple: true,
+		customUpload: (files: File[]) => {
+			return files.map(item => {
+				return 'xxx'
+			})
+		}
+	})
 ])
 </script>
 <style lang="less">

package/lib/editify.es.js

@@ -22967,7 +22967,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteImage = () => {
-      emits("insert", remoteUrl.value);
+      emits("insert", [remoteUrl.value]);
     };
     const selectFile = async (e) => {
       const inputEle = e.currentTarget;
@@ -23003,18 +23003,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         filterFiles.push(file2);
       }
       if (filterFiles.length) {
-        let images = [];
+        let urls = [];
         if (typeof props.customUpload == "function") {
-          images = await props.customUpload(filterFiles) || [];
+          urls = await props.customUpload(filterFiles) || [];
         } else {
           for (let i = 0; i < filterFiles.length; i++) {
             const url = await file.dataFileToBase64(filterFiles[i]);
-            images.push(url);
+            urls.push(url);
           }
         }
-        images.forEach((url) => {
-          emits("insert", url);
-        });
+        emits("insert", urls);
       }
       inputEle.value = "";
     };
@@ -23075,7 +23073,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-17d0a9c4"]]);
+const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b63a5bff"]]);
 const InsertVideoProps = {
   //主题色
   color: {
@@ -23164,7 +23162,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteVideo = () => {
-      emits("insert", remoteUrl.value);
+      emits("insert", [remoteUrl.value]);
     };
     const selectFile = async (e) => {
       const inputEle = e.currentTarget;
@@ -23200,18 +23198,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         filterFiles.push(file2);
       }
       if (filterFiles.length) {
-        let videos = [];
+        let urls = [];
         if (typeof props.customUpload == "function") {
-          videos = await props.customUpload(filterFiles) || [];
+          urls = await props.customUpload(filterFiles) || [];
         } else {
           for (let i = 0; i < filterFiles.length; i++) {
             const url = await file.dataFileToBase64(filterFiles[i]);
-            videos.push(url);
+            urls.push(url);
           }
         }
-        videos.forEach((url) => {
-          emits("insert", url);
-        });
+        emits("insert", urls);
       }
       inputEle.value = "";
     };
@@ -23272,7 +23268,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a54e06d0"]]);
+const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4383bae9"]]);
 const InsertTableProps = {
   //主题色
   color: {
@@ -23907,7 +23903,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         if (!val) {
           return;
         }
-        insertImage(editor.value, val);
+        const urls = val.filter((url) => {
+          return !!url;
+        });
+        if (urls.length == 0) {
+          return;
+        }
+        urls.forEach((url) => {
+          insertImage(editor.value, url);
+        });
         editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
@@ -23915,7 +23919,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         if (!val) {
           return;
         }
-        insertVideo(editor.value, val);
+        const urls = val.filter((url) => {
+          return !!url;
+        });
+        if (urls.length == 0) {
+          return;
+        }
+        urls.forEach((url) => {
+          insertVideo(editor.value, url);
+        });
         editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
@@ -24538,8 +24550,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     const layer = btn.$refs.layerRef;
                     layer.setPosition();
                   },
-                  onInsert: (url) => {
-                    handleOperate("image", url);
+                  onInsert: (urls) => {
+                    handleOperate("image", urls);
                     const btn = itemInstance.proxy.$refs.btnRef;
                     btn.show = false;
                   }
@@ -24579,8 +24591,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     const layer = btn.$refs.layerRef;
                     layer.setPosition();
                   },
-                  onInsert: (url) => {
-                    handleOperate("video", url);
+                  onInsert: (urls) => {
+                    handleOperate("video", urls);
                     const btn = itemInstance.proxy.$refs.btnRef;
                     btn.show = false;
                   }
@@ -24768,7 +24780,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-fbf50ae5"]]);
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-98c51b8e"]]);
 const EditifyProps = {
   //国际化语言类型
   locale: {
@@ -25956,7 +25968,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteAttachment = () => {
-      emits("insert", attachmentName.value, attachmentUrl.value);
+      emits("insert", attachmentName.value, [attachmentUrl.value]);
     };
     const triggerFileInput = () => {
       fileInputRef.value.click();
@@ -25994,18 +26006,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         filterFiles.push(file2);
       }
       if (filterFiles.length) {
-        let attachments = [];
+        let urls = [];
         if (typeof props.customUpload == "function") {
-          attachments = await props.customUpload(filterFiles) || [];
+          urls = await props.customUpload(filterFiles) || [];
         } else {
           for (let i = 0; i < filterFiles.length; i++) {
             const url = await file.dataFileToBase64(filterFiles[i]);
-            attachments.push(url);
+            urls.push(url);
           }
         }
-        attachments.forEach((url) => {
-          emits("insert", attachmentName.value, url);
-        });
+        emits("insert", attachmentName.value, urls);
       }
       fileInputRef.value.value = "";
     };
@@ -26102,7 +26112,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f995f4bd"]]);
+const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52b1e545"]]);
 const isAttachment = (element2) => {
   if (element2.isEmpty()) {
     return false;
@@ -26160,22 +26170,27 @@ const attachment = (options) => {
             onChange: () => {
               btnInstance.$refs.layerRef.setPosition();
             },
-            onInsert: (name, url) => {
-              if (url) {
-                const marks = {
-                  "data-attachment": url,
-                  "data-attachment-name": name || editTrans("attachmentDefaultName"),
-                  contenteditable: "false"
-                };
-                const attachmentElement = new AlexElement("closed", "span", marks, null, null);
+            onInsert: (name, urls) => {
+              urls = urls.filter((url) => {
+                return !!url;
+              });
+              if (urls.length) {
                 const editor = editifyInstance.exposed.editor.value;
-                editor.insertElement(attachmentElement);
-                const beforeText = AlexElement.getSpaceElement();
-                const afterText = AlexElement.getSpaceElement();
-                editor.addElementAfter(afterText, attachmentElement);
-                editor.addElementBefore(beforeText, attachmentElement);
-                editor.range.anchor.moveToStart(afterText);
-                editor.range.focus.moveToStart(afterText);
+                urls.forEach((url) => {
+                  const marks = {
+                    "data-attachment": url,
+                    "data-attachment-name": name || editTrans("attachmentDefaultName"),
+                    contenteditable: "false"
+                  };
+                  const attachmentElement = new AlexElement("closed", "span", marks, null, null);
+                  editor.insertElement(attachmentElement);
+                  const beforeText = AlexElement.getSpaceElement();
+                  const afterText = AlexElement.getSpaceElement();
+                  editor.addElementAfter(afterText, attachmentElement);
+                  editor.addElementBefore(beforeText, attachmentElement);
+                  editor.range.anchor.moveToStart(afterText);
+                  editor.range.focus.moveToStart(afterText);
+                });
                 editor.formatElementStack();
                 editor.domRender();
                 editor.rangeRender();
@@ -26242,7 +26257,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.32";
+const version = "0.1.34";
 console.log(`%c vue-editify %c v${version} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
 export {
   AlexElement,