vue-editify 0.2.11 → 0.2.13

package/lib/index.d.ts

@@ -150,8 +150,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                     key: number;
                     type: import('alex-editor').AlexElementType;
                     parsedom: string | null;
-                    marks: import('alex-editor').ObjectType | null;
-                    styles: import('alex-editor').ObjectType | null;
+                    marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                    styles: import('alex-editor/lib/core/tool').ObjectType | null;
                     textContent: string | null;
                     children: any[] | null;
                     parent: any | null;
@@ -170,7 +170,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                     getUneditableElement: () => import('alex-editor').AlexElement | null;
                     isEqual: (element: import('alex-editor').AlexElement) => boolean;
                     isContains: (element: import('alex-editor').AlexElement) => boolean;
-                    isOnlyHasBreak: () => boolean | 0;
+                    isOnlyHasBreak: () => boolean;
                     isPreStyle: () => boolean;
                     hasMarks: () => boolean;
                     hasStyles: () => boolean;
@@ -195,8 +195,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                             key: number;
                             type: import('alex-editor').AlexElementType;
                             parsedom: string | null;
-                            marks: import('alex-editor').ObjectType | null;
-                            styles: import('alex-editor').ObjectType | null;
+                            marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                            styles: import('alex-editor/lib/core/tool').ObjectType | null;
                             textContent: string | null;
                             children: any[] | null;
                             parent: any | null;
@@ -215,7 +215,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                             getUneditableElement: () => import('alex-editor').AlexElement | null;
                             isEqual: (element: import('alex-editor').AlexElement) => boolean;
                             isContains: (element: import('alex-editor').AlexElement) => boolean;
-                            isOnlyHasBreak: () => boolean | 0;
+                            isOnlyHasBreak: () => boolean;
                             isPreStyle: () => boolean;
                             hasMarks: () => boolean;
                             hasStyles: () => boolean;
@@ -244,8 +244,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                             key: number;
                             type: import('alex-editor').AlexElementType;
                             parsedom: string | null;
-                            marks: import('alex-editor').ObjectType | null;
-                            styles: import('alex-editor').ObjectType | null;
+                            marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                            styles: import('alex-editor/lib/core/tool').ObjectType | null;
                             textContent: string | null;
                             children: any[] | null;
                             parent: any | null;
@@ -264,7 +264,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                             getUneditableElement: () => import('alex-editor').AlexElement | null;
                             isEqual: (element: import('alex-editor').AlexElement) => boolean;
                             isContains: (element: import('alex-editor').AlexElement) => boolean;
-                            isOnlyHasBreak: () => boolean | 0;
+                            isOnlyHasBreak: () => boolean;
                             isPreStyle: () => boolean;
                             hasMarks: () => boolean;
                             hasStyles: () => boolean;
@@ -300,8 +300,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
             key: number;
             type: import('alex-editor').AlexElementType;
             parsedom: string | null;
-            marks: import('alex-editor').ObjectType | null;
-            styles: import('alex-editor').ObjectType | null;
+            marks: import('alex-editor/lib/core/tool').ObjectType | null;
+            styles: import('alex-editor/lib/core/tool').ObjectType | null;
             textContent: string | null;
             children: any[] | null;
             parent: any | null;
@@ -320,7 +320,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
             getUneditableElement: () => import('alex-editor').AlexElement | null;
             isEqual: (element: import('alex-editor').AlexElement) => boolean;
             isContains: (element: import('alex-editor').AlexElement) => boolean;
-            isOnlyHasBreak: () => boolean | 0;
+            isOnlyHasBreak: () => boolean;
             isPreStyle: () => boolean;
             hasMarks: () => boolean;
             hasStyles: () => boolean;
@@ -345,8 +345,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                     key: number;
                     type: import('alex-editor').AlexElementType;
                     parsedom: string | null;
-                    marks: import('alex-editor').ObjectType | null;
-                    styles: import('alex-editor').ObjectType | null;
+                    marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                    styles: import('alex-editor/lib/core/tool').ObjectType | null;
                     textContent: string | null;
                     children: any[] | null;
                     parent: any | null;
@@ -365,7 +365,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                     getUneditableElement: () => import('alex-editor').AlexElement | null;
                     isEqual: (element: import('alex-editor').AlexElement) => boolean;
                     isContains: (element: import('alex-editor').AlexElement) => boolean;
-                    isOnlyHasBreak: () => boolean | 0;
+                    isOnlyHasBreak: () => boolean;
                     isPreStyle: () => boolean;
                     hasMarks: () => boolean;
                     hasStyles: () => boolean;
@@ -394,8 +394,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                     key: number;
                     type: import('alex-editor').AlexElementType;
                     parsedom: string | null;
-                    marks: import('alex-editor').ObjectType | null;
-                    styles: import('alex-editor').ObjectType | null;
+                    marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                    styles: import('alex-editor/lib/core/tool').ObjectType | null;
                     textContent: string | null;
                     children: any[] | null;
                     parent: any | null;
@@ -414,7 +414,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                     getUneditableElement: () => import('alex-editor').AlexElement | null;
                     isEqual: (element: import('alex-editor').AlexElement) => boolean;
                     isContains: (element: import('alex-editor').AlexElement) => boolean;
-                    isOnlyHasBreak: () => boolean | 0;
+                    isOnlyHasBreak: () => boolean;
                     isPreStyle: () => boolean;
                     hasMarks: () => boolean;
                     hasStyles: () => boolean;
@@ -440,50 +440,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
             };
         } | null;
         __guid: number;
-        __events: import('alex-editor').ObjectType;
-        __oldStack: {
-            key: number;
-            type: import('alex-editor').AlexElementType;
-            parsedom: string | null;
-            marks: import('alex-editor').ObjectType | null;
-            styles: import('alex-editor').ObjectType | null;
-            textContent: string | null;
-            children: any[] | null;
-            parent: any | null;
-            behavior: "default" | "block";
-            namespace: string | null;
-            locked: boolean;
-            elm: HTMLElement | null;
-            isBlock: () => boolean;
-            isInblock: () => boolean;
-            isInline: () => boolean;
-            isClosed: () => boolean;
-            isText: () => boolean;
-            isBreak: () => boolean;
-            isEmpty: () => boolean;
-            isSpaceText: () => boolean;
-            getUneditableElement: () => import('alex-editor').AlexElement | null;
-            isEqual: (element: import('alex-editor').AlexElement) => boolean;
-            isContains: (element: import('alex-editor').AlexElement) => boolean;
-            isOnlyHasBreak: () => boolean | 0;
-            isPreStyle: () => boolean;
-            hasMarks: () => boolean;
-            hasStyles: () => boolean;
-            hasChildren: () => boolean;
-            hasContains: (element: import('alex-editor').AlexElement) => boolean;
-            clone: (deep?: boolean | undefined) => import('alex-editor').AlexElement;
-            convertToBlock: () => void;
-            toEmpty: () => void;
-            getBlock: () => import('alex-editor').AlexElement;
-            getInblock: () => import('alex-editor').AlexElement | null;
-            getInline: () => import('alex-editor').AlexElement | null;
-            isEqualStyles: (element: import('alex-editor').AlexElement) => boolean;
-            isEqualMarks: (element: import('alex-editor').AlexElement) => boolean;
-            isFirst: (element: import('alex-editor').AlexElement) => boolean;
-            isLast: (element: import('alex-editor').AlexElement) => boolean;
-            __render: () => void;
-            __fullClone: () => import('alex-editor').AlexElement;
-        }[];
+        __events: import('alex-editor/lib/core/tool').ObjectType;
+        __firstRender: boolean;
         __isInputChinese: boolean;
         __innerSelectionChange: boolean;
         __chineseInputTimer: any;
@@ -524,8 +482,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                 key: number;
                 type: import('alex-editor').AlexElementType;
                 parsedom: string | null;
-                marks: import('alex-editor').ObjectType | null;
-                styles: import('alex-editor').ObjectType | null;
+                marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                styles: import('alex-editor/lib/core/tool').ObjectType | null;
                 textContent: string | null;
                 children: any[] | null;
                 parent: any | null;
@@ -544,7 +502,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                 getUneditableElement: () => import('alex-editor').AlexElement | null;
                 isEqual: (element: import('alex-editor').AlexElement) => boolean;
                 isContains: (element: import('alex-editor').AlexElement) => boolean;
-                isOnlyHasBreak: () => boolean | 0;
+                isOnlyHasBreak: () => boolean;
                 isPreStyle: () => boolean;
                 hasMarks: () => boolean;
                 hasStyles: () => boolean;
@@ -570,8 +528,8 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                 key: number;
                 type: import('alex-editor').AlexElementType;
                 parsedom: string | null;
-                marks: import('alex-editor').ObjectType | null;
-                styles: import('alex-editor').ObjectType | null;
+                marks: import('alex-editor/lib/core/tool').ObjectType | null;
+                styles: import('alex-editor/lib/core/tool').ObjectType | null;
                 textContent: string | null;
                 children: any[] | null;
                 parent: any | null;
@@ -590,7 +548,7 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
                 getUneditableElement: () => import('alex-editor').AlexElement | null;
                 isEqual: (element: import('alex-editor').AlexElement) => boolean;
                 isContains: (element: import('alex-editor').AlexElement) => boolean;
-                isOnlyHasBreak: () => boolean | 0;
+                isOnlyHasBreak: () => boolean;
                 isPreStyle: () => boolean;
                 hasMarks: () => boolean;
                 hasStyles: () => boolean;
@@ -800,11 +758,11 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
 export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from './components/button/props';
 export type { InsertImageUploadErrorType } from './components/insertImage/props';
 export type { InsertVideoUploadErrorType } from './components/insertVideo/props';
-export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginType, PluginResultType } from './core/tool';
+export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginMenuConfigType, PluginType, PluginResultType } from './core/tool';
 export type { ElementMatchConfigType } from './core/function';
 export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from './core/function';
 declare const install: (app: App) => void;
-declare const version = "0.2.11";
+declare const version = "0.2.13";
 export { AlexElement } from 'alex-editor';
 export type { AttachmentOptionsType } from './plugins/attachment';
 export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.2.11",
+	"version": "0.2.13",
 	"private": false,
 	"sideEffects": [
 		"*.css"

package/src/components/layer/layer.vue

@@ -11,7 +11,7 @@
 	</Teleport>
 </template>
 <script setup lang="ts">
-import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { element as DapElement, event as DapEvent } from 'dap-util'
 import Triangle from '@/components/triangle/triangle.vue'
 import { TrianglePlacementType } from '@/components/triangle/props'
@@ -577,12 +577,19 @@ const handleClick = (e: Event) => {
 	if (!DapElement.isElement(elRef.value)) {
 		return
 	}
+	//如果在浮层内点击，不用关闭
 	if (DapElement.isContains(elRef.value!, e.target as HTMLElement)) {
 		return
 	}
+	//如果在浮层关联的元素内点击，不用关闭
 	if (!props.useRange && getNode()! && DapElement.isContains(getNode()!, e.target as HTMLElement)) {
 		return
 	}
+	//如果在insideElement规定的元素内，不用关闭
+	if (props.insideElements.some(el => DapElement.isContains(el, e.target as HTMLElement))) {
+		return
+	}
+
 	if (props.modelValue) {
 		emits('update:modelValue', false)
 	}
@@ -596,8 +603,13 @@ onMounted(() => {
 	DapEvent.on(window, `resize.editify_layer_${instance.uid}`, handleResize)
 })
 
+onBeforeUnmount(() => {
+	DapEvent.off(window, `mousedown.editify_layer_${instance.uid} resize.editify_layer_${instance.uid}`)
+})
+
 defineExpose({
-	setPosition
+	setPosition,
+	elRef
 })
 </script>
 <style scoped src="./layer.less"></style>

package/src/components/layer/props.ts

@@ -70,6 +70,13 @@ export const LayerProps = {
 	useRange: {
 		type: Boolean,
 		default: false
+	},
+	//点击无需关闭layer的元素数组
+	insideElements: {
+		type: Array as PropType<HTMLElement[]>,
+		default: function () {
+			return []
+		}
 	}
 }
 

package/src/components/toolbar/toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" @show="layerShow" :useRange="type == 'text'" :z-index="zIndex">
+	<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" @show="layerShow" :useRange="type == 'text'" :z-index="zIndex" :inside-elements="insideElements">
 		<div class="editify-toolbar" ref="toolbarRef" :style="config.style">
 			<!-- 链接工具条 -->
 			<template v-if="type == 'link'">
@@ -131,14 +131,14 @@
 					<Icon value="text-wrap"></Icon>
 				</Button>
 				<!-- 代码块语言选择 -->
-				<Button v-if="languageConfig.show" name="languages" type="display" :title="$editTrans('selectLanguages')" :tooltip="config.tooltip" :leftBorder="languageConfig.leftBorder" :rightBorder="languageConfig.rightBorder" :display-config="languageConfig.displayConfig" :color="color" :active="languageConfig.active" :disabled="languageConfig.disabled" @operate="selectLanguage" :z-index="zIndex + 1"></Button>
+				<Button v-if="languageConfig.show" ref="languagesBtnRef" name="languages" type="display" :title="$editTrans('selectLanguages')" :tooltip="config.tooltip" :leftBorder="languageConfig.leftBorder" :rightBorder="languageConfig.rightBorder" :display-config="languageConfig.displayConfig" :color="color" :active="languageConfig.active" :disabled="languageConfig.disabled" @operate="selectLanguage" :z-index="zIndex + 1"></Button>
 			</template>
 			<!-- 文本工具条 -->
 			<template v-else-if="type == 'text'">
 				<!-- 设置段落和标题 -->
-				<Button v-if="headingConfig.show" name="heading" type="display" :title="$editTrans('heading')" :tooltip="config.tooltip" :display-config="headingConfig.displayConfig" :leftBorder="headingConfig.leftBorder" :rightBorder="headingConfig.rightBorder" :color="color" :active="headingConfig.active" :disabled="headingConfig.disabled" @operate="_setHeading" :z-index="zIndex + 1"></Button>
+				<Button v-if="headingConfig.show" ref="headingBtnRef" name="heading" type="display" :title="$editTrans('heading')" :tooltip="config.tooltip" :display-config="headingConfig.displayConfig" :leftBorder="headingConfig.leftBorder" :rightBorder="headingConfig.rightBorder" :color="color" :active="headingConfig.active" :disabled="headingConfig.disabled" @operate="_setHeading" :z-index="zIndex + 1"></Button>
 				<!-- 对齐方式 -->
-				<Button v-if="alignConfig.show" name="align" type="select" :title="$editTrans('align')" :tooltip="config.tooltip" :select-config="alignConfig.selectConfig" :leftBorder="alignConfig.leftBorder" :rightBorder="alignConfig.rightBorder" :color="color" :active="alignConfig.active" :disabled="alignConfig.disabled" @operate="_setAlign" :z-index="zIndex + 1">
+				<Button v-if="alignConfig.show" name="align" ref="alignBtnRef" type="select" :title="$editTrans('align')" :tooltip="config.tooltip" :select-config="alignConfig.selectConfig" :leftBorder="alignConfig.leftBorder" :rightBorder="alignConfig.rightBorder" :color="color" :active="alignConfig.active" :disabled="alignConfig.disabled" @operate="_setAlign" :z-index="zIndex + 1">
 					<Icon value="align-left"></Icon>
 				</Button>
 				<!-- 有序列表 -->
@@ -182,20 +182,20 @@
 					<Icon value="subscript"></Icon>
 				</Button>
 				<!-- 字号大小 -->
-				<Button v-if="fontSizeConfig.show" name="fontSize" type="display" :title="$editTrans('fontSize')" :tooltip="config.tooltip" :display-config="fontSizeConfig.displayConfig" :leftBorder="fontSizeConfig.leftBorder" :rightBorder="fontSizeConfig.rightBorder" :color="color" :active="fontSizeConfig.active" :disabled="fontSizeConfig.disabled" @operate="setFontSize" :z-index="zIndex + 1"></Button>
+				<Button v-if="fontSizeConfig.show" ref="fontSizeBtnRef" name="fontSize" type="display" :title="$editTrans('fontSize')" :tooltip="config.tooltip" :display-config="fontSizeConfig.displayConfig" :leftBorder="fontSizeConfig.leftBorder" :rightBorder="fontSizeConfig.rightBorder" :color="color" :active="fontSizeConfig.active" :disabled="fontSizeConfig.disabled" @operate="setFontSize" :z-index="zIndex + 1"></Button>
 				<!-- 字体 -->
-				<Button v-if="fontFamilyConfig.show" name="fontFamily" type="display" :title="$editTrans('fontFamily')" :tooltip="config.tooltip" :display-config="fontFamilyConfig.displayConfig" :leftBorder="fontFamilyConfig.leftBorder" :rightBorder="fontFamilyConfig.rightBorder" :color="color" :active="fontFamilyConfig.active" :disabled="fontFamilyConfig.disabled" @operate="setFontFamily" :z-index="zIndex + 1"></Button>
+				<Button v-if="fontFamilyConfig.show" ref="fontFamilyBtnRef" name="fontFamily" type="display" :title="$editTrans('fontFamily')" :tooltip="config.tooltip" :display-config="fontFamilyConfig.displayConfig" :leftBorder="fontFamilyConfig.leftBorder" :rightBorder="fontFamilyConfig.rightBorder" :color="color" :active="fontFamilyConfig.active" :disabled="fontFamilyConfig.disabled" @operate="setFontFamily" :z-index="zIndex + 1"></Button>
 				<!-- 行高 -->
-				<Button v-if="lineHeightConfig.show" name="lineHeight" type="display" :title="$editTrans('lineHeight')" :tooltip="config.tooltip" :display-config="lineHeightConfig.displayConfig" :leftBorder="lineHeightConfig.leftBorder" :rightBorder="lineHeightConfig.rightBorder" :color="color" :active="lineHeightConfig.active" :disabled="lineHeightConfig.disabled" @operate="_setLineHeight" :z-index="zIndex + 1"></Button>
+				<Button v-if="lineHeightConfig.show" ref="lineHeightBtnRef" name="lineHeight" type="display" :title="$editTrans('lineHeight')" :tooltip="config.tooltip" :display-config="lineHeightConfig.displayConfig" :leftBorder="lineHeightConfig.leftBorder" :rightBorder="lineHeightConfig.rightBorder" :color="color" :active="lineHeightConfig.active" :disabled="lineHeightConfig.disabled" @operate="_setLineHeight" :z-index="zIndex + 1"></Button>
 				<!-- 前景色 -->
-				<Button v-if="foreColorConfig.show" name="foreColor" type="select" :title="$editTrans('foreColor')" :tooltip="config.tooltip" :select-config="foreColorConfig.selectConfig" :leftBorder="foreColorConfig.leftBorder" :rightBorder="foreColorConfig.rightBorder" :color="color" :active="foreColorConfig.active" :disabled="foreColorConfig.disabled" hideScroll ref="foreColorRef" :z-index="zIndex + 1">
+				<Button v-if="foreColorConfig.show" name="foreColor" type="select" :title="$editTrans('foreColor')" :tooltip="config.tooltip" :select-config="foreColorConfig.selectConfig" :leftBorder="foreColorConfig.leftBorder" :rightBorder="foreColorConfig.rightBorder" :color="color" :active="foreColorConfig.active" :disabled="foreColorConfig.disabled" hideScroll ref="foreColorBtnRef" :z-index="zIndex + 1">
 					<Icon value="font-color"></Icon>
 					<template #layer="{ options }">
 						<Colors :tooltip="config.tooltip" :color="color" :value="foreColorConfig.value" @change="setForeColor" :data="options"></Colors>
 					</template>
 				</Button>
 				<!-- 背景色 -->
-				<Button v-if="backColorConfig.show" name="backColor" type="select" :title="$editTrans('backColor')" :tooltip="config.tooltip" :select-config="backColorConfig.selectConfig" :leftBorder="backColorConfig.leftBorder" :rightBorder="backColorConfig.rightBorder" :color="color" :active="backColorConfig.active" :disabled="backColorConfig.disabled" hideScroll ref="backColorRef" :z-index="zIndex + 1">
+				<Button v-if="backColorConfig.show" name="backColor" type="select" :title="$editTrans('backColor')" :tooltip="config.tooltip" :select-config="backColorConfig.selectConfig" :leftBorder="backColorConfig.leftBorder" :rightBorder="backColorConfig.rightBorder" :color="color" :active="backColorConfig.active" :disabled="backColorConfig.disabled" hideScroll ref="backColorBtnRef" :z-index="zIndex + 1">
 					<Icon value="brush"></Icon>
 					<template #layer="{ options }">
 						<Colors :tooltip="config.tooltip" :color="color" :value="backColorConfig.value" @change="setBackColor" :data="options"></Colors>
@@ -235,8 +235,14 @@ const $editTrans = inject<(key: string) => any>('$editTrans')!
 
 const layerRef = ref<InstanceType<typeof Layer> | null>(null)
 const toolbarRef = ref<HTMLElement | null>(null)
-const foreColorRef = ref<InstanceType<typeof Button> | null>(null)
-const backColorRef = ref<InstanceType<typeof Button> | null>(null)
+const foreColorBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const backColorBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const languagesBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const headingBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const alignBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const fontSizeBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const fontFamilyBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const lineHeightBtnRef = ref<InstanceType<typeof Button> | null>(null)
 
 //链接参数配置
 const linkConfig = ref<ObjectType>({
@@ -622,6 +628,43 @@ const canMergeCells = computed<(type: 'left' | 'right' | 'up' | 'down') => boole
 		return false
 	}
 })
+//点击不关闭工具条浮层的元素（算在工具条浮层元素范围内）
+const insideElements = computed<HTMLElement[]>(() => {
+	let elements: HTMLElement[] = []
+	//语言选择浮层元素
+	if (languagesBtnRef.value && languagesBtnRef.value.layerRef && languagesBtnRef.value.layerRef.elRef) {
+		elements.push(languagesBtnRef.value.layerRef.elRef)
+	}
+	//前景色选择浮层元素
+	if (foreColorBtnRef.value && foreColorBtnRef.value.layerRef && foreColorBtnRef.value.layerRef.elRef) {
+		elements.push(foreColorBtnRef.value.layerRef.elRef)
+	}
+	//背景色选择浮层元素
+	if (backColorBtnRef.value && backColorBtnRef.value.layerRef && backColorBtnRef.value.layerRef.elRef) {
+		elements.push(backColorBtnRef.value.layerRef.elRef)
+	}
+	//标题选择浮层元素
+	if (headingBtnRef.value && headingBtnRef.value.layerRef && headingBtnRef.value.layerRef.elRef) {
+		elements.push(headingBtnRef.value.layerRef.elRef)
+	}
+	//对齐方式选择浮层元素
+	if (alignBtnRef.value && alignBtnRef.value.layerRef && alignBtnRef.value.layerRef.elRef) {
+		elements.push(alignBtnRef.value.layerRef.elRef)
+	}
+	//字号选择浮层元素
+	if (fontSizeBtnRef.value && fontSizeBtnRef.value.layerRef && fontSizeBtnRef.value.layerRef.elRef) {
+		elements.push(fontSizeBtnRef.value.layerRef.elRef)
+	}
+	//字体选择浮层元素
+	if (fontFamilyBtnRef.value && fontFamilyBtnRef.value.layerRef && fontFamilyBtnRef.value.layerRef.elRef) {
+		elements.push(fontFamilyBtnRef.value.layerRef.elRef)
+	}
+	//行高选择浮层元素
+	if (lineHeightBtnRef.value && lineHeightBtnRef.value.layerRef && lineHeightBtnRef.value.layerRef.elRef) {
+		elements.push(lineHeightBtnRef.value.layerRef.elRef)
+	}
+	return elements
+})
 
 //输入框获取焦点
 const handleInputFocus = (e: Event) => {
@@ -646,7 +689,7 @@ const setBackColor = (value: string) => {
 	setTextStyle(editor.value, dataRangeCaches.value, {
 		'background-color': value
 	})
-	backColorRef.value!.show = false
+	backColorBtnRef.value!.show = false
 	editor.value.formatElementStack()
 	editor.value.domRender()
 	editor.value.rangeRender()
@@ -656,7 +699,7 @@ const setForeColor = (value: string) => {
 	setTextStyle(editor.value, dataRangeCaches.value, {
 		color: value
 	})
-	foreColorRef.value!.show = false
+	foreColorBtnRef.value!.show = false
 	editor.value.formatElementStack()
 	editor.value.domRender()
 	editor.value.rangeRender()
@@ -1626,5 +1669,9 @@ const layerShow = () => {
 		formatClearConfig.value.disabled = extraDisabled('formatClear')
 	}
 }
+
+defineExpose({
+	layerRef
+})
 </script>
 <style scoped src="./toolbar.less"></style>

package/src/editify/editify.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" :style="{ zIndex: zIndex, paddingTop: (offset || '') + 'px' }" ref="elRef">
+	<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" :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>
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
@@ -27,7 +27,6 @@ import { parseList, orderdListHandle, commonElementHandle, tableThTdHandle, tabl
 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 Layer from '@/components/layer/layer.vue'
 import { trans } from '@/locale'
 import { LanguagesItemType } from '@/hljs'
 import { EditifyProps, EditifyResizeParamsType, EditifyToolbarOptionsType } from './props'
@@ -194,7 +193,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'link'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -204,7 +203,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'image'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${image.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -214,7 +213,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'video'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${video.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -224,7 +223,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'table'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${table.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -234,7 +233,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'codeBlock'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pre.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -247,7 +246,7 @@ const handleToolbar = () => {
 			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) {
-					;(toolbarRef.value!.$refs.layerRef as InstanceType<typeof Layer>).setPosition()
+					toolbarRef.value!.layerRef!.setPosition()
 				} else {
 					toolbarOptions.value.show = true
 				}

package/src/index.ts

@@ -13,7 +13,7 @@ const Editify = withInstall(editify)
 export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from '@/components/button/props'
 export type { InsertImageUploadErrorType } from '@/components/insertImage/props'
 export type { InsertVideoUploadErrorType } from '@/components/insertVideo/props'
-export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginType, PluginResultType } from '@/core/tool'
+export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginMenuConfigType, PluginType, PluginResultType } from '@/core/tool'
 export type { ElementMatchConfigType } from '@/core/function'
 
 //导出编辑器操作方法
@@ -24,7 +24,7 @@ const install = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.11'
+const version = '0.2.13'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'

package/src/plugins/attachment/index.ts

@@ -2,7 +2,6 @@ import { ComponentInternalInstance, h } from 'vue'
 import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import { event as DapEvent, common as DapCommon } from 'dap-util'
 import { ObjectType, PluginType } from '@/core/tool'
-import Layer from '@/components/layer/layer.vue'
 import Button from '@/components/button/button.vue'
 import Icon from '@/components/icon/icon.vue'
 import InsertAttachment from './insertAttachment/insertAttachment.vue'
@@ -114,7 +113,7 @@ export const attachment = (options?: AttachmentOptionsType) => {
 							customUpload: options!.customUpload,
 							handleError: options!.handleError,
 							onChange: () => {
-								;(<InstanceType<typeof Layer>>btnInstance.$refs.layerRef).setPosition()
+								btnInstance.layerRef!.setPosition()
 							},
 							onInsert: (name: string, urls: string[]) => {
 								//过滤掉空的地址