vue-editify 0.0.51 → 0.1.1

package/src/Editify.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="editify" :class="{ fullheight: height === true && !isFullScreen, fullscreen: isFullScreen }">
+	<div class="editify" :class="{ fullscreen: isFullScreen }">
 		<!-- 菜单区域 -->
-		<Menu v-if="menuConfig.use" :config="menuConfig" :disabled="disabled || !canUseMenu" :color="color" ref="menu"></Menu>
+		<Menu v-if="menuConfig.use" :config="menuConfig" :color="color" ref="menu"></Menu>
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
 		<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>
+			<div ref="content" class="editify-content" :class="{ placeholder: showPlaceholder, disabled: disabled }" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
 			<!-- 代码视图 -->
 			<textarea v-if="isSourceView" :value="value" readonly class="editify-source" />
 			<!-- 工具条 -->
@@ -21,16 +21,18 @@
 <script>
 import { getCurrentInstance } from 'vue'
 import { AlexEditor, AlexElement } from 'alex-editor'
-import Dap from 'dap-util'
-import { pasteKeepData, editorProps, parseList, mediaHandle, tableHandle, preHandle, blockToParagraph, blockToList, blockIsList, getButtonOptionsConfig, getToolbarConfig, getMenuConfig, mergeObject, blockIsTask, blockToTask } from './core'
-import Toolbar from './components/bussiness/Toolbar'
+import { element as DapElement, event as DapEvent, data as DapData, number as DapNumber, color as DapColor } from 'dap-util'
+import { pasteKeepData, editorProps, mergeObject, getToolbarConfig, getMenuConfig } from './core/tool'
+import { parseList, orderdListHandle, mediaHandle, tableHandle, preHandle, specialInblockHandle } from './core/rule'
+import { isTask, elementToParagraph, getCurrentParsedomElement, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange, setIndentIncrease, setIndentDecrease, insertImage, insertVideo } from './core/function'
 import Tooltip from './components/base/Tooltip'
-import Menu from './components/bussiness/Menu'
+import Toolbar from './components/Toolbar'
+import Menu from './components/Menu'
 
 export default {
 	name: 'editify',
 	props: { ...editorProps },
-	emits: ['update:modelValue', 'focus', 'blur', 'change', 'keydown', 'insertparagraph', 'rangeupdate', 'copy', 'cut', 'paste-text', 'paste-html', 'paste-image', 'paste-video', 'before-render', 'after-render'],
+	emits: ['update:modelValue', 'focus', 'blur', 'change', 'keydown', 'insertparagraph', 'rangeupdate', 'updateview'],
 	setup() {
 		const instance = getCurrentInstance()
 		return {
@@ -39,14 +41,8 @@ export default {
 	},
 	data() {
 		return {
-			//编辑器对象
-			editor: null,
 			//是否编辑器内部修改值
 			isModelChange: false,
-			//是否代码视图
-			isSourceView: false,
-			//是否全屏
-			isFullScreen: false,
 			//是否正在输入中文
 			isInputChinese: false,
 			//表格列宽拖拽记录数据
@@ -63,12 +59,22 @@ export default {
 				//类型
 				type: 'text'
 			},
-			//rangeUpdate更新延时器
-			updateTimer: null,
+
+			/** 以下是可对外使用的属性 */
+
+			//编辑器对象
+			editor: null,
+			//是否代码视图
+			isSourceView: false,
+			//是否全屏
+			isFullScreen: false,
 			//菜单栏是否可以使用标识
 			canUseMenu: false,
-			//手动设定的编辑器编辑区域高度
-			contentHeight: 0
+			//光标选取范围内的元素数组
+			dataRangeCaches: {
+				flatList: [],
+				list: []
+			}
 		}
 	},
 	computed: {
@@ -83,7 +89,7 @@ export default {
 		},
 		//编辑器的纯文本值
 		textValue() {
-			return Dap.element.string2dom(`<div>${this.value}</div>`).innerText
+			return DapElement.string2dom(`<div>${this.value}</div>`).innerText
 		},
 		//是否显示占位符
 		showPlaceholder() {
@@ -103,15 +109,6 @@ export default {
 			}
 			return this.border
 		},
-		//编辑器样式设置
-		contentStyle() {
-			if (this.height === true || this.isFullScreen) {
-				return {
-					height: this.contentHeight + 'px'
-				}
-			}
-			return this.autoheight ? { minHeight: this.height } : { height: this.height }
-		},
 		//最终生效的工具栏配置
 		toolbarConfig() {
 			return mergeObject(getToolbarConfig(this.$editTrans, this.$editLocale), this.toolbar || {})
@@ -152,19 +149,12 @@ export default {
 				}
 			}
 		},
-		//全屏切换
-		isFullScreen() {
-			this.$nextTick(() => {
-				this.setContentHeight()
-			})
-		},
-		//监听height为true
-		height: {
-			immediate: true,
-			handler: function () {
-				this.$nextTick(() => {
-					this.setContentHeight()
-				})
+		//监听disabled
+		disabled(newValue) {
+			if (newValue) {
+				this.editor.setDisabled()
+			} else {
+				this.editor.setEnabled()
 			}
 		}
 	},
@@ -174,71 +164,17 @@ export default {
 		//监听滚动隐藏工具条
 		this.handleScroll()
 		//鼠标按下监听
-		Dap.event.on(document.documentElement, `mousedown.editify_${this.uid}`, this.documentMouseDown)
+		DapEvent.on(document.documentElement, `mousedown.editify_${this.uid}`, this.documentMouseDown)
 		//鼠标移动监听
-		Dap.event.on(document.documentElement, `mousemove.editify_${this.uid}`, this.documentMouseMove)
+		DapEvent.on(document.documentElement, `mousemove.editify_${this.uid}`, this.documentMouseMove)
 		//鼠标松开监听
-		Dap.event.on(document.documentElement, `mouseup.editify_${this.uid}`, this.documentMouseUp)
+		DapEvent.on(document.documentElement, `mouseup.editify_${this.uid}`, this.documentMouseUp)
 		//鼠标点击箭头
-		Dap.event.on(document.documentElement, `click.editify_${this.uid}`, this.documentClick)
+		DapEvent.on(document.documentElement, `click.editify_${this.uid}`, this.documentClick)
 		//监听窗口改变
-		Dap.event.on(window, `resize.editify_${this.uid}`, () => {
-			this.setVideoHeight()
-			this.setContentHeight()
-		})
+		DapEvent.on(window, `resize.editify_${this.uid}`, this.setVideoHeight)
 	},
 	methods: {
-		//初始创建编辑器
-		createEditor() {
-			//创建编辑器
-			this.editor = new AlexEditor(this.$refs.content, {
-				value: this.value,
-				disabled: this.disabled,
-				renderRules: [
-					parseList,
-					mediaHandle,
-					tableHandle,
-					el => {
-						preHandle.apply(this.editor, [el, this.toolbarConfig?.use && this.toolbarConfig?.codeBlock?.languages?.show, this.toolbarConfig?.codeBlock?.languages.options])
-					},
-					...this.renderRules
-				],
-				allowCopy: this.allowCopy,
-				allowPaste: this.allowPaste,
-				allowCut: this.allowCut,
-				allowPasteHtml: this.allowPasteHtml,
-				allowPasteHtml: this.allowPasteHtml,
-				customImagePaste: this.customImagePaste,
-				customVideoPaste: this.customVideoPaste,
-				customMerge: this.handleCustomMerge,
-				customParseNode: this.handleCustomParseNode
-			})
-			//编辑器渲染后会有一个渲染过程，会改变内容，因此重新获取内容的值来设置value
-			this.internalModify(this.editor.value)
-			//设置监听事件
-			this.editor.on('change', this.handleEditorChange)
-			this.editor.on('focus', this.handleEditorFocus)
-			this.editor.on('blur', this.handleEditorBlur)
-			this.editor.on('insertParagraph', this.handleInsertParagraph)
-			this.editor.on('rangeUpdate', this.handleRangeUpdate)
-			this.editor.on('copy', this.handleCopy)
-			this.editor.on('cut', this.handleCut)
-			this.editor.on('pasteText', this.handlePasteText)
-			this.editor.on('pasteHtml', this.handlePasteHtml)
-			this.editor.on('pasteImage', this.handlePasteImage)
-			this.editor.on('pasteVideo', this.handlePasteVideo)
-			this.editor.on('deleteInStart', this.handleDeleteInStart)
-			this.editor.on('deleteComplete', this.handleDeleteComplete)
-			this.editor.on('beforeRender', this.handleBeforeRender)
-			this.editor.on('afterRender', this.handleAfterRender)
-			//格式化和dom渲染
-			this.editor.formatElementStack()
-			this.editor.domRender()
-			//自动获取焦点
-			if (this.autofocus && !this.isSourceView && !this.disabled) {
-				this.collapseToEnd()
-			}
-		},
 		//编辑器内部修改值的方法
 		internalModify(val) {
 			this.isModelChange = true
@@ -247,10 +183,15 @@ export default {
 				this.isModelChange = false
 			})
 		},
+		//隐藏工具条
+		hideToolbar() {
+			this.toolbarOptions.show = false
+			this.toolbarOptions.node = null
+		},
 		//监听滚动隐藏工具条
 		handleScroll() {
 			const setScroll = el => {
-				Dap.event.on(el, `scroll.editify_${this.uid}`, () => {
+				DapEvent.on(el, `scroll.editify_${this.uid}`, () => {
 					if (this.toolbarConfig.use && this.toolbarOptions.show) {
 						this.hideToolbar()
 					}
@@ -264,7 +205,7 @@ export default {
 		//移除上述滚动事件的监听
 		removeScrollHandle() {
 			const removeScroll = el => {
-				Dap.event.off(el, `scroll.editify_${this.uid}`)
+				DapEvent.off(el, `scroll.editify_${this.uid}`)
 				if (el.parentNode) {
 					removeScroll(el.parentNode)
 				}
@@ -272,17 +213,17 @@ export default {
 			removeScroll(this.$refs.content)
 		},
 		//工具条显示判断
-		handleToolbar(useCache = false) {
+		handleToolbar() {
 			if (this.disabled || this.isSourceView) {
 				return
 			}
 			this.hideToolbar()
 			this.$nextTick(() => {
-				const table = this.getCurrentParsedomElement('table', useCache)
-				const pre = this.getCurrentParsedomElement('pre', true)
-				const link = this.getCurrentParsedomElement('a', true)
-				const image = this.getCurrentParsedomElement('img', true)
-				const video = this.getCurrentParsedomElement('video', true)
+				const table = getCurrentParsedomElement(this, 'table')
+				const pre = getCurrentParsedomElement(this, 'pre')
+				const link = getCurrentParsedomElement(this, 'a')
+				const image = getCurrentParsedomElement(this, 'img')
+				const video = getCurrentParsedomElement(this, 'video')
 				if (link) {
 					this.toolbarOptions.type = 'link'
 					this.toolbarOptions.node = `[data-editify-uid="${this.uid}"] [data-editify-element="${link.key}"]`
@@ -324,10 +265,10 @@ export default {
 						this.toolbarOptions.show = true
 					}
 				} else {
-					const result = this.editor.getElementsByRange(true).flatIncludes.filter(item => {
+					const result = this.dataRangeCaches.flatList.filter(item => {
 						return item.element.isText()
 					})
-					if (result.length && !this.hasTable(true) && !this.hasPreStyle(true) && !this.hasLink(true) && !this.hasImage(true) && !this.hasVideo(true)) {
+					if (result.length && !hasTableInRange(this) && !hasPreInRange(this) && !hasLinkInRange(this) && !hasImageInRange(this) && !hasVideoInRange(this)) {
 						this.toolbarOptions.type = 'text'
 						if (this.toolbarOptions.show) {
 							this.$refs.toolbar.$refs.layer.setPosition()
@@ -338,41 +279,68 @@ export default {
 				}
 			})
 		},
-		//重新定义编辑器合并元素的逻辑
-		handleCustomMerge(ele, preEle) {
-			const uneditable = preEle.getUneditableElement()
-			if (uneditable) {
-				uneditable.toEmpty()
-			} else {
-				preEle.children.push(...ele.children)
-				preEle.children.forEach(item => {
-					item.parent = preEle
-				})
-				ele.children = null
-			}
+		//设定编辑器内的视频高度
+		setVideoHeight() {
+			this.$refs.content.querySelectorAll('video').forEach(video => {
+				video.style.height = video.offsetWidth / this.videoRatio + 'px'
+			})
 		},
-		//针对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])
+		//初始创建编辑器
+		createEditor() {
+			//创建编辑器
+			this.editor = new AlexEditor(this.$refs.content, {
+				value: this.value,
+				disabled: this.disabled,
+				renderRules: [
+					el => {
+						parseList(this.editor, el)
+					},
+					el => {
+						orderdListHandle(this.editor, el)
+					},
+					el => {
+						mediaHandle(this.editor, el)
+					},
+					el => {
+						tableHandle(this.editor, el)
+					},
+					el => {
+						preHandle(this.editor, el, this.toolbarConfig?.use && this.toolbarConfig?.codeBlock?.languages?.show, this.toolbarConfig?.codeBlock?.languages.options)
+					},
+					el => {
+						specialInblockHandle(this.editor, el)
+					},
+					...this.renderRules
+				],
+				allowCopy: this.allowCopy,
+				allowPaste: this.allowPaste,
+				allowCut: this.allowCut,
+				allowPasteHtml: this.allowPasteHtml,
+				allowPasteHtml: this.allowPasteHtml,
+				customImagePaste: this.handleCustomImagePaste,
+				customVideoPaste: this.handleCustomVideoPaste,
+				customMerge: this.handleCustomMerge,
+				customParseNode: this.handleCustomParseNode
+			})
+			//编辑器渲染后会有一个渲染过程，会改变内容，因此重新获取内容的值来设置value
+			this.internalModify(this.editor.value)
+			//设置监听事件
+			this.editor.on('change', this.handleEditorChange)
+			this.editor.on('focus', this.handleEditorFocus)
+			this.editor.on('blur', this.handleEditorBlur)
+			this.editor.on('insertParagraph', this.handleInsertParagraph)
+			this.editor.on('rangeUpdate', this.handleRangeUpdate)
+			this.editor.on('pasteHtml', this.handlePasteHtml)
+			this.editor.on('deleteInStart', this.handleDeleteInStart)
+			this.editor.on('deleteComplete', this.handleDeleteComplete)
+			this.editor.on('afterRender', this.handleAfterRender)
+			//格式化和dom渲染
+			this.editor.formatElementStack()
+			this.editor.domRender()
+			//自动获取焦点
+			if (this.autofocus && !this.isSourceView && !this.disabled) {
+				this.collapseToEnd()
 			}
-			return ele
-		},
-		//隐藏工具条
-		hideToolbar() {
-			this.toolbarOptions.show = false
-			this.toolbarOptions.node = null
 		},
 		//鼠标在页面按下：处理表格拖拽改变列宽和菜单栏是否使用判断
 		documentMouseDown(e) {
@@ -380,9 +348,9 @@ export default {
 				return
 			}
 			//鼠标在编辑器内按下
-			if (Dap.element.isContains(this.$refs.content, e.target)) {
+			if (DapElement.isContains(this.$refs.content, e.target)) {
 				const elm = e.target
-				const key = Dap.data.get(elm, 'data-alex-editor-key')
+				const key = DapData.get(elm, 'data-alex-editor-key')
 				if (key) {
 					const element = this.editor.getElementByKey(key)
 					if (element && element.parsedom == 'td') {
@@ -391,7 +359,7 @@ export default {
 						if (element.parent.children[length - 1].isEqual(element)) {
 							return
 						}
-						const rect = Dap.element.getElementBounding(elm)
+						const rect = DapElement.getElementBounding(elm)
 						//在可拖拽范围内
 						if (e.pageX >= Math.abs(rect.left + elm.offsetWidth - 5) && e.pageX <= Math.abs(rect.left + elm.offsetWidth + 5)) {
 							this.tableColumnResizeParams.element = element
@@ -401,7 +369,7 @@ export default {
 				}
 			}
 			//如果点击了除编辑器外的地方，菜单栏不可使用
-			if (!Dap.element.isContains(this.$el, e.target) && !this.isSourceView) {
+			if (!DapElement.isContains(this.$el, e.target) && !this.isSourceView) {
 				this.canUseMenu = false
 			}
 		},
@@ -413,7 +381,7 @@ export default {
 			if (!this.tableColumnResizeParams.element) {
 				return
 			}
-			const table = this.getCurrentParsedomElement('table')
+			const table = getCurrentParsedomElement(this, 'table')
 			if (!table) {
 				return
 			}
@@ -429,14 +397,14 @@ export default {
 			this.tableColumnResizeParams.start = e.pageX
 		},
 		//鼠标在页面松开：处理表格拖拽改变列宽
-		documentMouseUp(e) {
+		documentMouseUp() {
 			if (this.disabled) {
 				return
 			}
 			if (!this.tableColumnResizeParams.element) {
 				return
 			}
-			const table = this.getCurrentParsedomElement('table')
+			const table = getCurrentParsedomElement(this, 'table')
 			if (!table) {
 				return
 			}
@@ -461,17 +429,17 @@ export default {
 			if (this.disabled) {
 				return
 			}
-			//鼠标在编辑器内按下
-			if (Dap.element.isContains(this.$refs.content, e.target)) {
+			//鼠标在编辑器内点击
+			if (DapElement.isContains(this.$refs.content, e.target)) {
 				const elm = e.target
-				const key = Dap.data.get(elm, 'data-alex-editor-key')
+				const key = DapData.get(elm, 'data-alex-editor-key')
 				if (key) {
 					const element = this.editor.getElementByKey(key)
 					//如果是任务列表元素
-					if (blockIsTask(element)) {
-						const rect = Dap.element.getElementBounding(elm)
+					if (isTask(element)) {
+						const rect = DapElement.getElementBounding(elm)
 						//在复选框范围内
-						if (e.pageX >= Math.abs(rect.left) && e.pageX <= Math.abs(rect.left + 16) && e.pageY >= Math.abs(rect.top + elm.offsetHeight / 2 - 8) && e.pageY <= Math.abs(rect.top + elm.offsetHeight / 2 + 8)) {
+						if (e.pageX >= Math.abs(rect.left) && e.pageX <= Math.abs(rect.left + 16) && e.pageY >= Math.abs(rect.top + 2) && e.pageY <= Math.abs(rect.top + 18)) {
 							//取消勾选
 							if (element.marks['data-editify-task'] == 'checked') {
 								element.marks['data-editify-task'] = 'uncheck'
@@ -493,6 +461,99 @@ export default {
 				}
 			}
 		},
+		//自定义图片粘贴
+		async handleCustomImagePaste(url) {
+			const newUrl = await this.customImagePaste.apply(this, [url])
+			if (newUrl) {
+				insertImage(this, newUrl)
+			}
+		},
+		//自定义视频粘贴
+		async handleCustomVideoPaste(url) {
+			const newUrl = await this.customVideoPaste.apply(this, [url])
+			if (newUrl) {
+				insertVideo(this, newUrl)
+			}
+		},
+		//重新定义编辑器合并元素的逻辑
+		handleCustomMerge(ele, preEle) {
+			const uneditable = preEle.getUneditableElement()
+			if (uneditable) {
+				uneditable.toEmpty()
+			} else {
+				preEle.children.push(...ele.children)
+				preEle.children.forEach(item => {
+					item.parent = preEle
+				})
+				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.customParseNoe == 'function') {
+				ele = this.customParseNoe.apply(this, [ele])
+			}
+			return ele
+		},
+		//编辑区域键盘按下：设置缩进快捷键
+		handleEditorKeydown(e) {
+			if (this.disabled) {
+				return
+			}
+			//增加缩进
+			if (e.keyCode == 9 && !e.metaKey && !e.shiftKey && !e.ctrlKey && !e.altKey) {
+				e.preventDefault()
+				if (!hasTableInRange(this)) {
+					setIndentIncrease(this)
+					this.editor.formatElementStack()
+					this.editor.domRender()
+					this.editor.rangeRender()
+				}
+			}
+			//减少缩进
+			else if (e.keyCode == 9 && !e.metaKey && e.shiftKey && !e.ctrlKey && !e.altKey) {
+				e.preventDefault()
+				if (!hasTableInRange(this)) {
+					setIndentDecrease(this)
+					this.editor.formatElementStack()
+					this.editor.domRender()
+					this.editor.rangeRender()
+				}
+			}
+			//自定义键盘按下操作
+			this.$emit('keydown', e)
+		},
+		//点击编辑器：处理图片和视频的光标聚集
+		handleEditorClick(e) {
+			if (this.disabled || this.isSourceView) {
+				return
+			}
+			const node = e.target
+			//点击的是图片或者视频
+			if (node.nodeName.toLocaleLowerCase() == 'img' || node.nodeName.toLocaleLowerCase() == 'video') {
+				const key = Number(node.getAttribute('data-editify-element'))
+				if (DapNumber.isNumber(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()
+				}
+			}
+		},
 		//编辑器的值更新
 		handleEditorChange(newVal, oldVal) {
 			if (this.disabled) {
@@ -530,7 +591,7 @@ export default {
 				//编辑区域边框颜色
 				this.$refs.body.style.borderColor = this.color
 				//转换颜色值
-				const rgb = Dap.color.hex2rgb(this.color)
+				const rgb = DapColor.hex2rgb(this.color)
 				//菜单栏模式为inner
 				if (this.menuConfig.use && this.menuConfig.mode == 'inner') {
 					//编辑区域除顶部边框的阴影
@@ -554,103 +615,52 @@ export default {
 			//获取焦点时可以使用菜单栏
 			setTimeout(() => {
 				this.canUseMenu = true
+				this.$emit('focus', val)
 			}, 0)
-			this.$emit('focus', val)
 		},
-		//编辑区域键盘按下
-		handleEditorKeydown(e) {
+		//编辑器换行
+		handleInsertParagraph(element, previousElement) {
+			//前一个块元素如果是只包含换行符的元素，并且当前块元素也是包含换行符的元素，则当前块元素转为段落
+			if (previousElement.isOnlyHasBreak() && element.isOnlyHasBreak()) {
+				if (previousElement.parsedom != AlexElement.BLOCK_NODE) {
+					elementToParagraph(previousElement)
+					this.editor.range.anchor.moveToStart(previousElement)
+					this.editor.range.focus.moveToStart(previousElement)
+					element.toEmpty()
+				}
+			}
+			this.$emit('insertparagraph', this.value)
+		},
+		//编辑器焦点更新
+		handleRangeUpdate() {
 			if (this.disabled) {
 				return
 			}
-			//增加缩进
-			if (e.keyCode == 9 && !e.metaKey && !e.shiftKey && !e.ctrlKey && !e.altKey) {
-				e.preventDefault()
-				this.setIndentIncrease()
-			}
-			//减少缩进
-			else if (e.keyCode == 9 && !e.metaKey && e.shiftKey && !e.ctrlKey && !e.altKey) {
-				e.preventDefault()
-				this.setIndentDecrease()
-			}
-			//自定义键盘按下操作
-			this.$emit('keydown', e)
-		},
-		//点击编辑器
-		handleEditorClick(e) {
-			if (this.disabled || this.isSourceView) {
+
+			//如果没有range禁用菜单栏
+			this.canUseMenu = !!this.editor.range
+
+			//没有range直接返回
+			if (!this.editor.range) {
 				return
 			}
-			const node = e.target
-			//点击的是图片或者视频
-			if (node.nodeName.toLocaleLowerCase() == 'img' || node.nodeName.toLocaleLowerCase() == 'video') {
-				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()
-				}
-			}
-		},
-		//编辑器换行
-		handleInsertParagraph(element, previousElement) {
-			//前一个块元素如果是只包含换行符的元素，并且当前块元素也是包含换行符的元素，则当前块元素转为段落
-			if (previousElement.isOnlyHasBreak() && element.isOnlyHasBreak()) {
-				if (!previousElement.isBlock()) {
-					previousElement.convertToBlock()
+
+			//获取光标选取范围内的元素数据，并且进行缓存
+			this.dataRangeCaches = this.editor.getElementsByRange()
+
+			//如果使用工具条或者菜单栏
+			if (this.toolbarConfig.use || this.menuConfig.use) {
+				//如果使用工具条
+				if (this.toolbarConfig.use) {
+					this.handleToolbar()
 				}
-				if (previousElement.parsedom != AlexElement.BLOCK_NODE) {
-					blockToParagraph(previousElement)
-					this.editor.range.anchor.moveToStart(previousElement)
-					this.editor.range.focus.moveToStart(previousElement)
-					element.toEmpty()
+				//如果使用菜单栏
+				if (this.menuConfig.use) {
+					this.$refs.menu.handleRangeUpdate()
 				}
 			}
-			this.$emit('insertparagraph', this.value)
-		},
-		//编辑器焦点更新
-		handleRangeUpdate() {
-			if (this.disabled) {
-				return
-			}
-			this.canUseMenu = !!this.editor.range
-			if (!this.editor.range) {
-				return
-			}
-			if (this.updateTimer) {
-				clearTimeout(this.updateTimer)
-			}
-			this.updateTimer = setTimeout(() => {
-				//如果使用工具条或者菜单栏
-				if (this.toolbarConfig.use || this.menuConfig.use) {
-					//先获取选区内的元素设置内部缓存
-					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)
-		},
-		//编辑器复制
-		handleCopy(text, html) {
-			this.$emit('copy', text, html)
-		},
-		//编辑器剪切
-		handleCut(text, html) {
-			this.$emit('cut', text, html)
-		},
-		//编辑器粘贴纯文本
-		handlePasteText(data) {
-			this.$emit('paste-text', data)
+
+			this.$emit('rangeupdate')
 		},
 		//编辑器粘贴html
 		handlePasteHtml(elements) {
@@ -677,20 +687,11 @@ export default {
 					el.styles = styles
 				}
 			})
-			this.$emit('paste-html', elements)
-		},
-		//编辑器粘贴图片
-		handlePasteImage(url) {
-			this.$emit('paste-image', url)
 		},
-		//编辑器粘贴视频
-		handlePasteVideo(url) {
-			this.$emit('paste-video', url)
-		},
-		//编辑器部分删除情景
+		//编辑器部分删除情景(在编辑器起始处)
 		handleDeleteInStart(element) {
 			if (element.isBlock()) {
-				blockToParagraph(element)
+				elementToParagraph(element)
 			}
 		},
 		//编辑器删除完成后事件
@@ -700,39 +701,12 @@ export default {
 				uneditable.toEmpty()
 			}
 		},
-		//编辑器dom渲染之前
-		handleBeforeRender() {
-			this.$emit('before-render')
-		},
 		//编辑器dom渲染
 		handleAfterRender() {
 			//设定视频高度
 			this.setVideoHeight()
-			//触发事件
-			this.$emit('after-render')
-		},
-		//设定视频高度
-		setVideoHeight() {
-			this.$refs.content.querySelectorAll('video').forEach(video => {
-				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
-			}
+
+			this.$emit('updateview')
 		},
 
 		//api：光标设置到文档底部
@@ -742,7 +716,7 @@ export default {
 			}
 			this.editor.collapseToEnd()
 			this.editor.rangeRender()
-			Dap.element.setScrollTop({
+			DapElement.setScrollTop({
 				el: this.$refs.content,
 				number: 1000000,
 				time: 0
@@ -756,364 +730,13 @@ export default {
 			this.editor.collapseToStart()
 			this.editor.rangeRender()
 			this.$nextTick(() => {
-				Dap.element.setScrollTop({
+				DapElement.setScrollTop({
 					el: this.$refs.content,
 					number: 0,
 					time: 0
 				})
 			})
 		},
-		//api：获取某个元素是否在某个标签元素下，如果是返回该标签元素，否则返回null
-		getParsedomElementByElement(element, parsedom) {
-			if (element.isBlock()) {
-				return element.parsedom == parsedom ? element : null
-			}
-			if (!element.isText() && element.parsedom == parsedom) {
-				return element
-			}
-			return this.getParsedomElementByElement(element.parent, parsedom)
-		},
-		//api：获取光标是否在指定标签元素下，如果是返回该标签元素，否则返回null
-		getCurrentParsedomElement(parsedom, useCache = false) {
-			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)
-			}
-			const arr = this.editor.getElementsByRange(useCache).includes.map(item => {
-				return this.getParsedomElementByElement(item.element, parsedom)
-			})
-			let hasNull = arr.some(el => {
-				return el == null
-			})
-			//如果存在null，则表示有的选区元素不在指定标签下，返回null
-			if (hasNull) {
-				return null
-			}
-			//如果只有一个元素，则返回该元素
-			if (arr.length == 1) {
-				return arr[0]
-			}
-			//默认数组中的元素都相等
-			let flag = true
-			for (let i = 1; i < arr.length; i++) {
-				if (!arr[i].isEqual(arr[0])) {
-					flag = false
-					break
-				}
-			}
-			//如果相等，则返回该元素
-			if (flag) {
-				return arr[0]
-			}
-			return null
-		},
-		//api：删除光标所在的指定标签元素
-		deleteByParsedom(parsedom, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const element = this.getCurrentParsedomElement(parsedom, useCache)
-			if (element) {
-				element.toEmpty()
-				if (isRender) {
-					this.editor.formatElementStack()
-					this.editor.domRender()
-					this.editor.rangeRender()
-				}
-			}
-		},
-		//api：当光标在链接上时可以移除链接
-		removeLink(isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const link = this.getCurrentParsedomElement('a', useCache)
-			if (link) {
-				link.parsedom = AlexElement.TEXT_NODE
-				delete link.marks.target
-				delete link.marks.href
-				if (isRender) {
-					this.editor.formatElementStack()
-					this.editor.domRender()
-					this.editor.rangeRender()
-				}
-			}
-		},
-		//api：设置标题
-		setHeading(parsedom, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const values = getButtonOptionsConfig(this.$editTrans, this.$editLocale).heading.map(item => {
-				return item.value
-			})
-			if (!values.includes(parsedom)) {
-				throw new Error('The parameter supports only h1-h6 and p')
-			}
-			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
-				const block = this.editor.range.anchor.element.getBlock()
-				//先转为段落
-				blockToParagraph(block)
-				//设置标题
-				block.parsedom = parsedom
-			} else {
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(el => {
-					if (el.element.isBlock()) {
-						blockToParagraph(el.element)
-						el.element.parsedom = parsedom
-					} else {
-						const block = el.element.getBlock()
-						blockToParagraph(block)
-						block.parsedom = parsedom
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入有序列表 ordered为true表示有序列表
-		setList(ordered, isRender = true, useCache = false) {
-			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 isList = blockIsList(block, ordered)
-				if (isList) {
-					blockToParagraph(block)
-				} else {
-					blockToList(block, ordered)
-				}
-			}
-			//起点和终点不在一起
-			else {
-				let blocks = []
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(item => {
-					const block = item.element.getBlock()
-					const exist = blocks.some(el => block.isEqual(el))
-					if (!exist) {
-						blocks.push(block)
-					}
-				})
-				blocks.forEach(block => {
-					const isList = blockIsList(block, ordered)
-					if (isList) {
-						blockToParagraph(block)
-					} else {
-						blockToList(block, ordered)
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入任务列表
-		setTask(isRender = true, useCache = false) {
-			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 isTask = blockIsTask(block)
-				if (isTask) {
-					blockToParagraph(block)
-				} else {
-					blockToTask(block)
-				}
-			}
-			//起点和终点不在一起
-			else {
-				let blocks = []
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(item => {
-					const block = item.element.getBlock()
-					const exist = blocks.some(el => block.isEqual(el))
-					if (!exist) {
-						blocks.push(block)
-					}
-				})
-				blocks.forEach(block => {
-					const isTask = blockIsTask(block)
-					if (isTask) {
-						blockToParagraph(block)
-					} else {
-						blockToTask(block)
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：设置样式
-		setTextStyle(name, value, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const active = this.queryTextStyle(name, value, useCache)
-			if (active) {
-				this.editor.removeTextStyle([name], true)
-			} else {
-				let styles = {}
-				styles[name] = value
-				this.editor.setTextStyle(styles, true)
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：查询是否具有某个样式
-		queryTextStyle(name, value, useCache = false) {
-			return this.editor.queryTextStyle(name, value, useCache)
-		},
-		//api：设置标记
-		setTextMark(name, value, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const active = this.queryTextMark(name, value, useCache)
-			if (active) {
-				this.editor.removeTextMark([name], true)
-			} else {
-				let marks = {}
-				marks[name] = value
-				this.editor.setTextMark(marks, true)
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：查询是否具有某个标记
-		queryTextMark(name, value, useCache = false) {
-			return this.editor.queryTextMark(name, value, useCache)
-		},
-		//api：清除文本样式和标记
-		formatText(isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			this.editor.removeTextStyle(null, useCache)
-			//这里不能使用缓存，因为removeTextStyle会更新光标位置
-			this.editor.removeTextMark(null)
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：设置对齐方式,参数取值justify/left/right/center
-		setAlign(value, isRender = true, useCache = false) {
-			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()
-				if (inblock) {
-					if (inblock.hasStyles()) {
-						inblock.styles['text-align'] = value
-					} else {
-						inblock.styles = {
-							'text-align': value
-						}
-					}
-				} else {
-					if (block.hasStyles()) {
-						block.styles['text-align'] = value
-					} else {
-						block.styles = {
-							'text-align': value
-						}
-					}
-				}
-			} else {
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(el => {
-					if (el.element.isBlock() || el.element.isInblock()) {
-						if (el.element.hasStyles()) {
-							el.element.styles['text-align'] = value
-						} else {
-							el.element.styles = {
-								'text-align': value
-							}
-						}
-					} else {
-						const block = el.element.getBlock()
-						const inblock = el.element.getInblock()
-						if (inblock) {
-							if (inblock.hasStyles()) {
-								inblock.styles['text-align'] = value
-							} else {
-								inblock.styles = {
-									'text-align': value
-								}
-							}
-						} else {
-							if (block.hasStyles()) {
-								block.styles['text-align'] = value
-							} else {
-								block.styles = {
-									'text-align': value
-								}
-							}
-						}
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
 		//api：撤销
 		undo() {
 			if (this.disabled) {
@@ -1143,621 +766,15 @@ export default {
 				this.editor.domRender(true)
 				this.editor.rangeRender()
 			}
-		},
-		//api：插入引用
-		setQuote(isRender = true, useCache = false) {
-			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 oldParsedom = block.parsedom
-				blockToParagraph(block)
-				if (oldParsedom != 'blockquote') {
-					block.parsedom = 'blockquote'
-				}
-			}
-			//起点和终点不在一起
-			else {
-				let blocks = []
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(item => {
-					const block = item.element.getBlock()
-					const exist = blocks.some(el => block.isEqual(el))
-					if (!exist) {
-						blocks.push(block)
-					}
-				})
-				blocks.forEach(block => {
-					const oldParsedom = block.parsedom
-					blockToParagraph(block)
-					if (oldParsedom != 'blockquote') {
-						block.parsedom = 'blockquote'
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：设置行高
-		setLineHeight(value, isRender = true, useCache = false) {
-			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()
-				if (inblock) {
-					if (inblock.hasStyles()) {
-						inblock.styles['line-height'] = value
-					} else {
-						inblock.styles = {
-							'line-height': value
-						}
-					}
-				} else {
-					if (block.hasStyles()) {
-						block.styles['line-height'] = value
-					} else {
-						block.styles = {
-							'line-height': value
-						}
-					}
-				}
-			} else {
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(el => {
-					if (el.element.isBlock() || el.element.isInblock()) {
-						if (el.element.hasStyles()) {
-							el.element.styles['line-height'] = value
-						} else {
-							el.element.styles = {
-								'line-height': value
-							}
-						}
-					} else {
-						const block = el.element.getBlock()
-						const inblock = el.element.getInblock()
-						if (inblock) {
-							if (inblock.hasStyles()) {
-								inblock.styles['line-height'] = value
-							} else {
-								inblock.styles = {
-									'line-height': value
-								}
-							}
-						} else {
-							if (block.hasStyles()) {
-								block.styles['line-height'] = value
-							} else {
-								block.styles = {
-									'line-height': value
-								}
-							}
-						}
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：增加缩进
-		setIndentIncrease(isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const fn = element => {
-				if (element.hasStyles()) {
-					if (element.styles.hasOwnProperty('text-indent')) {
-						let val = element.styles['text-indent']
-						if (val.endsWith('em')) {
-							val = parseFloat(val)
-						} else {
-							val = 0
-						}
-						element.styles['text-indent'] = `${val + 2}em`
-					} else {
-						element.styles['text-indent'] = '2em'
-					}
-				} else {
-					element.styles = {
-						'text-indent': '2em'
-					}
-				}
-			}
-			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()
-				if (inblock && inblock.behavior == 'block' && !inblock.isPreStyle()) {
-					fn(inblock)
-				} else if (!block.isPreStyle()) {
-					fn(block)
-				}
-			} else {
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(item => {
-					const block = item.element.getBlock()
-					const inblock = item.element.getInblock()
-					if (inblock && inblock.behavior == 'block' && !inblock.isPreStyle()) {
-						fn(inblock)
-					} else if (!block.isPreStyle()) {
-						fn(block)
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：减少缩进
-		setIndentDecrease(isRender = true, useCache = false) {
-			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']
-					if (val.endsWith('em')) {
-						val = parseFloat(val)
-					} else {
-						val = 0
-					}
-					element.styles['text-indent'] = `${val - 2 >= 0 ? val - 2 : 0}em`
-				}
-			}
-			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()
-				if (inblock && inblock.behavior == 'block' && !inblock.isPreStyle()) {
-					fn(inblock)
-				} else if (!block.isPreStyle()) {
-					fn(block)
-				}
-			} else {
-				const result = this.editor.getElementsByRange(useCache).includes
-				result.forEach(item => {
-					const block = item.element.getBlock()
-					const inblock = item.element.getInblock()
-					if (inblock && inblock.behavior == 'block' && !inblock.isPreStyle()) {
-						fn(inblock)
-					} else if (!block.isPreStyle()) {
-						fn(block)
-					}
-				})
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入图片
-		insertImage(url, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			if (!url || typeof url != 'string') {
-				throw new Error('An image address must be given')
-			}
-			const image = new AlexElement(
-				'closed',
-				'img',
-				{
-					src: url
-				},
-				null,
-				null
-			)
-			this.editor.insertElement(image, true, useCache)
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入视频
-		insertVideo(url, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			if (!url || typeof url != 'string') {
-				throw new Error('A video address must be given')
-			}
-			const video = new AlexElement(
-				'closed',
-				'video',
-				{
-					src: url
-				},
-				null,
-				null
-			)
-			this.editor.insertElement(video, true, useCache)
-			const leftSpace = AlexElement.getSpaceElement()
-			const rightSpace = AlexElement.getSpaceElement()
-			this.editor.addElementAfter(rightSpace, video)
-			this.editor.addElementBefore(leftSpace, video)
-			this.editor.range.anchor.moveToEnd(rightSpace)
-			this.editor.range.focus.moveToEnd(rightSpace)
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：选区是否含有代码块样式
-		hasPreStyle(useCache = false) {
-			if (!this.editor.range) {
-				return false
-			}
-			if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
-				return this.editor.range.anchor.element.isPreStyle()
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			return result.some(item => {
-				return item.element.isPreStyle()
-			})
-		},
-		//api：选区是否含有引用
-		hasQuote(useCache = 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 block.parsedom == 'blockquote'
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			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, useCache = 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)
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			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(useCache = false) {
-			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')
-			}
-			const result = this.editor.getElementsByRange(useCache).flatIncludes.filter(item => {
-				return item.element.isText()
-			})
-			return result.some(item => {
-				return !!this.getParsedomElementByElement(item.element, 'a')
-			})
-		},
-		//api：选区是否含有表格
-		hasTable(useCache = 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 block.parsedom == 'table'
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			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(useCache = 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 blockIsTask(block)
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			return result.some(item => {
-				if (item.element.isBlock()) {
-					return blockIsTask(item.element)
-				} else {
-					const block = item.element.getBlock()
-					return blockIsTask(block)
-				}
-			})
-		},
-		//api：选区是否含有图片
-		hasImage(useCache = false) {
-			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'
-			}
-			const result = this.editor.getElementsByRange(useCache).flatIncludes
-			return result.some(item => {
-				return item.element.isClosed() && item.element.parsedom == 'img'
-			})
-		},
-		//api：选区是否含有视频
-		hasVideo(useCache = false) {
-			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'
-			}
-			const result = this.editor.getElementsByRange(useCache).flatIncludes
-			return result.some(item => {
-				return item.element.isClosed() && item.element.parsedom == 'video'
-			})
-		},
-		//api：选区是否全部在引用内
-		inQuote(useCache = 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 block.parsedom == 'blockquote'
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			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, useCache = 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)
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			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(useCache = 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 blockIsTask(block)
-			}
-			const result = this.editor.getElementsByRange(useCache).includes
-			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, isRender = true, useCache = false) {
-			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)
-			for (let i = 0; i < rowLength; i++) {
-				const row = new AlexElement('inblock', 'tr', null, null, null)
-				for (let j = 0; j < colLength; j++) {
-					const column = new AlexElement('inblock', 'td', null, null, null)
-					const breakEl = new AlexElement('closed', 'br', null, null, null)
-					this.editor.addElementTo(breakEl, column)
-					this.editor.addElementTo(column, row)
-				}
-				this.editor.addElementTo(row, tbody)
-			}
-			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)
-			this.editor.addElementTo(breakEl, paragraph)
-			this.editor.addElementAfter(paragraph, table)
-			this.editor.range.anchor.moveToStart(tbody)
-			this.editor.range.focus.moveToStart(tbody)
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入代码块
-		insertCodeBlock(isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			const pre = this.getCurrentParsedomElement('pre', useCache)
-			if (pre) {
-				let content = ''
-				AlexElement.flatElements(pre.children)
-					.filter(item => {
-						return item.isText()
-					})
-					.forEach(item => {
-						content += item.textContent
-					})
-				const splits = content.split('\n')
-				splits.forEach(item => {
-					const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-					const text = new AlexElement('text', null, null, null, item)
-					this.editor.addElementTo(text, paragraph)
-					this.editor.addElementBefore(paragraph, pre)
-				})
-				pre.toEmpty()
-			} else {
-				//起点和终点在一起
-				if (this.editor.range.anchor.isEqual(this.editor.range.focus)) {
-					const block = this.editor.range.anchor.element.getBlock()
-					blockToParagraph(block)
-					block.parsedom = 'pre'
-					const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-					const breakEl = new AlexElement('closed', 'br', null, null, null)
-					this.editor.addElementTo(breakEl, paragraph)
-					this.editor.addElementAfter(paragraph, block)
-				}
-				//起点和终点不在一起
-				else {
-					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).flatIncludes.filter(el => el.element.isText())
-					const obj = {}
-					res.forEach(el => {
-						if (obj[el.element.getBlock().key]) {
-							obj[el.element.getBlock().key].push(el.element.clone())
-						} else {
-							obj[el.element.getBlock().key] = [el.element.clone()]
-						}
-					})
-					const pre = new AlexElement('block', 'pre', null, null, null)
-					Object.keys(obj).forEach((key, index) => {
-						if (index > 0) {
-							const text = new AlexElement('text', null, null, null, '\n')
-							if (pre.hasChildren()) {
-								this.editor.addElementTo(text, pre, pre.children.length)
-							} else {
-								this.editor.addElementTo(text, pre)
-							}
-						}
-						obj[key].forEach(el => {
-							if (pre.hasChildren()) {
-								this.editor.addElementTo(el, pre, pre.children.length)
-							} else {
-								this.editor.addElementTo(el, pre)
-							}
-						})
-					})
-					this.editor.delete()
-					this.editor.insertElement(pre)
-					const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-					const breakEl = new AlexElement('closed', 'br', null, null, null)
-					this.editor.addElementTo(breakEl, paragraph)
-					this.editor.addElementAfter(paragraph, pre)
-				}
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入文本
-		insertText(text, isRender = true, useCache = false) {
-			if (this.disabled) {
-				return
-			}
-			if (!this.editor.range) {
-				return
-			}
-			this.editor.insertText(text, useCache)
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
-		},
-		//api：插入html
-		insertHtml(html, isRender = true, useCache = false) {
-			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, i == 0 ? useCache : false)
-			}
-			if (isRender) {
-				this.editor.formatElementStack()
-				this.editor.domRender()
-				this.editor.rangeRender()
-			}
 		}
 	},
 	beforeUnmount() {
 		//卸载绑定在滚动元素上的事件
 		this.removeScrollHandle()
 		//卸载绑定在document.documentElement上的事件
-		Dap.event.off(document.documentElement, `mousedown.editify_${this.uid} mousemove.editify_${this.uid} mouseup.editify_${this.uid} click.editify_${this.uid}`)
+		DapEvent.off(document.documentElement, `mousedown.editify_${this.uid} mousemove.editify_${this.uid} mouseup.editify_${this.uid} click.editify_${this.uid}`)
 		//卸载绑定在window上的事件
-		Dap.event.off(window, `resize.editify_${this.uid}`)
+		DapEvent.off(window, `resize.editify_${this.uid}`)
 		//销毁编辑器
 		this.editor.destroy()
 	}
@@ -1765,8 +782,11 @@ export default {
 </script>
 <style lang="less" scoped>
 .editify {
-	display: block;
+	display: flex;
+	justify-content: flex-start;
+	flex-direction: column;
 	width: 100%;
+	height: 100%;
 	position: relative;
 	box-sizing: border-box;
 	-webkit-tap-highlight-color: transparent;
@@ -1781,18 +801,14 @@ 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;
+		width: 100vw !important;
+		height: 100vh !important;
+		background: @background;
 
 		.editify-body {
 			border-radius: 0;
@@ -1803,6 +819,8 @@ export default {
 .editify-body {
 	display: block;
 	width: 100%;
+	height: 0;
+	flex: 1;
 	position: relative;
 	background-color: @background;
 	padding: 1px;
@@ -1834,6 +852,7 @@ export default {
 		overflow-x: hidden;
 		overflow-y: auto;
 		width: 100%;
+		height: 100%;
 		border-radius: inherit;
 		padding: 6px 10px;
 		line-height: 1.5;
@@ -2061,8 +1080,7 @@ export default {
 				content: '';
 				position: absolute;
 				left: 0;
-				top: 50%;
-				transform: translateY(-50%);
+				top: 2px;
 				z-index: 1;
 				cursor: pointer;
 			}