vue-editify 0.0.16 → 0.0.18

package/src/Editify.vue

@@ -119,10 +119,10 @@ export default {
 			}
 			//如果是外部修改，需要重新渲染编辑器
 			this.editor.stack = this.editor.parseHtml(newVal)
+			this.editor.range = null
 			this.editor.formatElementStack()
-			this.editor.range.anchor.moveToStart(this.editor.stack[0])
-			this.editor.range.focus.moveToStart(this.editor.stack[0])
 			this.editor.domRender()
+			this.editor.rangeRender()
 		},
 		//代码视图切换
 		isSourceView(newValue) {
@@ -430,6 +430,9 @@ export default {
 							else {
 								element.marks['data-editify-task'] = 'checked'
 							}
+							if (!this.editor.range) {
+								this.editor.initRange()
+							}
 							this.editor.range.anchor.moveToEnd(element)
 							this.editor.range.focus.moveToEnd(element)
 							this.editor.formatElementStack()
@@ -533,6 +536,9 @@ export default {
 				const key = node.getAttribute('data-editify-element')
 				if (key) {
 					const element = this.editor.getElementByKey(key)
+					if (!this.editor.range) {
+						this.editor.initRange()
+					}
 					this.editor.range.anchor.moveToStart(element)
 					this.editor.range.focus.moveToEnd(element)
 					this.editor.rangeRender()
@@ -687,6 +693,9 @@ export default {
 			if (this.disabled) {
 				return null
 			}
+			if (!this.editor.range) {
+				return null
+			}
 			if (this.editor.range.anchor.element.isEqual(this.editor.range.focus.element)) {
 				return this.getParsedomElementByElement(this.editor.range.anchor.element, parsedom)
 			}
@@ -723,6 +732,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const element = this.getCurrentParsedomElement(parsedom)
 			if (element) {
 				element.toEmpty()
@@ -736,6 +748,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const link = this.getCurrentParsedomElement('a')
 			if (link) {
 				link.parsedom = AlexElement.TEXT_NODE
@@ -751,6 +766,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const values = getButtonOptionsConfig(this.$editTrans, this.$editLocale).heading.map(item => {
 				return item.value
 			})
@@ -785,6 +803,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			//起点和终点在一起
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
@@ -824,6 +845,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			//起点和终点在一起
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
@@ -863,6 +887,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const active = this.queryTextStyle(name, value)
 			if (active) {
 				this.editor.removeTextStyle([name])
@@ -884,6 +911,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const active = this.queryTextMark(name, value)
 			if (active) {
 				this.editor.removeTextMark([name])
@@ -905,6 +935,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			this.editor.removeTextStyle()
 			this.editor.removeTextMark()
 			this.editor.formatElementStack()
@@ -916,6 +949,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				const inblock = this.editor.range.anchor.element.getInblock()
@@ -1009,6 +1045,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			//起点和终点在一起
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
@@ -1046,6 +1085,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				const inblock = this.editor.range.anchor.element.getInblock()
@@ -1109,6 +1151,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const fn = element => {
 				if (element.hasStyles()) {
 					if (element.styles.hasOwnProperty('text-indent')) {
@@ -1157,6 +1202,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const fn = element => {
 				if (element.hasStyles() && element.styles.hasOwnProperty('text-indent')) {
 					let val = element.styles['text-indent']
@@ -1177,7 +1225,7 @@ export default {
 					fn(block)
 				}
 			} else {
-				const result = this.getElementsByRange(true, false)
+				const result = this.editor.getElementsByRange(true, false)
 				result.forEach(item => {
 					const block = item.element.getBlock()
 					const inblock = item.element.getInblock()
@@ -1197,6 +1245,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			if (!url || typeof url != 'string') {
 				throw new Error('An image address must be given')
 			}
@@ -1219,6 +1270,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			if (!url || typeof url != 'string') {
 				throw new Error('A video address must be given')
 			}
@@ -1244,171 +1298,199 @@ export default {
 		},
 		//api：选区是否含有代码块样式
 		hasPreStyle() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return this.editor.range.anchor.element.isPreStyle()
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.some(item => {
-					return item.element.isPreStyle()
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.some(item => {
+				return item.element.isPreStyle()
+			})
 		},
 		//api：选区是否含有引用
 		hasQuote() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return block.parsedom == 'blockquote'
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.some(item => {
-					if (item.element.isBlock()) {
-						return item.element.parsedom == 'blockquote'
-					} else {
-						const block = item.element.getBlock()
-						return block.parsedom == 'blockquote'
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.some(item => {
+				if (item.element.isBlock()) {
+					return item.element.parsedom == 'blockquote'
+				} else {
+					const block = item.element.getBlock()
+					return block.parsedom == 'blockquote'
+				}
+			})
 		},
 		//api：选区是否含有列表
 		hasList(ordered = false) {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsList(block, ordered)
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.some(item => {
-					if (item.element.isBlock()) {
-						return blockIsList(item.element, ordered)
-					} else {
-						const block = item.element.getBlock()
-						return blockIsList(block, ordered)
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.some(item => {
+				if (item.element.isBlock()) {
+					return blockIsList(item.element, ordered)
+				} else {
+					const block = item.element.getBlock()
+					return blockIsList(block, ordered)
+				}
+			})
 		},
 		//api：选区是否含有链接
 		hasLink() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return !!this.getParsedomElementByElement(this.editor.range.anchor.element, 'a')
-			} else {
-				const result = this.editor.getElementsByRange(true, true).filter(item => {
-					return item.element.isText()
-				})
-				return result.some(item => {
-					return !!this.getParsedomElementByElement(item.element, 'a')
-				})
 			}
+			const result = this.editor.getElementsByRange(true, true).filter(item => {
+				return item.element.isText()
+			})
+			return result.some(item => {
+				return !!this.getParsedomElementByElement(item.element, 'a')
+			})
 		},
 		//api：选区是否含有表格
 		hasTable() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return block.parsedom == 'table'
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.some(item => {
-					if (item.element.isBlock()) {
-						return item.element.parsedom == 'table'
-					} else {
-						const block = item.element.getBlock()
-						return block.parsedom == 'table'
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.some(item => {
+				if (item.element.isBlock()) {
+					return item.element.parsedom == 'table'
+				} else {
+					const block = item.element.getBlock()
+					return block.parsedom == 'table'
+				}
+			})
 		},
 		//api：选区是否含有任务列表
 		hasTask() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsTask(block)
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.some(item => {
-					if (item.element.isBlock()) {
-						return blockIsTask(item.element)
-					} else {
-						const block = item.element.getBlock()
-						return blockIsTask(block)
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.some(item => {
+				if (item.element.isBlock()) {
+					return blockIsTask(item.element)
+				} else {
+					const block = item.element.getBlock()
+					return blockIsTask(block)
+				}
+			})
 		},
 		//选区是否含有图片
 		hasImage() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return this.editor.range.anchor.element.isClosed() && this.editor.range.anchor.element.parsedom == 'img'
-			} else {
-				const result = this.editor.getElementsByRange(true, true)
-				return result.some(item => {
-					return item.element.isClosed() && item.element.parsedom == 'img'
-				})
 			}
+			const result = this.editor.getElementsByRange(true, true)
+			return result.some(item => {
+				return item.element.isClosed() && item.element.parsedom == 'img'
+			})
 		},
 		//选区是否含有视频
 		hasVideo() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return this.editor.range.anchor.element.isClosed() && this.editor.range.anchor.element.parsedom == 'video'
-			} else {
-				const result = this.editor.getElementsByRange(true, true)
-				return result.some(item => {
-					return item.element.isClosed() && item.element.parsedom == 'video'
-				})
 			}
+			const result = this.editor.getElementsByRange(true, true)
+			return result.some(item => {
+				return item.element.isClosed() && item.element.parsedom == 'video'
+			})
 		},
 		//api：选区是否全部在引用内
 		inQuote() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return block.parsedom == 'blockquote'
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.every(item => {
-					if (item.element.isBlock()) {
-						return item.element.parsedom == 'blockquote'
-					} else {
-						const block = item.element.getBlock()
-						return block.parsedom == 'blockquote'
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.every(item => {
+				if (item.element.isBlock()) {
+					return item.element.parsedom == 'blockquote'
+				} else {
+					const block = item.element.getBlock()
+					return block.parsedom == 'blockquote'
+				}
+			})
 		},
 		//api：选区是否全部在列表内
 		inList(ordered = false) {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsList(block, ordered)
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.every(item => {
-					if (item.element.isBlock()) {
-						return blockIsList(item.element, ordered)
-					} else {
-						const block = item.element.getBlock()
-						return blockIsList(block, ordered)
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.every(item => {
+				if (item.element.isBlock()) {
+					return blockIsList(item.element, ordered)
+				} else {
+					const block = item.element.getBlock()
+					return blockIsList(block, ordered)
+				}
+			})
 		},
 		//api：选区是否全部在任务列表里
 		inTask() {
+			if (!this.editor.range) {
+				return false
+			}
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsTask(block)
-			} else {
-				const result = this.editor.getElementsByRange(true, false)
-				return result.every(item => {
-					if (item.element.isBlock()) {
-						return blockIsTask(item.element)
-					} else {
-						const block = item.element.getBlock()
-						return blockIsTask(block)
-					}
-				})
 			}
+			const result = this.editor.getElementsByRange(true, false)
+			return result.every(item => {
+				if (item.element.isBlock()) {
+					return blockIsTask(item.element)
+				} else {
+					const block = item.element.getBlock()
+					return blockIsTask(block)
+				}
+			})
 		},
 		//api：创建一个空的表格
 		insertTable(rowLength, colLength) {
+			if (this.disabled) {
+				return
+			}
+			if (!this.editor.range) {
+				return
+			}
 			const table = new AlexElement('block', 'table', null, null, null)
 			const tbody = new AlexElement('inblock', 'tbody', null, null, null)
 			this.editor.addElementTo(tbody, table)
@@ -1439,6 +1521,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const pre = this.getCurrentParsedomElement('pre')
 			if (pre) {
 				let content = ''
@@ -1517,6 +1602,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			this.editor.insertText(text)
 			this.editor.formatElementStack()
 			this.editor.domRender()
@@ -1527,6 +1615,9 @@ export default {
 			if (this.disabled) {
 				return
 			}
+			if (!this.editor.range) {
+				return
+			}
 			const elements = this.editor.parseHtml(html)
 			for (let i = 0; i < elements.length; i++) {
 				this.editor.insertElement(elements[i], false)
@@ -1861,6 +1952,12 @@ export default {
 			:deep(a) {
 				cursor: pointer;
 			}
+
+			:deep(table) {
+				td:not(:last-child)::after {
+					cursor: auto;
+				}
+			}
 		}
 	}
 

package/src/core/index.js

@@ -353,6 +353,9 @@ export const tableHandle = function (element) {
 
 //更新代码块内的光标位置
 const updateRangeInPre = function (element, originalTextElements, newElements) {
+	if (!this.range) {
+		return
+	}
 	//如果虚拟光标的起点在代码块内对虚拟光标的起点进行重新定位
 	if (this.range.anchor.element.getBlock().isEqual(element)) {
 		//获取起点所在文本元素的在所有文本元素中的序列

package/src/index.js

@@ -7,7 +7,7 @@ import './icon/iconfont.css'
 //引入国际化
 import i18n from './locale'
 //版本号
-const version = '0.0.16'
+const version = '0.0.18'
 //安装函数
 const install = (app, props) => {
 	const locale = (props ? props.locale : 'zh_CN') || 'zh_CN'