vue-editify 0.2.14 → 0.2.15

package/src/editify/editify.vue

@@ -1,18 +1,18 @@
 <template>
-	<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" :style="{ zIndex: zIndex, paddingTop: isFullScreen ? '' : (offset || '') + 'px' }" ref="elRef">
+	<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && isAutoHeight }" :style="{ zIndex: zIndex, paddingTop: isFullScreen ? '' : (offset || '') + 'px' }" ref="elRef">
 		<!-- 菜单区域 -->
-		<Menu ref="menuRef" v-if="menuConfig.use" :config="menuConfig" :color="color" :z-index="zIndex + 1"></Menu>
+		<Menu ref="menuRef" v-if="menuConfig.use && editor" :config="menuConfig" :color="color" :z-index="zIndex + 1"></Menu>
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
 		<div ref="bodyRef" class="editify-body" :class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
 			<!-- 编辑器 -->
-			<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': disabled }" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
+			<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': isDisabled }" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
 			<!-- 代码视图 -->
 			<textarea v-if="isSourceView" :value="value" readonly class="editify-sourceview" />
 			<!-- 工具条 -->
 			<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type" :scroll-node="contentRef!" :config="toolbarConfig" :color="color" :z-index="zIndex + 10"></Toolbar>
 		</div>
 		<!-- 编辑器尾部 -->
-		<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" ref="footerRef" :style="{ zIndex: zIndex + 1 }">
+		<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" :style="{ zIndex: zIndex + 1 }">
 			<!-- 字数统计 -->
 			<div class="editify-footer-words">{{ $editTrans('totalWordCount') }}{{ textValue.length }}</div>
 		</div>
@@ -22,13 +22,14 @@
 import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { AlexEditor, AlexElement, AlexElementRangeType, AlexElementsRangeType } from 'alex-editor'
 import { element as DapElement, event as DapEvent, data as DapData, number as DapNumber, color as DapColor } from 'dap-util'
-import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, PluginResultType, clickIsOut } from '@/core/tool'
-import { parseList, orderdListHandle, commonElementHandle, tableThTdHandle, tableFormatHandle, tableRangeMergedHandle, preHandle, specialInblockHandle } from '@/core/rule'
-import { isTask, elementToParagraph, getMatchElementByRange, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '@/core/function'
-import Toolbar from '@/components/toolbar/toolbar.vue'
-import Menu from '@/components/menu/menu.vue'
+import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, clickIsOut, cloneData } from '@/core/tool'
+import { parseList, orderdListHandle, commonElementHandle, tableThTdHandle, tableFormatHandle, tableRangeMergedHandle, preHandle, specialInblockHandle, attachmentHandle, mathformulaHandle, infoBlockHandle } from '@/core/rule'
+import { elementToParagraph, getMatchElementByRange, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange, elementIsTask, elementIsAttachment, elementIsList, elementIsMathformula, getMathformulaByElement, elementIsPanel, elementIsInfoBlock } from '@/core/function'
 import { trans } from '@/locale'
 import { LanguagesItemType } from '@/hljs'
+import { extraKeepTagsForMathformula } from '@/feature/mathformula'
+import { Toolbar } from './toolbar'
+import { Menu } from './menu'
 import { EditifyProps, EditifyResizeParamsType, EditifyToolbarOptionsType } from './props'
 
 //定义组件名称
@@ -45,6 +46,32 @@ const emits = defineEmits(['update:modelValue', 'focus', 'blur', 'change', 'keyd
 //设置国际化方法
 const $editTrans = trans(props.locale || 'zh_CN')
 
+//菜单栏组件实例
+const menuRef = ref<InstanceType<typeof Menu> | null>(null)
+//工具栏组件实例
+const toolbarRef = ref<InstanceType<typeof Toolbar> | null>(null)
+
+//自身dom
+const elRef = ref<HTMLElement | null>(null)
+//编辑器主体dom
+const bodyRef = ref<HTMLElement | null>(null)
+//编辑器内容区域dom
+const contentRef = ref<HTMLElement | null>(null)
+
+//编辑器对象
+const editor = ref<AlexEditor | null>(null)
+//是否代码视图
+const isSourceView = ref<boolean>(false)
+//是否全屏
+const isFullScreen = ref<boolean>(false)
+//代表真实光标变化，如果为null表示光标不在编辑器内，否则就是大于0的数字
+const rangeKey = ref<number | null>(0)
+//光标选区范围内的元素数组
+const dataRangeCaches = ref<AlexElementsRangeType>({
+	flatList: [],
+	list: []
+})
+
 //是否编辑器内部修改值
 const isModelChange = ref<boolean>(false)
 //是否正在输入中文
@@ -66,27 +93,6 @@ const toolbarOptions = ref<EditifyToolbarOptionsType>({
 	type: 'text'
 })
 
-const menuRef = ref<InstanceType<typeof Menu> | null>(null)
-const bodyRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-const toolbarRef = ref<InstanceType<typeof Toolbar> | null>(null)
-const footerRef = ref<HTMLElement | null>(null)
-const elRef = ref<HTMLElement | null>(null)
-
-//编辑器对象
-const editor = ref<AlexEditor | null>(null)
-//是否代码视图
-const isSourceView = ref<boolean>(false)
-//是否全屏
-const isFullScreen = ref<boolean>(false)
-//菜单栏是否可以使用标识
-const canUseMenu = ref<boolean>(false)
-//光标选取范围内的元素数组
-const dataRangeCaches = ref<AlexElementsRangeType>({
-	flatList: [],
-	list: []
-})
-
 //编辑器的值
 const value = computed<string>({
 	set(val) {
@@ -98,7 +104,7 @@ const value = computed<string>({
 })
 //编辑器的纯文本值
 const textValue = computed<string>(() => {
-	return (<HTMLElement>DapElement.string2dom(`<div>${value.value}</div>`)).innerText
+	return (DapElement.string2dom(`<div>${value.value}</div>`) as HTMLElement).innerText
 })
 //是否显示占位符
 const showPlaceholder = computed<boolean>(() => {
@@ -119,25 +125,23 @@ const showBorder = computed<boolean>(() => {
 })
 //最终生效的工具栏配置
 const toolbarConfig = computed<ToolbarConfigType>(() => {
-	return <ToolbarConfigType>mergeObject(getToolbarConfig($editTrans, props.locale), props.toolbar || {})
-})
-//插件配置读取
-const pluginResultList = computed<PluginResultType[]>(() => {
-	const pluginResultList: PluginResultType[] = []
-	props.plugins.forEach(plugin => {
-		let pluginResult = plugin(instance, $editTrans)
-		pluginResultList.push(pluginResult)
-	})
-	return pluginResultList
+	return mergeObject(getToolbarConfig($editTrans, props.locale), props.toolbar || {}) as ToolbarConfigType
 })
 //最终生效的菜单栏配置
 const menuConfig = computed<MenuConfigType>(() => {
-	return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), props.menu || {})
+	return mergeObject(getMenuConfig($editTrans, props.locale), props.menu || {}) as MenuConfigType
 })
+//编辑器菜单栏区域高度
+const menuHeight = computed<number | null>(() => {
+	return menuRef.value ? menuRef.value.height : null
+})
+
 //是否深色模式
 const isDark = computed<boolean>(() => props.dark)
-//编辑器菜单栏区域高度
-const menuHeight = computed<number | null>(() => (menuRef.value ? menuRef.value.height : null))
+//是否禁用编辑器
+const isDisabled = computed<boolean>(() => props.disabled)
+//是否自适应高度
+const isAutoHeight = computed<boolean>(() => props.autoheight)
 
 //编辑器内部修改值的方法
 const internalModify = (val: string) => {
@@ -152,54 +156,21 @@ const hideToolbar = () => {
 	toolbarOptions.value.show = false
 	toolbarOptions.value.node = null
 }
-//监听滚动隐藏工具条
-const handleScroll = () => {
-	const setScroll = (el: HTMLElement) => {
-		DapEvent.on(el, `scroll.editify_${instance.uid}`, () => {
-			if (toolbarConfig.value.use && toolbarOptions.value.show) {
-				hideToolbar()
-			}
-		})
-		if (el.parentNode) {
-			setScroll(<HTMLElement>el.parentNode)
-		}
-	}
-	setScroll(contentRef.value!)
-}
-//移除上述滚动事件的监听
-const removeScrollHandle = () => {
-	const removeScroll = (el: HTMLElement) => {
-		DapEvent.off(el, `scroll.editify_${instance.uid}`)
-		if (el.parentNode) {
-			removeScroll(<HTMLElement>el.parentNode)
-		}
-	}
-	removeScroll(contentRef.value!)
-}
 //工具条显示判断
 const handleToolbar = () => {
-	if (props.disabled || isSourceView.value) {
+	if (isDisabled.value || isSourceView.value) {
 		return
 	}
 	hideToolbar()
 	nextTick(() => {
 		const table = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
-		const pre = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'pre' })
+		const codeBlock = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'pre' })
 		const link = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'a' })
 		const image = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'img' })
 		const video = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'video' })
-		//显示链接工具条
-		if (link) {
-			toolbarOptions.value.type = 'link'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
-			if (toolbarOptions.value.show) {
-				toolbarRef.value!.layerRef!.setPosition()
-			} else {
-				toolbarOptions.value.show = true
-			}
-		}
+
 		//显示图片工具条
-		else if (image) {
+		if (image) {
 			toolbarOptions.value.type = 'image'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${image.key}"]`
 			if (toolbarOptions.value.show) {
@@ -218,6 +189,16 @@ const handleToolbar = () => {
 				toolbarOptions.value.show = true
 			}
 		}
+		//显示链接工具条
+		else if (link) {
+			toolbarOptions.value.type = 'link'
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
+			if (toolbarOptions.value.show) {
+				toolbarRef.value!.layerRef!.setPosition()
+			} else {
+				toolbarOptions.value.show = true
+			}
+		}
 		//显示表格工具条
 		else if (table) {
 			toolbarOptions.value.type = 'table'
@@ -229,9 +210,9 @@ const handleToolbar = () => {
 			}
 		}
 		//显示代码块工具条
-		else if (pre) {
+		else if (codeBlock) {
 			toolbarOptions.value.type = 'codeBlock'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pre.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${codeBlock.key}"]`
 			if (toolbarOptions.value.show) {
 				toolbarRef.value!.layerRef!.setPosition()
 			} else {
@@ -240,9 +221,7 @@ const handleToolbar = () => {
 		}
 		//显示文本工具条
 		else {
-			const result = dataRangeCaches.value.flatList.filter((item: AlexElementRangeType) => {
-				return item.element.isText()
-			})
+			const result = dataRangeCaches.value.flatList.filter((item: AlexElementRangeType) => item.element.isText())
 			if (result.length && !hasTableInRange(editor.value!, dataRangeCaches.value) && !hasPreInRange(editor.value!, dataRangeCaches.value) && !hasLinkInRange(editor.value!, dataRangeCaches.value) && !hasImageInRange(editor.value!, dataRangeCaches.value) && !hasVideoInRange(editor.value!, dataRangeCaches.value)) {
 				toolbarOptions.value.type = 'text'
 				if (toolbarOptions.value.show) {
@@ -256,29 +235,10 @@ const handleToolbar = () => {
 }
 //初始创建编辑器
 const createEditor = () => {
-	//注册插件：自定义规则校验函数
-	let pluginRules: ((el: AlexElement) => void)[] = []
-	pluginResultList.value.forEach(pluginResult => {
-		if (pluginResult.renderRule) {
-			pluginRules.push(pluginResult.renderRule)
-		}
-	})
-	//注册插件：将插件定义的额外保留的标签数组与配置合并
-	let extraKeepTags: string[] = [...props.extraKeepTags]
-	pluginResultList.value.forEach(pluginResult => {
-		if (pluginResult.extraKeepTags && Array.isArray(pluginResult.extraKeepTags)) {
-			pluginResult.extraKeepTags.forEach(tag => {
-				//如果不包含则加入数组
-				if (!extraKeepTags.includes(tag)) {
-					extraKeepTags.push(tag)
-				}
-			})
-		}
-	})
 	//创建编辑器
 	editor.value = new AlexEditor(contentRef.value!, {
 		value: value.value,
-		disabled: props.disabled,
+		disabled: isDisabled.value,
 		renderRules: [
 			el => {
 				parseList(editor.value!, el)
@@ -299,14 +259,23 @@ const createEditor = () => {
 				tableRangeMergedHandle(editor.value!, el)
 			},
 			el => {
-				preHandle(editor.value!, el, !!(toolbarConfig.value?.use && toolbarConfig.value?.codeBlock?.languages?.show), <(string | LanguagesItemType)[]>toolbarConfig.value?.codeBlock?.languages?.options)
+				preHandle(editor.value!, el, !!(toolbarConfig.value?.use && toolbarConfig.value?.codeBlock?.languages?.show), toolbarConfig.value?.codeBlock?.languages?.options as (string | LanguagesItemType)[])
 			},
 			el => {
 				specialInblockHandle(editor.value!, el)
 			},
-			...pluginRules,
+			el => {
+				attachmentHandle(editor.value!, el, $editTrans)
+			},
+			el => {
+				mathformulaHandle(editor.value!, el)
+			},
+			el => {
+				infoBlockHandle(editor.value!, el, props.color)
+			},
 			...props.renderRules
 		],
+		extraKeepTags: [...extraKeepTagsForMathformula, ...props.extraKeepTags],
 		allowCopy: props.allowCopy,
 		allowPaste: props.allowPaste,
 		allowCut: props.allowCut,
@@ -317,8 +286,7 @@ const createEditor = () => {
 		customFilePaste: props.customFilePaste,
 		customHtmlPaste: handleCustomHtmlPaste,
 		customMerge: handleCustomMerge,
-		customParseNode: handleCustomParseNode,
-		extraKeepTags: extraKeepTags
+		customParseNode: handleCustomParseNode
 	})
 	//编辑器渲染后会有一个渲染过程，会改变内容，因此重新获取内容的值来设置value
 	internalModify(editor.value.value)
@@ -337,7 +305,7 @@ const createEditor = () => {
 	editor.value.formatElementStack()
 	editor.value.domRender()
 	//自动获取焦点
-	if (props.autofocus && !isSourceView.value && !props.disabled) {
+	if (props.autofocus && !isSourceView.value && !isDisabled.value) {
 		collapseToEnd()
 	}
 }
@@ -349,7 +317,7 @@ const setVideoHeight = () => {
 }
 //鼠标在页面按下：处理表格拖拽改变列宽、拖拽改变图片视频宽度和菜单栏是否使用判断
 const documentMouseDown = (e: Event) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	const elm = e.target as HTMLElement
@@ -386,14 +354,14 @@ const documentMouseDown = (e: Event) => {
 			}
 		}
 	}
-	//如果点击了除编辑器外的地方，菜单栏不可使用
+	//如果点击了除编辑器外的地方，菜单栏不可使用，此时将range置为null
 	if (clickIsOut(elRef.value!, elm) && !isSourceView.value) {
-		canUseMenu.value = false
+		rangeKey.value = null
 	}
 }
 //鼠标在页面移动：处理表格拖拽改变列宽、拖拽改变图片视频宽度
 const documentMouseMove = (e: Event) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	const event = e as MouseEvent
@@ -448,7 +416,7 @@ const documentMouseMove = (e: Event) => {
 }
 //鼠标在页面松开：处理表格拖拽改变列宽、拖拽改变图片视频宽度
 const documentMouseUp = () => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	if (!resizeParams.value.element) {
@@ -497,7 +465,7 @@ const documentMouseUp = () => {
 }
 //鼠标点击页面：处理任务列表复选框勾选
 const documentClick = (e: Event) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	const elm = e.target as HTMLElement
@@ -508,7 +476,7 @@ const documentClick = (e: Event) => {
 		if (key) {
 			const element = editor.value!.getElementByKey(key)!
 			//如果是任务列表元素
-			if (isTask(element)) {
+			if (elementIsTask(element)) {
 				const rect = DapElement.getElementBounding(elm)
 				//在复选框范围内
 				if (event.pageX >= Math.abs(rect.left) && event.pageX <= Math.abs(rect.left + 16) && event.pageY >= Math.abs(rect.top + elm.offsetHeight / 2 - 8) && event.pageY <= Math.abs(rect.top + elm.offsetHeight / 2 + 8)) {
@@ -586,7 +554,7 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 					marks['target'] = el.marks!['target']
 				}
 				//有序和无序列表属性保留
-				if (el.parsedom == 'div' && el.marks!['data-editify-list']) {
+				if (elementIsList(el, true) || elementIsList(el, false)) {
 					marks['data-editify-list'] = el.marks!['data-editify-list']
 					//有序列表保留序列号标记
 					if (el.marks!['data-editify-value']) {
@@ -598,7 +566,7 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 					marks['data-editify-code'] = el.marks!['data-editify-code']
 				}
 				//任务列表属性保留
-				if (el.parsedom == 'div' && el.marks!['data-editify-task']) {
+				if (elementIsTask(el)) {
 					marks['data-editify-task'] = el.marks!['data-editify-task']
 				}
 				//表格列宽属性保留
@@ -617,6 +585,25 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 				if (['td', 'th'].includes(el.parsedom!) && el.marks!['data-editify-merged']) {
 					marks['data-editify-merged'] = el.marks!['data-editify-merged']
 				}
+				//附件属性保留
+				if (elementIsAttachment(el)) {
+					marks['data-editify-attachment'] = el.marks!['data-editify-attachment']
+					if (el.marks!['data-editify-attachment-name']) {
+						marks['data-editify-attachment-name'] = el.marks!['data-editify-attachment-name']
+					}
+				}
+				//数学公式内的属性全部保留
+				if (!!getMathformulaByElement(el)) {
+					marks = mergeObject(marks, cloneData(el.marks!))!
+				}
+				//面板属性保留
+				if (elementIsPanel(el)) {
+					marks['data-editify-panel'] = el.marks!['data-editify-panel']
+				}
+				//信息块属性保留
+				if (elementIsInfoBlock(el)) {
+					marks['data-editify-info'] = el.marks!['data-editify-info']
+				}
 			}
 			//处理需要保留的样式
 			if (el.hasStyles()) {
@@ -636,18 +623,11 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 				if ((el.isBlock() || el.isInblock()) && el.styles!['line-height']) {
 					styles['line-height'] = el.styles!['line-height']
 				}
-			}
-			//注册插件：自定义属性和样式的保留
-			pluginResultList.value.forEach(pluginResult => {
-				if (typeof pluginResult.pasteKeepMarks == 'function') {
-					const keepMarks = pluginResult.pasteKeepMarks(el)
-					marks = mergeObject(marks, keepMarks)!
-				}
-				if (typeof pluginResult.pasteKeepStyles == 'function') {
-					const keepStyles = pluginResult.pasteKeepStyles(el)
-					styles = mergeObject(styles, keepStyles)!
+				//数学公式内的样式全部保留
+				if (!!getMathformulaByElement(el)) {
+					styles = mergeObject(styles, cloneData(el.styles!))!
 				}
-			})
+			}
 			//对外的自定义属性和样式保留
 			if (typeof props.pasteKeepMarks == 'function') {
 				marks = mergeObject(marks, props.pasteKeepMarks(el))!
@@ -690,24 +670,33 @@ const handleCustomMerge = (ele: AlexElement, preEle: AlexElement) => {
 }
 //针对node转为元素进行额外的处理
 const handleCustomParseNode = (ele: AlexElement) => {
-	//注册插件：自定义元素转换处理
-	pluginResultList.value.forEach(pluginResult => {
-		if (pluginResult.customParseNode) {
-			ele = pluginResult.customParseNode(ele)
-		}
-	})
+	//附件元素设为自闭合元素
+	if (elementIsAttachment(ele)) {
+		ele.type = 'closed'
+	}
+	//数学公式元素处理
+	if (elementIsMathformula(ele)) {
+		AlexElement.flatElements(ele.children!).forEach(item => {
+			//锁定元素防止合并
+			item.locked = true
+			//没有子元素的非文本元素设为自闭合元素
+			if (!item.isText() && !item.hasChildren()) {
+				item.type = 'closed'
+			}
+		})
+	}
 	if (typeof props.customParseNode == 'function') {
 		ele = props.customParseNode(ele)
 	}
 	return ele
 }
-//编辑区域键盘按下：设置缩进快捷键
+//编辑区域键盘按下
 const handleEditorKeydown = (val: string, e: Event) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	//单独按下tab键
-	if ((<KeyboardEvent>e).key.toLocaleLowerCase() == 'tab' && !(<KeyboardEvent>e).metaKey && !(<KeyboardEvent>e).shiftKey && !(<KeyboardEvent>e).ctrlKey && !(<KeyboardEvent>e).altKey && props.tab) {
+	if ((e as KeyboardEvent).key.toLocaleLowerCase() == 'tab' && !(e as KeyboardEvent).metaKey && !(e as KeyboardEvent).shiftKey && !(e as KeyboardEvent).ctrlKey && !(e as KeyboardEvent).altKey && props.tab) {
 		e.preventDefault()
 		editor.value!.insertText('    ')
 		editor.value!.formatElementStack()
@@ -719,7 +708,7 @@ const handleEditorKeydown = (val: string, e: Event) => {
 }
 //编辑区域键盘松开
 const handleEditorKeyup = (val: string, e: Event) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	//自定义键盘松开操作
@@ -727,7 +716,7 @@ const handleEditorKeyup = (val: string, e: Event) => {
 }
 //点击编辑器：处理图片和视频的光标聚集
 const handleEditorClick = (e: Event) => {
-	if (props.disabled || isSourceView.value) {
+	if (isDisabled.value || isSourceView.value) {
 		return
 	}
 	const elm = e.target as HTMLElement
@@ -747,7 +736,7 @@ const handleEditorClick = (e: Event) => {
 }
 //编辑器的值更新
 const handleEditorChange = (newVal: string, oldVal: string) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	//内部修改
@@ -757,7 +746,7 @@ const handleEditorChange = (newVal: string, oldVal: string) => {
 }
 //编辑器失去焦点
 const handleEditorBlur = (val: string) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	if (props.border && props.color && !isFullScreen.value) {
@@ -775,7 +764,7 @@ const handleEditorBlur = (val: string) => {
 }
 //编辑器获取焦点
 const handleEditorFocus = (val: string) => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	if (props.border && props.color && !isFullScreen.value) {
@@ -803,11 +792,7 @@ const handleEditorFocus = (val: string) => {
 			bodyRef.value!.style.boxShadow = `0 0 8px rgba(${rgb[0]},${rgb[1]},${rgb[2]},0.5)`
 		}
 	}
-	//获取焦点时可以使用菜单栏
-	setTimeout(() => {
-		canUseMenu.value = true
-		emits('focus', val)
-	}, 0)
+	emits('focus', val)
 }
 //编辑器换行
 const handleInsertParagraph = (element: AlexElement, previousElement: AlexElement) => {
@@ -823,7 +808,7 @@ const handleInsertParagraph = (element: AlexElement, previousElement: AlexElemen
 			}
 		}
 		//如果当前换行元素是任务列表则改为不勾选状态
-		if (isTask(element)) {
+		if (elementIsTask(element)) {
 			element.marks!['data-editify-task'] = 'uncheck'
 		}
 	}
@@ -831,11 +816,15 @@ const handleInsertParagraph = (element: AlexElement, previousElement: AlexElemen
 }
 //编辑器焦点更新
 const handleRangeUpdate = () => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
-	//如果没有range禁用菜单栏
-	canUseMenu.value = !!editor.value!.range
+	//更新rangeKey
+	if (rangeKey.value) {
+		rangeKey.value++
+	} else {
+		rangeKey.value = 1
+	}
 
 	//没有range直接返回
 	if (!editor.value!.range) {
@@ -851,16 +840,9 @@ const handleRangeUpdate = () => {
 	}
 	//延时200ms进行判断
 	rangeUpdateTimer.value = setTimeout(() => {
-		//如果使用工具条或者菜单栏
-		if (toolbarConfig.value.use || menuConfig.value.use) {
-			//如果使用工具条
-			if (toolbarConfig.value.use) {
-				handleToolbar()
-			}
-			//如果使用菜单栏
-			if (menuConfig.value.use) {
-				menuRef.value!.handleRangeUpdate()
-			}
+		//如果使用工具条
+		if (toolbarConfig.value.use) {
+			handleToolbar()
 		}
 	}, 200)
 	//触发rangeupdate事件
@@ -884,30 +866,47 @@ const handleDeleteComplete = () => {
 const handleAfterRender = () => {
 	//设定视频高度
 	setVideoHeight()
-	//注册插件：自定义dom渲染后处理
-	pluginResultList.value.forEach(pluginResult => {
-		if (pluginResult.updateView) {
-			pluginResult.updateView()
+	//附件元素下载事件设置
+	AlexElement.flatElements(editor.value!.stack).forEach(el => {
+		if (elementIsAttachment(el)) {
+			DapEvent.off(el.elm as HTMLElement, 'click')
+			//单击下载
+			DapEvent.on(el.elm as HTMLElement, 'click', async () => {
+				//获取文件地址
+				const url = el.marks!['data-editify-attachment']
+				//使用fetch读取文件地址
+				const res = await fetch(url, {
+					method: 'GET'
+				})
+				//获取blob数据
+				const blob = await res.blob()
+				//创建a标签进行下载
+				const a = document.createElement('a')
+				a.setAttribute('target', '_blank')
+				a.setAttribute('href', URL.createObjectURL(blob))
+				a.setAttribute('download', el.marks!['data-editify-attachment-name'])
+				a.click()
+			})
 		}
 	})
 	emits('updateview')
 }
 //api：光标设置到文档底部
 const collapseToEnd = () => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	editor.value!.collapseToEnd()
 	editor.value!.rangeRender()
 	DapElement.setScrollTop({
 		el: contentRef.value!,
-		number: 1000000,
+		number: DapElement.getScrollHeight(contentRef.value!),
 		time: 0
 	})
 }
 //api：光标设置到文档头部
 const collapseToStart = () => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	editor.value!.collapseToStart()
@@ -922,7 +921,7 @@ const collapseToStart = () => {
 }
 //api：撤销
 const undo = () => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	const historyRecord = editor.value!.history.get(-1)
@@ -937,7 +936,7 @@ const undo = () => {
 }
 //api：重做
 const redo = () => {
-	if (props.disabled) {
+	if (isDisabled.value) {
 		return
 	}
 	const historyRecord = editor.value!.history.get(1)
@@ -981,9 +980,9 @@ watch(
 		}
 	}
 )
-//监听disabled
+//监听isDisabled
 watch(
-	() => props.disabled,
+	() => isDisabled.value,
 	newVal => {
 		if (newVal) {
 			editor.value!.setDisabled()
@@ -1010,8 +1009,6 @@ watch(
 onMounted(() => {
 	//创建编辑器
 	createEditor()
-	//监听滚动隐藏工具条
-	handleScroll()
 	//鼠标按下监听
 	DapEvent.on(document.documentElement, `mousedown.editify_${instance.uid}`, documentMouseDown)
 	//鼠标移动监听
@@ -1025,8 +1022,6 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-	//卸载绑定在滚动元素上的事件
-	removeScrollHandle()
 	//卸载绑定在document.documentElement上的事件
 	DapEvent.off(document.documentElement, `mousedown.editify_${instance.uid} mousemove.editify_${instance.uid} mouseup.editify_${instance.uid} click.editify_${instance.uid}`)
 	//卸载绑定在window上的事件
@@ -1035,22 +1030,24 @@ onBeforeUnmount(() => {
 	editor.value!.destroy()
 })
 
-provide('$editTrans', $editTrans)
-provide('editify', instance)
+provide('editor', editor)
 provide('isSourceView', isSourceView)
 provide('isFullScreen', isFullScreen)
-provide('canUseMenu', canUseMenu)
-provide('editor', editor)
+provide('rangeKey', rangeKey)
 provide('dataRangeCaches', dataRangeCaches)
+provide('undo', undo)
+provide('redo', redo)
+provide('$editTrans', $editTrans)
 provide('showBorder', showBorder)
-provide('pluginResultList', pluginResultList)
 provide('isDark', isDark)
+provide('isDisabled', isDisabled)
+provide('isAutoHeight', isAutoHeight)
 
 defineExpose({
 	editor,
 	isSourceView,
 	isFullScreen,
-	canUseMenu,
+	rangeKey,
 	dataRangeCaches,
 	textValue,
 	menuHeight,