vue-editify 0.1.22 → 0.1.23

package/src/components/insertLink/props.ts

@@ -1,9 +1,9 @@
-import { ExtractPublicPropTypes } from 'vue'
+import { ExtractPublicPropTypes, PropType } from 'vue'
 
 export const InsertLinkProps = {
 	//主题色
 	color: {
-		type: String,
+		type: String as PropType<string | null>,
 		default: ''
 	},
 	//预置的链接文本值

package/src/components/insertTable/props.ts

@@ -1,4 +1,4 @@
-import { ExtractPublicPropTypes } from 'vue'
+import { ExtractPublicPropTypes, PropType } from 'vue'
 
 export type InsertTableGridType = {
 	x: number
@@ -9,7 +9,7 @@ export type InsertTableGridType = {
 export const InsertTableProps = {
 	//主题色
 	color: {
-		type: String,
+		type: String as PropType<string | null>,
 		default: ''
 	},
 	//最大行数

package/src/components/insertVideo/insertVideo.vue

@@ -8,7 +8,7 @@
 		<!-- 网络视频 -->
 		<div class="editify-video-remote" v-if="current == 'remote'">
 			<input v-model.trim="remoteUrl" :placeholder="$editTrans('videoUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
-			<div class="editify-video-remote-footer" :style="{ color: color }">
+			<div class="editify-video-remote-footer" :style="{ color: color || '' }">
 				<span @click="insertRemoteVideo">{{ $editTrans('insert') }}</span>
 			</div>
 		</div>
@@ -23,7 +23,7 @@
 import { file as DapFile } from 'dap-util'
 import Icon from '../icon/icon.vue'
 import { InsertVideoProps } from './props'
-import { ComponentInternalInstance, computed, inject, ref, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 import { ObjectType } from '../../core/tool'
 
 defineOptions({
@@ -33,7 +33,6 @@ const props = defineProps(InsertVideoProps)
 const emits = defineEmits(['change', 'insert'])
 
 const $editTrans = inject<(key: string) => any>('$editTrans')!
-const editify = inject<ComponentInternalInstance>('editify')!
 
 //当前展示的面板，取值remote和upload
 const current = ref<'remote' | 'upload'>('upload')
@@ -84,14 +83,17 @@ const selectFile = async (e: Event) => {
 	for (let i = 0; i < files.length; i++) {
 		const file = files[i]
 		const suffix = getSuffix(file)
-		const isMatch = props.accept.some(item => {
-			return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
-		})
+		const isMatch =
+			props.allowedFileType && Array.isArray(props.allowedFileType) && props.allowedFileType.length
+				? props.allowedFileType.some(item => {
+						return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
+				  })
+				: true
 		//后缀不符合
 		if (!isMatch) {
 			//如果自定义了异常处理
 			if (typeof props.handleError == 'function') {
-				props.handleError.apply(editify.proxy!, ['suffixError', file])
+				props.handleError('suffixError', file)
 			}
 			continue
 		}
@@ -99,7 +101,7 @@ const selectFile = async (e: Event) => {
 		if (props.maxSize && file.size / 1024 > props.maxSize) {
 			//如果自定义了异常处理
 			if (typeof props.handleError == 'function') {
-				props.handleError.apply(editify.proxy!, ['maxSizeError', file])
+				props.handleError('maxSizeError', file)
 			}
 			continue
 		}
@@ -107,7 +109,7 @@ const selectFile = async (e: Event) => {
 		if (props.minSize && file.size / 1024 < props.minSize) {
 			//如果自定义了异常处理
 			if (typeof props.handleError == 'function') {
-				props.handleError.apply(editify.proxy!, ['minSizeError', file])
+				props.handleError('minSizeError', file)
 			}
 			continue
 		}
@@ -118,7 +120,7 @@ const selectFile = async (e: Event) => {
 		let videos = []
 		//自定义上传方法
 		if (typeof props.customUpload == 'function') {
-			videos = (await props.customUpload.apply(editify.proxy!, [filterFiles])) || []
+			videos = (await props.customUpload(filterFiles)) || []
 		}
 		//默认上传方法
 		else {

package/src/components/insertVideo/props.ts

@@ -5,11 +5,11 @@ export type InsertVideoUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSi
 export const InsertVideoProps = {
 	//主题色
 	color: {
-		type: String,
+		type: String as PropType<string | null>,
 		default: ''
 	},
 	//支持的视频类型数组
-	accept: {
+	allowedFileType: {
 		type: Array as PropType<string[]>,
 		default: null
 	},

package/src/components/menu/menu.vue

@@ -17,7 +17,7 @@ import { common as DapCommon } from 'dap-util'
 import { getRangeText, setHeading, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, hasPreInRange, hasTableInRange, hasQuoteInRange, hasLinkInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getCurrentParsedomElement } from '../../core/function'
 import { MenuProps } from './props'
 import { MenuModeType, ObjectType } from '../../core/tool'
-import AlexEditor, { AlexElementsRangeType } from 'alex-editor'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { ButtonOptionsItemType } from '../button/props'
 
 defineOptions({
@@ -273,7 +273,7 @@ const imageConfig = ref<ObjectType>({
 	rightBorder: props.config.image!.rightBorder,
 	active: false,
 	disabled: false,
-	accept: props.config.image!.accept,
+	allowedFileType: props.config.image!.allowedFileType,
 	multiple: props.config.image!.multiple,
 	maxSize: props.config.image!.maxSize,
 	minSize: props.config.image!.minSize,
@@ -287,7 +287,7 @@ const videoConfig = ref<ObjectType>({
 	rightBorder: props.config.video!.rightBorder,
 	active: false,
 	disabled: false,
-	accept: props.config.video!.accept,
+	allowedFileType: props.config.video!.allowedFileType,
 	multiple: props.config.video!.multiple,
 	maxSize: props.config.video!.maxSize,
 	minSize: props.config.video!.minSize,
@@ -668,7 +668,7 @@ const handleRangeUpdate = () => {
 	//额外禁用判定
 	const extraDisabled = (name: string) => {
 		if (typeof props.config.extraDisabled == 'function') {
-			return props.config.extraDisabled.apply(editify.proxy!, [name]) || false
+			return props.config.extraDisabled(name) || false
 		}
 		return false
 	}
@@ -1342,7 +1342,7 @@ const MenuItem = defineComponent(
 						layer: () =>
 							h(InsertImage, {
 								color: props.color,
-								accept: imageConfig.value.accept,
+								allowedFileType: imageConfig.value.allowedFileType,
 								multiple: imageConfig.value.multiple,
 								maxSize: imageConfig.value.maxSize,
 								minSize: imageConfig.value.minSize,
@@ -1386,7 +1386,7 @@ const MenuItem = defineComponent(
 						layer: () =>
 							h(InsertVideo, {
 								color: props.color,
-								accept: videoConfig.value.accept,
+								allowedFileType: videoConfig.value.allowedFileType,
 								multiple: videoConfig.value.multiple,
 								maxSize: videoConfig.value.maxSize,
 								minSize: videoConfig.value.minSize,
@@ -1524,29 +1524,44 @@ const MenuItem = defineComponent(
 							color: props.color,
 							onLayerShow: () => {
 								if (typeof configuration.onLayerShow == 'function') {
-									configuration.onLayerShow.apply(editify.proxy!, [itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef])
+									configuration.onLayerShow(itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
 								}
 							},
 							onLayerShown: () => {
 								if (typeof configuration.onLayerShown == 'function') {
-									configuration.onLayerShown.apply(editify.proxy!, [itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef])
+									configuration.onLayerShown(itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
 								}
 							},
 							onLayerHidden: () => {
 								if (typeof configuration.onLayerHidden == 'function') {
-									configuration.onLayerHidden.apply(editify.proxy!, [itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef])
+									configuration.onLayerHidden(itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
 								}
 							},
 							onOperate: (name, val) => {
 								if (typeof configuration.onOperate == 'function') {
-									configuration.onOperate.apply(editify.proxy!, [name, val, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef])
+									configuration.onOperate(name, val, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
 								}
 							}
 						},
 						{
-							default: configuration.default || null,
-							layer: configuration.layer || null,
-							option: configuration.option || null
+							default: () => {
+								if (configuration.default) {
+									return configuration.default(itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
+								}
+								return null
+							},
+							layer: () => {
+								if (configuration.layer) {
+									return configuration.layer(itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
+								}
+								return null
+							},
+							option: () => {
+								if (configuration.option) {
+									return configuration.option(itemProps.name, <InstanceType<typeof Button>>itemInstance.proxy!.$refs.btnRef)
+								}
+								return null
+							}
 						}
 					)
 				}

package/src/components/menu/props.ts

@@ -9,7 +9,7 @@ export const MenuProps = {
 	},
 	//主题色
 	color: {
-		type: String,
+		type: String as PropType<string | null>,
 		default: ''
 	}
 }

package/src/components/toolbar/props.ts

@@ -27,7 +27,7 @@ export const ToolbarProps = {
 	},
 	//主题色
 	color: {
-		type: String,
+		type: String as PropType<string | null>,
 		default: ''
 	}
 }

package/src/components/toolbar/toolbar.vue

@@ -10,7 +10,7 @@
 						<Checkbox @change="modifyLink" v-model="linkConfig.newOpen" :label="$editTrans('newWindowOpen')" :color="color" :size="10"></Checkbox>
 						<div class="editify-toolbar-link-operations">
 							<span @click="removeLink">{{ $editTrans('removeLink') }}</span>
-							<a :href="linkConfig.url" target="_blank" :style="{ color: color }">{{ $editTrans('viewLink') }}</a>
+							<a :href="linkConfig.url" target="_blank" :style="{ color: color || '' }">{{ $editTrans('viewLink') }}</a>
 						</div>
 					</div>
 				</div>
@@ -203,7 +203,7 @@ import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { getCurrentParsedomElement, removeTextStyle, removeTextMark, setTextStyle, setLineHeight, setTextMark, setList, setTask, setHeading, setAlign, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark } from '../../core/function'
 import { ToolbarProps } from './props'
-import { ComponentInternalInstance, Ref, computed, inject, ref } from 'vue'
+import { Ref, computed, inject, ref } from 'vue'
 import { ObjectType } from '../../core/tool'
 import { ButtonOptionsItemType } from '../button/props'
 
@@ -213,7 +213,6 @@ defineOptions({
 const props = defineProps(ToolbarProps)
 const emits = defineEmits(['update:modelValue'])
 
-const editify = inject<ComponentInternalInstance>('editify')!
 const editor = inject<Ref<AlexEditor>>('editor')!
 const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 const $editTrans = inject<(key: string) => any>('$editTrans')!
@@ -953,7 +952,7 @@ const layerShow = () => {
 		//额外禁用判定
 		const extraDisabled = (name: string) => {
 			if (typeof props.config.extraDisabled == 'function') {
-				return props.config.extraDisabled.apply(editify.proxy!, [name]) || false
+				return props.config.extraDisabled(name) || false
 			}
 			return false
 		}

package/src/core/function.ts

@@ -77,7 +77,7 @@ export const elementIsInTask = (element: AlexElement): boolean => {
 }
 
 //判断元素是否有序或者无序列表
-export const isList = function (element: AlexElement, ordered: boolean | undefined = false) {
+export const isList = (element: AlexElement, ordered: boolean | undefined = false) => {
 	if (element.isEmpty()) {
 		return false
 	}
@@ -85,7 +85,7 @@ export const isList = function (element: AlexElement, ordered: boolean | undefin
 }
 
 //判断元素是否任务列表
-export const isTask = function (element: AlexElement) {
+export const isTask = (element: AlexElement) => {
 	if (element.isEmpty()) {
 		return false
 	}
@@ -394,14 +394,14 @@ export const getFlatElementsByRange = (editor: AlexEditor, dataRangeCaches: Alex
 }
 
 //将某个元素转为段落标签
-export const elementToParagraph = function (element: AlexElement) {
+export const elementToParagraph = (element: AlexElement) => {
 	element.marks = null
 	element.styles = null
 	element.parsedom = AlexElement.BLOCK_NODE
 }
 
 //其他元素转为有序或者无序列表
-export const elementToList = function (element: AlexElement, ordered: boolean | undefined = false) {
+export const elementToList = (element: AlexElement, ordered: boolean | undefined = false) => {
 	//如果是列表则返回
 	if (isList(element, ordered)) {
 		return
@@ -417,7 +417,7 @@ export const elementToList = function (element: AlexElement, ordered: boolean |
 }
 
 //其他元素转为任务列表
-export const elementToTask = function (element: AlexElement) {
+export const elementToTask = (element: AlexElement) => {
 	//如果是任务列表则返回
 	if (isTask(element)) {
 		return

package/src/core/rule.ts

@@ -1,4 +1,4 @@
-import AlexEditor, { AlexElement } from 'alex-editor'
+import { AlexEditor, AlexElement } from 'alex-editor'
 import { LanguagesItemType, getHljsHtml } from '../hljs'
 import { getColNumbers } from './tool'
 import { isList, isTask } from './function'

package/src/core/tool.ts

@@ -4,7 +4,7 @@ import { AlexElement } from 'alex-editor'
 import { ButtonOptionsItemType, ButtonTypeType } from '../components/button/props'
 import { LocaleType } from '../locale'
 import { InsertImageUploadErrorType } from '../components/insertImage/props'
-import { VNode } from 'vue'
+import { ComponentInternalInstance, VNode } from 'vue'
 import Button from '../components/button/button.vue'
 
 export type ObjectType = {
@@ -39,7 +39,7 @@ export interface MenuDisplayButtonType extends MenuSelectButtonType {
 }
 
 export interface MenuImageButtonType extends MenuButtonType {
-	accept?: string[]
+	allowedFileType?: string[]
 	multiple?: boolean
 	maxSize?: number | null
 	minSize?: number | null
@@ -48,7 +48,7 @@ export interface MenuImageButtonType extends MenuButtonType {
 }
 
 export interface MenuVideoButtonType extends MenuButtonType {
-	accept?: string[]
+	allowedFileType?: string[]
 	multiple?: boolean
 	maxSize?: number | null
 	minSize?: number | null
@@ -77,9 +77,9 @@ export type MenuCustomButtonType = {
 	onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void
 	onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void
 	onOperate?: (name: string, value: string | number | undefined, btnInstance: InstanceType<typeof Button>) => void
-	default?: () => VNode
-	layer?: () => VNode
-	option?: () => VNode
+	default?: (name: string, btnInstance: InstanceType<typeof Button>) => VNode
+	layer?: (name: string, btnInstance: InstanceType<typeof Button>) => VNode
+	option?: (name: string, btnInstance: InstanceType<typeof Button>) => VNode
 }
 
 export type CodeBlockToolbarType = {
@@ -151,6 +151,10 @@ export type MenuSequenceType = {
 
 export type MenuModeType = 'default' | 'inner' | 'fixed'
 
+export type MenuExtendType = {
+	[name: string]: MenuCustomButtonType
+}
+
 export type MenuConfigType = {
 	use?: boolean
 	tooltip?: boolean
@@ -191,11 +195,20 @@ export type MenuConfigType = {
 	//全屏
 	fullScreen?: MenuButtonType
 	//拓展菜单，每个key表示拓展菜单的唯一名称，value是对象，包含type/title/rightBorder/leftBorder/disabled/active/width/maxHeight/options/value/hideScroll/onLayerShow/onLayerShown/onLayerHidden/onOperate/default/layer/option属性
-	extends?: {
-		[name: string]: MenuCustomButtonType
-	}
+	extends?: MenuExtendType
 }
 
+export type PluginResultType = {
+	menu?: MenuConfigType
+	updateView?: () => void
+	customParseNode?: (element: AlexElement) => AlexElement
+	renderRule?: (el: AlexElement) => void
+	pasteKeepStyles?: ObjectType
+	pasteKeepMarks?: ObjectType
+}
+
+export type PluginType = (editifyInstance: ComponentInternalInstance, color: string | null, editTrans: (key: string) => any) => PluginResultType
+
 //粘贴html时保留的数据
 export const pasteKeepData: ObjectType = {
 	//粘贴html时元素保留的样式（全部元素）
@@ -1058,7 +1071,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false,
 			//图片支持上传的类型，不区分大小写
-			accept: ['jpg', 'png', 'jpeg', 'webp', 'jfif', 'ico', 'gif', 'svg', 'psd'],
+			allowedFileType: ['jpg', 'png', 'jpeg', 'webp', 'jfif', 'ico', 'gif', 'svg', 'psd'],
 			//是否多选图片
 			multiple: false,
 			//单张图片的最大值，单位kb
@@ -1079,7 +1092,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false,
 			//视频支持上传的类型，不区分大小写
-			accept: ['mp4', 'avi', 'mpg', 'wmv', 'mov', 'rm', 'swf', 'flv'],
+			allowedFileType: ['mp4', 'avi', 'mpg', 'wmv', 'mov', 'rm', 'swf', 'flv'],
 			//是否多选视频
 			multiple: false,
 			//单个视频的的最大值，单位kb

package/src/editify/editify.less

@@ -342,6 +342,33 @@
 			}
 		}
 
+		//附件样式
+		:deep(span[data-attachment]) {
+			display: inline-block;
+			width: 40px;
+			height: 40px;
+			background-color: @font-color-link;
+			transition: all 200ms;
+			position: relative;
+			border-radius: 4px;
+
+			&:hover {
+				background-color: @font-color-link-dark;
+				cursor: pointer;
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 8px;
+				top: 8px;
+				width: 24px;
+				height: 24px;
+				background: url(../plugins/attachment/images/attachment.png) no-repeat center;
+				background-size: cover;
+			}
+		}
+
 		//禁用样式
 		&.editify-disabled {
 			cursor: auto !important;

package/src/editify/editify.vue

@@ -22,7 +22,7 @@
 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 { pasteKeepData, mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType } from '../core/tool'
+import { pasteKeepData, mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, PluginResultType } from '../core/tool'
 import { parseList, orderdListHandle, mediaHandle, tableHandle, preHandle, specialInblockHandle } from '../core/rule'
 import { isTask, elementToParagraph, getCurrentParsedomElement, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '../core/function'
 import Toolbar from '../components/toolbar/toolbar.vue'
@@ -124,9 +124,26 @@ 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, props.color, $editTrans)
+		pluginResultList.push(pluginResult)
+	})
+	return pluginResultList
+})
 //最终生效的菜单栏配置
 const menuConfig = computed<MenuConfigType>(() => {
-	return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), props.menu || {})
+	let menu: MenuConfigType = {}
+	//注册插件：自定义菜单栏
+	pluginResultList.value.forEach(pluginResult => {
+		menu = <MenuConfigType>mergeObject(menu, pluginResult.menu || {})
+	})
+	//加入自定义menu配置
+	menu = <MenuConfigType>mergeObject(menu, props.menu || {})
+	//返回最终配置
+	return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), menu)
 })
 
 //编辑器内部修改值的方法
@@ -235,6 +252,13 @@ const handleToolbar = () => {
 }
 //初始创建编辑器
 const createEditor = () => {
+	//注册插件：自定义规则校验函数
+	let pluginRules: ((el: AlexElement) => void)[] = []
+	pluginResultList.value.forEach(pluginResult => {
+		if (pluginResult.renderRule) {
+			pluginRules.push(pluginResult.renderRule)
+		}
+	})
 	//创建编辑器
 	editor.value = new AlexEditor(contentRef.value!, {
 		value: value.value,
@@ -258,6 +282,7 @@ const createEditor = () => {
 			el => {
 				specialInblockHandle(editor.value!, el)
 			},
+			...pluginRules,
 			...props.renderRules
 		],
 		allowCopy: props.allowCopy,
@@ -418,8 +443,15 @@ const documentClick = (e: Event) => {
 }
 //重新定义编辑器粘贴html
 const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
-	const keepStyles = Object.assign(pasteKeepData.styles, props.pasteKeepStyles || {})
-	const keepMarks = Object.assign(pasteKeepData.marks, props.pasteKeepMarks || {})
+	let keepStyles = pasteKeepData.styles
+	let keepMarks = pasteKeepData.marks
+	//注册插件：自定义html粘贴保留
+	pluginResultList.value.forEach(pluginResult => {
+		keepStyles = Object.assign(keepStyles, pluginResult.pasteKeepStyles || {})
+		keepMarks = Object.assign(keepMarks, pluginResult.pasteKeepMarks || {})
+	})
+	keepStyles = Object.assign(keepStyles, props.pasteKeepStyles || {})
+	keepMarks = Object.assign(keepMarks, props.pasteKeepMarks || {})
 	//粘贴html时过滤元素的样式和属性
 	AlexElement.flatElements(elements).forEach(el => {
 		let marks: ObjectType = {}
@@ -443,7 +475,7 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 	})
 	//如果使用了自定义粘贴html的功能
 	if (typeof props.customHtmlPaste == 'function') {
-		await props.customHtmlPaste.apply(this, [elements])
+		await props.customHtmlPaste(elements)
 	}
 	//默认粘贴html
 	else {
@@ -478,8 +510,14 @@ const handleCustomParseNode = (ele: AlexElement) => {
 			ele.marks = marks
 		}
 	}
+	//注册插件：自定义元素转换处理
+	pluginResultList.value.forEach(pluginResult => {
+		if (pluginResult.customParseNode) {
+			ele = pluginResult.customParseNode(ele)
+		}
+	})
 	if (typeof props.customParseNode == 'function') {
-		ele = props.customParseNode.apply(instance.proxy, [ele])
+		ele = props.customParseNode(ele)
 	}
 	return ele
 }
@@ -655,6 +693,12 @@ const handleDeleteComplete = () => {
 const handleAfterRender = () => {
 	//设定视频高度
 	setVideoHeight()
+	//注册插件：自定义dom渲染后处理
+	pluginResultList.value.forEach(pluginResult => {
+		if (pluginResult.updateView) {
+			pluginResult.updateView()
+		}
+	})
 	emits('updateview')
 }
 //api：光标设置到文档底部

package/src/editify/props.ts

@@ -1,6 +1,6 @@
 import { common as DapCommon } from 'dap-util'
 import { ExtractPublicPropTypes, PropType } from 'vue'
-import { MenuConfigType, ObjectType, ToolbarConfigType } from '../core/tool'
+import { PluginType, MenuConfigType, ObjectType, ToolbarConfigType } from '../core/tool'
 import { AlexElement } from 'alex-editor'
 import { LocaleType } from '../locale'
 
@@ -68,7 +68,7 @@ export const EditifyProps = {
 	},
 	//主题色
 	color: {
-		type: String,
+		type: String as PropType<string | null>,
 		default: '#03a8f3',
 		validator(value: any) {
 			return DapCommon.matchingText(value, 'hex')
@@ -150,6 +150,13 @@ export const EditifyProps = {
 	tab: {
 		type: Boolean,
 		default: true
+	},
+	//插件数组
+	plugins: {
+		type: Array as PropType<PluginType[]>,
+		default: function () {
+			return []
+		}
 	}
 }
 

package/src/icon/iconfont.css

@@ -1,3 +1,7 @@
+.editify-icon-attachment:before {
+	content: '\e613';
+}
+
 .editify-icon-full-screen:before {
 	content: '\e62f';
 }

package/src/index.ts

@@ -6,23 +6,28 @@ import Editify from './editify/editify.vue'
 
 //导出类型
 export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from './components/button/props'
-export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuConfigType } from './core/tool'
 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 { AttachmentOptionsType } from './plugins/attachment'
+export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props'
 
 //导出编辑器操作方法
 export { getParsedomElementByElement, getCurrentParsedomElement, elementIsInList, elementIsInTask, isList, isTask, hasPreInRange, isRangeInPre, hasQuoteInRange, isRangeInQuote, hasListInRange, isRangeInList, hasTaskInRange, isRangeInTask, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock } from './core/function'
 
-//导出AlexElement元素
-export { AlexElement } from 'alex-editor'
-
-//导出版本号
-export const version = '0.1.22'
-
 //安装函数
 const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
+//版本号
+const version = '0.1.23'
+
+//导出AlexElement元素
+export { AlexElement } from 'alex-editor'
 
 //导出组件和安装函数
-export { install as default, install, Editify }
+export { install as default, install, Editify, version }
+
+//导出插件
+export { attachment } from './plugins/attachment'

package/src/locale/en_US.ts

@@ -84,5 +84,13 @@ export const en_US: ObjectType = {
 	alignJustify: 'Align justify',
 	defaultLineHeight: 'Default',
 	auto: 'auto',
-	fullScreen: 'Full screen'
+	fullScreen: 'Full screen',
+
+	//插件语言配置
+	insertAttachment: 'Insert attachment',
+	uploadAttachment: 'Upload',
+	remoteAttachment: 'Remote',
+	attachmentUrlPlaceholder: 'Please enter the attachment address',
+	downloadAttachment: 'Click to download attachment',
+	attachmentDownloadName: 'attachment'
 }