vue-editify 0.0.47 → 0.0.49

package/src/Editify.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="editify">
+	<div class="editify" :class="{ fullheight: height === true && !isFullScreen, fullscreen: isFullScreen }">
 		<!-- 菜单区域 -->
 		<Menu v-if="menuConfig.use" :config="menuConfig" :disabled="disabled || !canUseMenu" :color="color" ref="menu"></Menu>
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
-		<div ref="body" class="editify-body" :class="{ border: border, menu_inner: menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="uid">
+		<div ref="body" class="editify-body" :class="{ border: showBorder, menu_inner: menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="uid">
 			<!-- 编辑器 -->
 			<div ref="content" class="editify-content" :class="{ placeholder: showPlaceholder, disabled: disabled }" :style="contentStyle" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
 			<!-- 代码视图 -->
@@ -12,7 +12,7 @@
 			<Toolbar ref="toolbar" v-model="toolbarOptions.show" :node="toolbarOptions.node" :type="toolbarOptions.type" :config="toolbarConfig"></Toolbar>
 		</div>
 		<!-- 编辑器尾部 -->
-		<div v-if="showWordLength" class="editify-footer">
+		<div v-if="showWordLength" class="editify-footer" :class="{ fullscreen: isFullScreen && !isSourceView }" ref="footer">
 			<!-- 字数统计 -->
 			<div class="editify-footer-words">{{ $editTrans('totalWordCount') }}{{ textValue.length }}</div>
 		</div>
@@ -45,6 +45,8 @@ export default {
 			isModelChange: false,
 			//是否代码视图
 			isSourceView: false,
+			//是否全屏
+			isFullScreen: false,
 			//是否正在输入中文
 			isInputChinese: false,
 			//表格列宽拖拽记录数据
@@ -64,7 +66,9 @@ export default {
 			//rangeUpdate更新延时器
 			updateTimer: null,
 			//菜单栏是否可以使用标识
-			canUseMenu: false
+			canUseMenu: false,
+			//手动设定的编辑器编辑区域高度
+			contentHeight: 0
 		}
 	},
 	computed: {
@@ -91,8 +95,21 @@ export default {
 			}
 			return false
 		},
+		//是否显示边框
+		showBorder() {
+			//全屏模式下不显示边框
+			if (this.isFullScreen) {
+				return false
+			}
+			return this.border
+		},
 		//编辑器样式设置
 		contentStyle() {
+			if (this.height === true || this.isFullScreen) {
+				return {
+					height: this.contentHeight + 'px'
+				}
+			}
 			return this.autoheight ? { minHeight: this.height } : { height: this.height }
 		},
 		//最终生效的工具栏配置
@@ -133,6 +150,21 @@ export default {
 					this.handleToolbar()
 				}
 			}
+		},
+		//全屏切换
+		isFullScreen() {
+			this.$nextTick(() => {
+				this.setContentHeight()
+			})
+		},
+		//监听height为true
+		height: {
+			immediate: true,
+			handler: function () {
+				this.$nextTick(() => {
+					this.setContentHeight()
+				})
+			}
 		}
 	},
 	mounted() {
@@ -149,7 +181,10 @@ export default {
 		//鼠标点击箭头
 		Dap.event.on(document.documentElement, `click.editify_${this.uid}`, this.documentClick)
 		//监听窗口改变
-		Dap.event.on(window, `resize.editify_${this.uid}`, this.setVideoHeight)
+		Dap.event.on(window, `resize.editify_${this.uid}`, () => {
+			this.setVideoHeight()
+			this.setContentHeight()
+		})
 	},
 	methods: {
 		//初始创建编辑器
@@ -236,13 +271,13 @@ export default {
 			removeScroll(this.$refs.content)
 		},
 		//工具条显示判断
-		handleToolbar() {
+		handleToolbar(useCache = false) {
 			if (this.disabled || this.isSourceView) {
 				return
 			}
 			this.hideToolbar()
 			this.$nextTick(() => {
-				const table = this.getCurrentParsedomElement('table', true)
+				const table = this.getCurrentParsedomElement('table', useCache)
 				const pre = this.getCurrentParsedomElement('pre', true)
 				const link = this.getCurrentParsedomElement('a', true)
 				const image = this.getCurrentParsedomElement('img', true)
@@ -288,7 +323,7 @@ export default {
 						this.toolbarOptions.show = true
 					}
 				} else {
-					const result = this.editor.getElementsByRange(true, true, true).filter(item => {
+					const result = this.editor.getElementsByRange(true).flatIncludes.filter(item => {
 						return item.element.isText()
 					})
 					if (result.length && !this.hasTable(true) && !this.hasPreStyle(true) && !this.hasLink(true) && !this.hasImage(true) && !this.hasVideo(true)) {
@@ -472,7 +507,7 @@ export default {
 			if (this.disabled) {
 				return
 			}
-			if (this.border && this.color) {
+			if (this.border && this.color && !this.isFullScreen) {
 				//恢复编辑区域边框颜色
 				this.$refs.body.style.borderColor = ''
 				//恢复编辑区域阴影颜色
@@ -490,7 +525,7 @@ export default {
 			if (this.disabled) {
 				return
 			}
-			if (this.border && this.color) {
+			if (this.border && this.color && !this.isFullScreen) {
 				//编辑区域边框颜色
 				this.$refs.body.style.borderColor = this.color
 				//转换颜色值
@@ -576,7 +611,7 @@ export default {
 			this.$emit('insertparagraph', this.value)
 		},
 		//编辑器焦点更新
-		handleRangeUpdate(range) {
+		handleRangeUpdate() {
 			if (this.disabled) {
 				return
 			}
@@ -584,21 +619,21 @@ export default {
 				clearTimeout(this.updateTimer)
 			}
 			this.updateTimer = setTimeout(() => {
-				//如果使用菜单栏或者工具条事先调用两次作数据缓存
+				//如果使用工具条或者菜单栏
 				if (this.toolbarConfig.use || this.menuConfig.use) {
-					this.editor.getElementsByRange(true, false)
-					this.editor.getElementsByRange(true, true)
-				}
-				//如果使用工具条
-				if (this.toolbarConfig.use) {
-					this.handleToolbar()
-				}
-				//如果使用菜单栏
-				if (this.menuConfig.use) {
-					this.$refs.menu.handleRangeUpdate()
+					//先获取选区内的元素设置内部缓存
+					this.editor.getElementsByRange()
+					//如果使用工具条
+					if (this.toolbarConfig.use) {
+						this.handleToolbar(true)
+					}
+					//如果使用菜单栏
+					if (this.menuConfig.use) {
+						this.$refs.menu.handleRangeUpdate(true)
+					}
 				}
 			}, 200)
-			this.$emit('rangeupdate', this.value, range)
+			this.$emit('rangeupdate', this.value)
 		},
 		//编辑器复制
 		handleCopy(text, html) {
@@ -613,7 +648,7 @@ export default {
 			this.$emit('paste-text', data)
 		},
 		//编辑器粘贴html
-		handlePasteHtml(elements, data) {
+		handlePasteHtml(elements) {
 			const keepStyles = Object.assign(pasteKeepData.styles, this.pasteKeepStyles || {})
 			const keepMarks = Object.assign(pasteKeepData.marks, this.pasteKeepMarks || {})
 			//粘贴html时过滤元素的样式和属性
@@ -677,6 +712,23 @@ export default {
 				video.style.height = video.offsetWidth / this.videoRatio + 'px'
 			})
 		},
+		//设置编辑器主体高度
+		setContentHeight() {
+			if (this.height === true || this.isFullScreen) {
+				let height = this.$el.offsetHeight
+				if (this.menuConfig.use) {
+					height -= this.$refs.menu.$el.offsetHeight
+				}
+				if (this.showWordLength) {
+					height -= this.$refs.footer.offsetHeight
+				}
+				if (this.$refs.menu.menuMode == 'default') {
+					height -= 10
+				}
+				//这里减去2px是因为body设了padding:1px
+				this.contentHeight = height - 2
+			}
+		},
 
 		//api：光标设置到文档底部
 		collapseToEnd() {
@@ -727,7 +779,7 @@ export default {
 			if (this.editor.range.anchor.element.isEqual(this.editor.range.focus.element)) {
 				return this.getParsedomElementByElement(this.editor.range.anchor.element, parsedom)
 			}
-			const arr = this.editor.getElementsByRange(true, false, useCache).map(item => {
+			const arr = this.editor.getElementsByRange(useCache).includes.map(item => {
 				return this.getParsedomElementByElement(item.element, parsedom)
 			})
 			let hasNull = arr.some(el => {
@@ -814,7 +866,7 @@ export default {
 				//设置标题
 				block.parsedom = parsedom
 			} else {
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(el => {
 					if (el.element.isBlock()) {
 						blockToParagraph(el.element)
@@ -853,7 +905,7 @@ export default {
 			//起点和终点不在一起
 			else {
 				let blocks = []
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(item => {
 					const block = item.element.getBlock()
 					const exist = blocks.some(el => block.isEqual(el))
@@ -897,7 +949,7 @@ export default {
 			//起点和终点不在一起
 			else {
 				let blocks = []
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(item => {
 					const block = item.element.getBlock()
 					const exist = blocks.some(el => block.isEqual(el))
@@ -930,11 +982,11 @@ export default {
 			}
 			const active = this.queryTextStyle(name, value, useCache)
 			if (active) {
-				this.editor.removeTextStyle([name], useCache)
+				this.editor.removeTextStyle([name], true)
 			} else {
 				let styles = {}
 				styles[name] = value
-				this.editor.setTextStyle(styles, useCache)
+				this.editor.setTextStyle(styles, true)
 			}
 			if (isRender) {
 				this.editor.formatElementStack()
@@ -956,11 +1008,11 @@ export default {
 			}
 			const active = this.queryTextMark(name, value, useCache)
 			if (active) {
-				this.editor.removeTextMark([name], useCache)
+				this.editor.removeTextMark([name], true)
 			} else {
 				let marks = {}
 				marks[name] = value
-				this.editor.setTextMark(marks, useCache)
+				this.editor.setTextMark(marks, true)
 			}
 			if (isRender) {
 				this.editor.formatElementStack()
@@ -981,7 +1033,8 @@ export default {
 				return
 			}
 			this.editor.removeTextStyle(null, useCache)
-			this.editor.removeTextMark(null, useCache)
+			//这里不能使用缓存，因为removeTextStyle会更新光标位置
+			this.editor.removeTextMark(null)
 			if (isRender) {
 				this.editor.formatElementStack()
 				this.editor.domRender()
@@ -1017,7 +1070,7 @@ export default {
 					}
 				}
 			} else {
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(el => {
 					if (el.element.isBlock() || el.element.isInblock()) {
 						if (el.element.hasStyles()) {
@@ -1106,7 +1159,7 @@ export default {
 			//起点和终点不在一起
 			else {
 				let blocks = []
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(item => {
 					const block = item.element.getBlock()
 					const exist = blocks.some(el => block.isEqual(el))
@@ -1157,7 +1210,7 @@ export default {
 					}
 				}
 			} else {
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(el => {
 					if (el.element.isBlock() || el.element.isInblock()) {
 						if (el.element.hasStyles()) {
@@ -1232,7 +1285,7 @@ export default {
 					fn(block)
 				}
 			} else {
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(item => {
 					const block = item.element.getBlock()
 					const inblock = item.element.getInblock()
@@ -1277,7 +1330,7 @@ export default {
 					fn(block)
 				}
 			} else {
-				const result = this.editor.getElementsByRange(true, false, useCache)
+				const result = this.editor.getElementsByRange(useCache).includes
 				result.forEach(item => {
 					const block = item.element.getBlock()
 					const inblock = item.element.getInblock()
@@ -1295,7 +1348,7 @@ export default {
 			}
 		},
 		//api：插入图片
-		insertImage(url, isRender = true) {
+		insertImage(url, isRender = true, useCache = false) {
 			if (this.disabled) {
 				return
 			}
@@ -1314,7 +1367,7 @@ export default {
 				null,
 				null
 			)
-			this.editor.insertElement(image)
+			this.editor.insertElement(image, true, useCache)
 			if (isRender) {
 				this.editor.formatElementStack()
 				this.editor.domRender()
@@ -1322,7 +1375,7 @@ export default {
 			}
 		},
 		//api：插入视频
-		insertVideo(url, isRender = true) {
+		insertVideo(url, isRender = true, useCache = false) {
 			if (this.disabled) {
 				return
 			}
@@ -1341,7 +1394,7 @@ export default {
 				null,
 				null
 			)
-			this.editor.insertElement(video)
+			this.editor.insertElement(video, true, useCache)
 			const leftSpace = AlexElement.getSpaceElement()
 			const rightSpace = AlexElement.getSpaceElement()
 			this.editor.addElementAfter(rightSpace, video)
@@ -1362,7 +1415,7 @@ export default {
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return this.editor.range.anchor.element.isPreStyle()
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.some(item => {
 				return item.element.isPreStyle()
 			})
@@ -1376,7 +1429,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return block.parsedom == 'blockquote'
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.some(item => {
 				if (item.element.isBlock()) {
 					return item.element.parsedom == 'blockquote'
@@ -1395,7 +1448,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsList(block, ordered)
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.some(item => {
 				if (item.element.isBlock()) {
 					return blockIsList(item.element, ordered)
@@ -1413,7 +1466,7 @@ export default {
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return !!this.getParsedomElementByElement(this.editor.range.anchor.element, 'a')
 			}
-			const result = this.editor.getElementsByRange(true, true, useCache).filter(item => {
+			const result = this.editor.getElementsByRange(useCache).flatIncludes.filter(item => {
 				return item.element.isText()
 			})
 			return result.some(item => {
@@ -1429,7 +1482,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return block.parsedom == 'table'
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.some(item => {
 				if (item.element.isBlock()) {
 					return item.element.parsedom == 'table'
@@ -1448,7 +1501,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsTask(block)
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.some(item => {
 				if (item.element.isBlock()) {
 					return blockIsTask(item.element)
@@ -1466,7 +1519,7 @@ export default {
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return this.editor.range.anchor.element.isClosed() && this.editor.range.anchor.element.parsedom == 'img'
 			}
-			const result = this.editor.getElementsByRange(true, true, useCache)
+			const result = this.editor.getElementsByRange(useCache).flatIncludes
 			return result.some(item => {
 				return item.element.isClosed() && item.element.parsedom == 'img'
 			})
@@ -1479,7 +1532,7 @@ export default {
 			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
 				return this.editor.range.anchor.element.isClosed() && this.editor.range.anchor.element.parsedom == 'video'
 			}
-			const result = this.editor.getElementsByRange(true, true, useCache)
+			const result = this.editor.getElementsByRange(useCache).flatIncludes
 			return result.some(item => {
 				return item.element.isClosed() && item.element.parsedom == 'video'
 			})
@@ -1493,7 +1546,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return block.parsedom == 'blockquote'
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.every(item => {
 				if (item.element.isBlock()) {
 					return item.element.parsedom == 'blockquote'
@@ -1512,7 +1565,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsList(block, ordered)
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.every(item => {
 				if (item.element.isBlock()) {
 					return blockIsList(item.element, ordered)
@@ -1531,7 +1584,7 @@ export default {
 				const block = this.editor.range.anchor.element.getBlock()
 				return blockIsTask(block)
 			}
-			const result = this.editor.getElementsByRange(true, false, useCache)
+			const result = this.editor.getElementsByRange(useCache).includes
 			return result.every(item => {
 				if (item.element.isBlock()) {
 					return blockIsTask(item.element)
@@ -1542,7 +1595,7 @@ export default {
 			})
 		},
 		//api：创建一个空的表格
-		insertTable(rowLength, colLength, isRender = true) {
+		insertTable(rowLength, colLength, isRender = true, useCache = false) {
 			if (this.disabled) {
 				return
 			}
@@ -1562,7 +1615,7 @@ export default {
 				}
 				this.editor.addElementTo(row, tbody)
 			}
-			this.editor.insertElement(table)
+			this.editor.insertElement(table, true, useCache)
 			//在表格后创建一个段落
 			const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
 			const breakEl = new AlexElement('closed', 'br', null, null, null)
@@ -1615,10 +1668,10 @@ export default {
 				}
 				//起点和终点不在一起
 				else {
-					let result = this.editor.getElementsByRange(true, false, useCache)
+					let result = this.editor.getElementsByRange(true).includes
 					this.editor.range.anchor.moveToStart(result[0].element.getBlock())
 					this.editor.range.focus.moveToEnd(result[result.length - 1].element.getBlock())
-					const res = this.editor.getElementsByRange(true, true, useCache).filter(el => el.element.isText())
+					const res = this.editor.getElementsByRange(true).flatIncludes.filter(el => el.element.isText())
 					const obj = {}
 					res.forEach(el => {
 						if (obj[el.element.getBlock().key]) {
@@ -1660,14 +1713,14 @@ export default {
 			}
 		},
 		//api：插入文本
-		insertText(text, isRender = true) {
+		insertText(text, isRender = true, useCache = false) {
 			if (this.disabled) {
 				return
 			}
 			if (!this.editor.range) {
 				return
 			}
-			this.editor.insertText(text)
+			this.editor.insertText(text, useCache)
 			if (isRender) {
 				this.editor.formatElementStack()
 				this.editor.domRender()
@@ -1675,7 +1728,7 @@ export default {
 			}
 		},
 		//api：插入html
-		insertHtml(html, isRender = true) {
+		insertHtml(html, isRender = true, useCache = false) {
 			if (this.disabled) {
 				return
 			}
@@ -1684,7 +1737,7 @@ export default {
 			}
 			const elements = this.editor.parseHtml(html)
 			for (let i = 0; i < elements.length; i++) {
-				this.editor.insertElement(elements[i], false)
+				this.editor.insertElement(elements[i], false, i == 0 ? useCache : false)
 			}
 			if (isRender) {
 				this.editor.formatElementStack()
@@ -1723,6 +1776,23 @@ export default {
 		-webkit-tap-highlight-color: transparent;
 		outline: none;
 	}
+
+	&.fullheight {
+		height: 100%;
+	}
+
+	&.fullscreen {
+		position: fixed;
+		z-index: 1000;
+		left: 0;
+		top: 0;
+		width: 100vw;
+		height: 100vh;
+
+		.editify-body {
+			border-radius: 0;
+		}
+	}
 }
 
 .editify-body {
@@ -1731,22 +1801,24 @@ export default {
 	position: relative;
 	background-color: @background;
 	padding: 1px;
+	border-radius: 4px;
 
 	&.border {
 		border: 1px solid @border-color;
-		border-radius: 4px;
 		transition: all 500ms;
 
 		&.menu_inner {
-			border-radius: 0 0 4px 4px;
 			border-top: none;
-			padding-top: 21px;
+			border-radius: 0 0 4px 4px;
+		}
+	}
 
-			.editify-source {
-				top: 21px;
-				border-radius: 0 0 4px 4px;
-				height: calc(100% - 21px);
-			}
+	&.menu_inner {
+		padding-top: 21px;
+
+		.editify-source {
+			top: 21px;
+			height: calc(100% - 21px);
 		}
 	}
 
@@ -1779,6 +1851,8 @@ export default {
 			line-height: inherit;
 			padding: 6px 10px;
 			cursor: text;
+			touch-action: none;
+			user-select: none;
 		}
 
 		//段落样式和标题
@@ -2072,5 +2146,10 @@ export default {
 		color: @font-color-light;
 		line-height: 1;
 	}
+
+	//全屏模式下并且不是代码视图下，显示一个上边框
+	&.fullscreen {
+		border-top: 1px solid @border-color;
+	}
 }
 </style>