vue-editify 0.0.50 → 0.1.0

package/examples/App.vue

@@ -1,6 +1,21 @@
 <template>
 	<div style="padding: 100px 50px 50px 50px; height: 100%; box-sizing: border-box">
-		<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html @change="change" :menu="menuConfig" ref="editify" :height="'300px'" @after-render="afterRender" :paste-keep-marks="{ 'data-zip': ['span'] }" autofocus :custom-parse-node="parseNode" :show-word-length="true" :border="true"></editify>
+		<div style="display: none" ref="bigData">
+			<div>
+				<div id="1">
+					<div id="2">
+						<h3 id="3">
+							<p>333div</p>
+                            <p>333div</p>
+						</h3>
+					</div>
+				</div>
+				<p>
+                    <pre>3333</pre>
+                </p>
+			</div>
+		</div>
+		<editify v-model="value" placeholder="请输入正文内容..." allow-paste-html :menu="menuConfig" ref="editify" :paste-keep-marks="{ 'data-zip': ['span'] }" autofocus :show-word-length="true" :border="true" :disabled="disabled" @updateview="updateview" :customParseNoe="customParseNoe"></editify>
 	</div>
 </template>
 <script>
@@ -46,7 +61,7 @@ export default {
 									//转成base64
 									const base64 = await Dap.file.dataFileToBase64(file)
 									//创建元素
-									const zipEle = new AlexElement('closed', 'span', { 'data-zip': 'true', contenteditable: 'false' }, null, null)
+									const zipEle = new AlexElement('closed', 'span', { 'data-zip': base64, contenteditable: 'false' }, null, null)
 									//插入编辑器
 									this.$refs.editify.editor.insertElement(zipEle)
 									//移动光标到新插入的元素
@@ -60,48 +75,21 @@ export default {
 							}
 							upload.click()
 						}
-					},
-					alert: {
-						title: '自定义菜单按钮',
-						leftBorder: true,
-						rightBorder: false,
-						disabled: false,
-						active: false,
-						type: 'select',
-						options: [
-							{
-								label: '自定义功能1',
-								value: '1',
-								style: {
-									color: '#f30'
-								}
-							},
-							{
-								label: '自定义功能2',
-								value: '2',
-								style: {
-									fontWeight: 'bold'
-								}
-							},
-							{
-								label: '自定义功能3',
-								value: '3'
-							}
-						],
-						onOperate: function (name, val, instance) {
-							this.insertHtml('<p>我是插入的HTML</p>', true, false)
-						},
-						default: () => h('span', {}, '自定义菜单')
 					}
 				}
 			},
-			btn: null
+			btn: null,
+			disabled: false
 		}
 	},
-	mounted() {},
+	mounted() {
+		setTimeout(() => {
+			this.value = this.$refs.bigData.innerHTML
+		}, 500)
+	},
 	methods: {
-		afterRender() {
-			this.$refs.editify.$el.querySelectorAll('[data-zip]').forEach(el => {
+		updateview() {
+			this.$refs.editify.$el.querySelectorAll('span[data-zip]').forEach(el => {
 				el.onclick = function () {
 					const url = el.getAttribute('data-zip')
 					const a = document.createElement('a')
@@ -111,17 +99,11 @@ export default {
 				}
 			})
 		},
-		parseNode(ele) {
+		customParseNoe(ele) {
 			if (ele.hasMarks() && ele.marks['data-zip']) {
 				ele.type = 'closed'
 			}
 			return ele
-		},
-		change() {
-			//console.log(this.$refs.editify.textValue)
-		},
-		operate(name, val) {
-			//console.log('触发operate事件', name, val)
 		}
 	}
 }