vue-editify 0.0.34 → 0.0.36

package/examples/App.vue

@@ -1,19 +1,22 @@
 <template>
 	<div style="padding: 100px 50px 50px 50px">
-		<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html border @change="change" :menu="menuConfig" ref="editify" height="400px"></editify>
+		<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html border @change="change" :menu="menuConfig" ref="editify" height="400px" @after-render="afterRender" :paste-keep-marks="{ 'data-zip': ['span'] }" :custom-parse-node="parseNode"></editify>
 	</div>
 </template>
 <script>
+import { AlexElement } from '../src'
 import { h } from 'vue'
+import Dap from 'dap-util'
 export default {
 	name: 'App',
 	data() {
 		return {
-			value: '<p><span>这是一个基于 </span><span data-editify-code="true">Vue3 + alex-editor</span><span> 构建的一套</span><span style="font-weight: bold;">精美UI样式</span><span>的</span><span style="font-weight: bold;">开箱即用</span><span>的</span><span style="color: #ec1a0a;">富文本编辑器</span></p>',
+			value: '<p><span>这是一个基于 </span><code>Vue3 + alex-editor</code><span> 构建的一套</span><span style="font-weight: bold;">精美UI样式</span><span>的</span><span style="font-weight: bold;">开箱即用</span><span>的</span><span style="color: #ec1a0a;">富文本编辑器</span></p>',
 			menuConfig: {
 				//mode: 'inner',
 				sequence: {
-					alert: 100
+					alert: 100,
+					zip: 101
 				},
 				table: {
 					maxRows: 20,
@@ -23,6 +26,38 @@ export default {
 					show: true
 				},
 				extends: {
+					zip: {
+						title: '上传压缩包',
+						default: () => {
+							return h('span', {}, 'zip')
+						},
+						onOperate: () => {
+							//选择文件上传
+							const upload = document.createElement('input')
+							upload.setAttribute('type', 'file')
+							upload.setAttribute('accept', 'application/zip')
+							upload.onchange = async e => {
+								//获取到文件
+								const file = e.currentTarget.files[0]
+								if (file) {
+									//转成base64
+									const base64 = await Dap.file.dataFileToBase64(file)
+									//创建元素
+									const zipEle = new AlexElement('closed', 'span', { 'data-zip': 'true', contenteditable: 'false' }, null, null)
+									//插入编辑器
+									this.$refs.editify.editor.insertElement(zipEle)
+									//移动光标到新插入的元素
+									this.$refs.editify.editor.range.anchor.moveToStart(zipEle)
+									this.$refs.editify.editor.range.focus.moveToStart(zipEle)
+									//格式化
+									this.$refs.editify.editor.formatElementStack()
+									//渲染
+									this.$refs.editify.editor.domRender()
+								}
+							}
+							upload.click()
+						}
+					},
 					alert: {
 						title: '自定义菜单按钮',
 						leftBorder: true,
@@ -66,6 +101,23 @@ export default {
 		// }, 3000)
 	},
 	methods: {
+		afterRender() {
+			this.$refs.editify.$el.querySelectorAll('[data-zip]').forEach(el => {
+				el.onclick = function () {
+					const url = el.getAttribute('data-zip')
+					const a = document.createElement('a')
+					a.setAttribute('href', url)
+					a.setAttribute('download', 'download.zip')
+					a.click()
+				}
+			})
+		},
+		parseNode(ele) {
+			if (ele.hasMarks() && ele.marks['data-zip']) {
+				ele.type = 'closed'
+			}
+			return ele
+		},
 		change() {
 			console.log(this.$refs.editify.textValue)
 		},
@@ -88,4 +140,14 @@ body {
 	height: 100%;
 	overflow: auto;
 }
+
+span[data-zip] {
+	display: inline-block;
+	width: 40px;
+	height: 40px;
+	background: url(https://www.ling0523.cn/images/image_0_1702456046669.png) no-repeat center;
+	background-size: cover;
+	cursor: pointer;
+	margin: 0 10px;
+}
 </style>

package/lib/editify.es.js

@@ -1844,7 +1844,9 @@ const initEditorOptions = (options) => {
     //自定义视频粘贴方法
     customVideoPaste: null,
     //自定义处理不可编辑元素合并的逻辑
-    customMerge: null
+    customMerge: null,
+    //自定义dom转为非文本元素的后续处理逻辑
+    customParseNode: null
   };
   if (obj$1.common.isObject(options)) {
     if (typeof options.disabled == "boolean") {
@@ -1883,6 +1885,9 @@ const initEditorOptions = (options) => {
     if (typeof options.customMerge == "function") {
       opts.customMerge = options.customMerge;
     }
+    if (typeof options.customParseNode == "function") {
+      opts.customParseNode = options.customParseNode;
+    }
   }
   return opts;
 };
@@ -3258,6 +3263,7 @@ class AlexEditor {
     this.customImagePaste = options.customImagePaste;
     this.customVideoPaste = options.customVideoPaste;
     this.customMerge = options.customMerge;
+    this.customParseNode = options.customParseNode;
     this.useClipboard = canUseClipboard();
     this.history = new AlexHistory();
     this.stack = this.parseHtml(this.value);
@@ -4251,6 +4257,9 @@ class AlexEditor {
         }
       });
     }
+    if (typeof this.customParseNode == "function") {
+      element2 = this.customParseNode.apply(this, [element2]);
+    }
     return element2;
   }
   /**
@@ -15387,6 +15396,21 @@ const editorProps = {
   menu: {
     type: Object,
     default: null
+  },
+  //dom转换时的额外处理
+  customParseNode: {
+    type: Function,
+    default: null
+  },
+  //粘贴html时额外保留的标记（全部元素生效）
+  pasteKeepMarks: {
+    type: Object,
+    default: null
+  },
+  //粘贴html时额外保留的样式（仅在非文本元素生效）
+  pasteKeepStyles: {
+    type: Object,
+    default: null
   }
 };
 const getColNumbers = (row) => {
@@ -15479,19 +15503,6 @@ const parseList = function(element2) {
     }
   }
 };
-const parseCode = function(element2) {
-  if (element2.parsedom == "code") {
-    element2.parsedom = "span";
-    const marks = {
-      "data-editify-code": true
-    };
-    if (element2.hasMarks()) {
-      Object.assign(element2.marks, marks);
-    } else {
-      element2.marks = marks;
-    }
-  }
-};
 const mediaHandle = function(element2) {
   if (element2.parsedom == "img" || element2.parsedom == "video" || element2.parsedom == "a") {
     const marks = {
@@ -21186,7 +21197,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 14, _hoisted_1$1);
 }
 const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-42f60b43"]]);
-const Editify_vue_vue_type_style_index_0_scoped_237c369a_lang = "";
+const Editify_vue_vue_type_style_index_0_scoped_8415c1dc_lang = "";
 const _sfc_main = {
   name: "editify",
   props: { ...editorProps },
@@ -21312,7 +21323,6 @@ const _sfc_main = {
         disabled: this.disabled,
         renderRules: [
           parseList,
-          parseCode,
           mediaHandle,
           tableHandle,
           (el) => {
@@ -21327,7 +21337,8 @@ const _sfc_main = {
         allowPasteHtml: this.allowPasteHtml,
         customImagePaste: this.customImagePaste,
         customVideoPaste: this.customVideoPaste,
-        customMerge: this.handleCustomMerge
+        customMerge: this.handleCustomMerge,
+        customParseNode: this.handleCustomParseNode
       });
       this.internalModify(this.editor.value);
       this.editor.on("change", this.handleEditorChange);
@@ -21468,6 +21479,24 @@ const _sfc_main = {
         ele.children = null;
       }
     },
+    //针对node转为元素进行额外的处理
+    handleCustomParseNode(ele) {
+      if (ele.parsedom == "code") {
+        ele.parsedom = "span";
+        const marks = {
+          "data-editify-code": true
+        };
+        if (ele.hasMarks()) {
+          Object.assign(ele.marks, marks);
+        } else {
+          ele.marks = marks;
+        }
+      }
+      if (typeof this.customParseNode == "function") {
+        ele = this.customParseNode.apply(this, [ele]);
+      }
+      return ele;
+    },
     //隐藏工具条
     hideToolbar() {
       this.toolbarOptions.show = false;
@@ -21703,20 +21732,22 @@ const _sfc_main = {
     },
     //编辑器粘贴html
     handlePasteHtml(elements, data2) {
+      const keepStyles = Object.assign(pasteKeepData.styles, this.pasteKeepStyles || {});
+      const keepMarks = Object.assign(pasteKeepData.marks, this.pasteKeepMarks || {});
       AlexElement.flatElements(elements).forEach((el) => {
         let marks = {};
         let styles = {};
         if (el.hasMarks()) {
-          for (let key in pasteKeepData.marks) {
-            if (el.marks.hasOwnProperty(key) && (Array.isArray(pasteKeepData.marks[key]) && pasteKeepData.marks[key].includes(el.parsedom) || pasteKeepData.marks[key] == "*")) {
+          for (let key in keepMarks) {
+            if (el.marks.hasOwnProperty(key) && (Array.isArray(keepMarks[key]) && keepMarks[key].includes(el.parsedom) || keepMarks[key] == "*")) {
               marks[key] = el.marks[key];
             }
           }
           el.marks = marks;
         }
         if (el.hasStyles() && !el.isText()) {
-          for (let key in pasteKeepData.styles) {
-            if (el.styles.hasOwnProperty(key) && (Array.isArray(pasteKeepData.styles[key]) && pasteKeepData.styles[key].includes(el.parsedom) || pasteKeepData.styles[key] == "*")) {
+          for (let key in keepStyles) {
+            if (el.styles.hasOwnProperty(key) && (Array.isArray(keepStyles[key]) && keepStyles[key].includes(el.parsedom) || keepStyles[key] == "*")) {
               styles[key] = el.styles[key];
             }
           }
@@ -22783,7 +22814,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ]);
 }
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-237c369a"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-8415c1dc"]]);
 const iconfont = "";
 const en_US = {
   textWrapUp: "Up feed",
@@ -22962,7 +22993,7 @@ const i18n = (locale) => {
     return translations[locale][key];
   };
 };
-const version = "0.0.34";
+const version = "0.0.36";
 const install = (app, props) => {
   const locale = (props ? props.locale : "zh_CN") || "zh_CN";
   app.provide("$editTrans", i18n(locale));