vue-editify 0.1.39 → 0.1.41

package/src/core/rule.ts

@@ -1,6 +1,5 @@
 import { AlexEditor, AlexElement } from 'alex-editor'
 import { LanguagesItemType, getHljsHtml } from '../hljs'
-import { getColNumbers } from './tool'
 import { isList, isTask } from './function'
 import { common as DapCommon } from 'dap-util'
 
@@ -192,25 +191,55 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 			element.styles = styles
 		}
 		const elements = AlexElement.flatElements(element.children!)
+		//所有的行元素
 		const rows = elements.filter(el => {
 			return el.parsedom == 'tr'
 		})
+		//colgroup元素
 		let colgroup = elements.find(el => {
 			return el.parsedom == 'colgroup'
 		})
+		//理论上的col的数量：取最多列数
+		const colNumber = Math.max(
+			...rows.map(row => {
+				return row.children!.length
+			})
+		)
+		//如果colgroup元素存在
 		if (colgroup) {
+			//遍历每个col元素设置默认的width:'auto
 			colgroup.children!.forEach(col => {
+				//如果没有任何标记
 				if (!col.hasMarks()) {
 					col.marks = {
 						width: 'auto'
 					}
-				} else if (!col.marks!['width']) {
+				}
+				//如果没有width标记
+				else if (!col.marks!['width']) {
 					col.marks!['width'] = 'auto'
 				}
 			})
-		} else {
+			//对缺少的col元素进行补全
+			const length = colgroup.children!.length
+			if (length < colNumber) {
+				for (let i = 0; i < colNumber - length; i++) {
+					const col = new AlexElement(
+						'closed',
+						'col',
+						{
+							width: 'auto'
+						},
+						null,
+						null
+					)
+					editor.addElementTo(col, colgroup, colgroup.children!.length)
+				}
+			}
+		}
+		//如果colgroup元素不存在则新建
+		else {
 			colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
-			const colNumber = getColNumbers(rows[0])
 			for (let i = colNumber - 1; i >= 0; i--) {
 				const col = new AlexElement(
 					'closed',
@@ -227,6 +256,16 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 		element.children = []
 		const tbody = new AlexElement('inblock', 'tbody', null, null, null)
 		rows.reverse().forEach(row => {
+			//对缺少的列进行补全
+			const length = row.children!.length
+			if (length < colNumber) {
+				for (let i = 0; i < colNumber - length; i++) {
+					const column = new AlexElement('inblock', 'td', null, null, null)
+					const breakElement = new AlexElement('closed', 'br', null, null, null)
+					editor.addElementTo(breakElement, column)
+					editor.addElementTo(column, row, row.children!.length)
+				}
+			}
 			editor.addElementTo(row, tbody)
 		})
 		editor.addElementTo(tbody, element)
@@ -235,6 +274,23 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 	if (element.parsedom == 'th') {
 		element.parsedom = 'td'
 	}
+	if (element.parsedom == 'td') {
+		//移除列的rowspan和colspan属性
+		if (element.hasMarks()) {
+			if (element.marks!['rowspan']) {
+				delete element.marks!['rowspan']
+			}
+			if (element.marks!['colspan']) {
+				delete element.marks!['colspan']
+			}
+		}
+		//移除列的display样式
+		if (element.hasStyles()) {
+			if (element.styles!['display']) {
+				delete element.styles!['display']
+			}
+		}
+	}
 }
 
 /**

package/src/core/tool.ts

@@ -300,27 +300,6 @@ export const cloneData = function (data: any) {
 	return data
 }
 
-/**
- * 根据行元素获取colgroup的col数量
- * @param row
- * @returns
- */
-export const getColNumbers = function (row: AlexElement) {
-	const children = row.children || []
-	let num = 0
-	children.forEach(td => {
-		if (td.hasMarks() && td.marks!.hasOwnProperty('colspan')) {
-			const span = Number(td.marks!.colspan)
-			if (!isNaN(span)) {
-				num += span
-			}
-		} else {
-			num += 1
-		}
-	})
-	return num
-}
-
 /**
  * 获取菜单按钮列表数据配置
  * @param editTrans
@@ -766,7 +745,7 @@ export const getToolbarConfig = function (editTrans: (key: string) => any, editL
 				rightBorder: false
 			}
 		},
-		//（只对文本工具条中的按钮生效）添加额外的按钮禁用判定，回调参数为name，this指向组件实例
+		//（只对文本工具条中的按钮生效）添加额外的按钮禁用判定，回调参数为name
 		extraDisabled: null
 	}
 }
@@ -785,7 +764,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 		tooltip: true,
 		//菜单栏显示模式，支持default/inner/fixed
 		mode: 'default',
-		//添加额外的按钮禁用判定，回调参数为name，this指向组件实例
+		//添加额外的按钮禁用判定，回调参数为name
 		extraDisabled: null,
 		//菜单栏的样式自定义
 		style: null,

package/src/editify/editify.less

@@ -357,7 +357,7 @@
 			color: @font-color-link;
 			transition: all 200ms;
 			position: relative;
-			padding: 0 10px;
+			margin: 0 10px;
 			font-size: 14px;
 			vertical-align: baseline;
 
@@ -380,6 +380,28 @@
 			}
 		}
 
+		//数学公式样式
+		:deep(span[data-editify-mathformula]) {
+			display: inline-block;
+			border: 1px dashed @border-color;
+			padding: 6px 10px;
+			border-radius: 4px;
+			margin: 0 4px;
+			transition: all 200ms;
+			max-width: 100%;
+
+			.katex,
+			math {
+				width: 100%;
+				overflow: hidden;
+			}
+
+			&:hover {
+				cursor: pointer;
+				background: @background-dark;
+			}
+		}
+
 		//禁用样式
 		&.editify-disabled {
 			cursor: auto !important;
@@ -387,16 +409,26 @@
 			&.editify-placeholder::before {
 				cursor: auto;
 			}
-
 			:deep(a) {
 				cursor: pointer;
 			}
-
 			:deep(table) {
 				td:not(:last-child)::after {
 					cursor: auto;
 				}
 			}
+			:deep(span[data-editify-mathformula]) {
+				display: inline-block;
+				border: none;
+				padding: 6px 10px;
+				border-radius: none;
+				margin: 0 4px;
+
+				&:hover {
+					cursor: auto;
+					background: none;
+				}
+			}
 		}
 	}
 

package/src/editify/editify.vue

@@ -24,7 +24,7 @@ import { AlexEditor, AlexElement, AlexElementRangeType, AlexElementsRangeType }
 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 } from '../core/tool'
 import { parseList, orderdListHandle, commonElementHandle, tableHandle, preHandle, specialInblockHandle } from '../core/rule'
-import { isTask, elementToParagraph, getCurrentParsedomElement, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '../core/function'
+import { isTask, elementToParagraph, getMatchElementsByRange, 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'
@@ -180,59 +180,70 @@ const handleToolbar = () => {
 	}
 	hideToolbar()
 	nextTick(() => {
-		const table = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'table')
-		const pre = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'pre')
-		const link = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'a')
-		const image = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'img')
-		const video = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'video')
-		if (link) {
+		const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+		const pres = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'pre' })
+		const links = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'a' })
+		const images = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'img' })
+		const videos = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'video' })
+		//显示链接工具条
+		if (links.length == 1) {
 			toolbarOptions.value.type = 'link'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${links[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (image) {
+		}
+		//显示图片工具条
+		else if (images.length == 1) {
 			toolbarOptions.value.type = 'image'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${image.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${images[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (video) {
+		}
+		//显示视频工具条
+		else if (videos.length == 1) {
 			toolbarOptions.value.type = 'video'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${video.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${videos[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (table) {
+		}
+		//显示表格工具条
+		else if (tables.length == 1) {
 			toolbarOptions.value.type = 'table'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${table.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${tables[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (pre) {
+		}
+		//显示代码块工具条
+		else if (pres.length == 1) {
 			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="${pres[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else {
+		}
+		//显示文本工具条
+		else {
 			const result = dataRangeCaches.value.flatList.filter((item: AlexElementRangeType) => {
 				return 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) {
-					;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+					;(toolbarRef.value!.$refs.layerRef as InstanceType<typeof Layer>).setPosition()
 				} else {
 					toolbarOptions.value.show = true
 				}
@@ -366,11 +377,11 @@ const documentMouseMove = (e: Event) => {
 	if (!tableColumnResizeParams.value.element) {
 		return
 	}
-	const table = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'table')
-	if (!table) {
+	const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+	if (tables.length != 1) {
 		return
 	}
-	const colgroup = table.children!.find(item => {
+	const colgroup = tables[0].children!.find(item => {
 		return item.parsedom == 'colgroup'
 	})!
 	const index = tableColumnResizeParams.value.element.parent!.children!.findIndex(el => {
@@ -389,11 +400,11 @@ const documentMouseUp = () => {
 	if (!tableColumnResizeParams.value.element) {
 		return
 	}
-	const table = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'table')
-	if (!table) {
+	const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+	if (tables.length != 1) {
 		return
 	}
-	const colgroup = table.children!.find(item => {
+	const colgroup = tables[0].children!.find(item => {
 		return item.parsedom == 'colgroup'
 	})!
 	const index = tableColumnResizeParams.value.element.parent!.children!.findIndex(el => {
@@ -466,10 +477,6 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 				if (el.marks!['disabled']) {
 					marks['disabled'] = el.marks!['disabled']
 				}
-				//td的colspan属性保留
-				if (el.parsedom == 'td' && el.marks!['colspan']) {
-					marks['colspan'] = el.marks!['colspan']
-				}
 				//图片和视频的src属性保留
 				if (['img', 'video'].includes(el.parsedom!) && el.marks!['src']) {
 					marks['src'] = el.marks!['src']
@@ -543,12 +550,10 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 			})
 			//对外的自定义属性和样式保留
 			if (typeof props.pasteKeepMarks == 'function') {
-				const keepMarks = props.pasteKeepMarks(el)
-				marks = mergeObject(marks, keepMarks)!
+				marks = mergeObject(marks, props.pasteKeepMarks(el))!
 			}
 			if (typeof props.pasteKeepStyles == 'function') {
-				const keepStyles = props.pasteKeepStyles(el)
-				styles = mergeObject(styles, keepStyles)!
+				styles = mergeObject(styles, props.pasteKeepStyles(el))!
 			}
 			//将处理后的样式和标记给元素
 			el.marks = marks

package/src/index.ts

@@ -9,16 +9,17 @@ export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, But
 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 { ElementMatchConfig } from './core/function'
 
 //导出编辑器操作方法
-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'
+export { elementIsMatch, getMatchElementByElement, getMatchElementsByRange, 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'
 
 //安装函数
 const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.39'
+const version = '0.1.41'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'
@@ -29,7 +30,7 @@ export type { InsertAttachmentUploadErrorType } from './plugins/attachment/inser
 export { attachment, isAttachment, hasAttachmentInRange } from './plugins/attachment'
 //导出mathformula插件相关的方法和类型
 export type { MathformulaOptionsType } from './plugins/mathformula'
-export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement } from './plugins/mathformula'
+export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement, hasMathformulaInRange, getMathformulaElementByRange } from './plugins/mathformula'
 
 //导出组件和安装函数
 export { install as default, install, Editify, version }

package/src/locale/en_US.ts

@@ -99,5 +99,6 @@ export const en_US: ObjectType = {
 
 	//数学公式插件语言配置
 	insertMathformula: 'Insert mathematical formula',
+	editMathformula: 'Edit mathematical formula',
 	mathformulaPlaceholder: 'Please enter LaTex syntax'
 }

package/src/locale/zh_CN.ts

@@ -99,5 +99,6 @@ export const zh_CN: ObjectType = {
 
 	//数学公式插件语言配置
 	insertMathformula: '插入数学公式',
+	editMathformula: '编辑数学公式',
 	mathformulaPlaceholder: '请输入LaTex语法'
 }

package/src/plugins/mathformula/index.ts

@@ -1,7 +1,6 @@
-import { common as DapCommon, element as DapElement } from 'dap-util'
+import { common as DapCommon } from 'dap-util'
 import { ObjectType, PluginType, cloneData } from '../../core/tool'
 import { ComponentInternalInstance, h } from 'vue'
-
 import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import 'katex/dist/katex.css'
 import KaTex from 'katex'
@@ -21,6 +20,8 @@ export type MathformulaOptionsType = {
 	rightBorder?: boolean
 	//按钮是否禁用
 	disabled?: boolean
+	//公式异常处理
+	handleError?: (error: Error) => void
 }
 
 /**
@@ -32,7 +33,11 @@ export const isMathformula = (el: AlexElement) => {
 	return el.parsedom == 'span' && el.hasMarks() && el.marks!['data-editify-mathformula']
 }
 
-//是否在公式元素下
+/**
+ * 判断某个元素是否在公式元素内
+ * @param el
+ * @returns
+ */
 export const isUnderMathformula = (el: AlexElement): boolean => {
 	if (isMathformula(el)) {
 		return true
@@ -43,7 +48,11 @@ export const isUnderMathformula = (el: AlexElement): boolean => {
 	return false
 }
 
-//获取公式元素
+/**
+ * 根据某个元素获取所在的公式元素，如果不在公式元素内则返回null
+ * @param el
+ * @returns
+ */
 export const getMathformulaElement = (el: AlexElement): AlexElement | null => {
 	if (isMathformula(el)) {
 		return el
@@ -72,6 +81,48 @@ export const hasMathformulaInRange = (editor: AlexEditor, dataRangeCaches: AlexE
 	})
 }
 
+/**
+ * 选区是否在某个公式元素下，如果是返回该公式元素否则返回null
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const getMathformulaElementByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return null
+	}
+	if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
+		return getMathformulaElement(editor.range.anchor.element)
+	}
+	const arr = dataRangeCaches.list.map(item => {
+		return getMathformulaElement(item.element)
+	})
+	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
+}
+
 /**
  * 数学公式插件
  * @param options
@@ -82,18 +133,23 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 		options = {}
 	}
 	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
-		let isDisabled = false
-		//如果光标范围内有数学公式、链接、代码块则禁用
+		//是否禁用该插件按钮
+		let isDisabled: boolean = false
+		//如果光标范围内有链接、代码块则禁用
 		if (editifyInstance.exposed!.editor.value) {
-			isDisabled = hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+			isDisabled = hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 		}
+		//数学公式文本框内置LaTex文本内容
+		let defaultLaTexContent: string = ''
+
 		return {
+			//插件名称
 			name: 'mathformula',
 			//菜单项配置
 			menu: {
 				sequence: options!.sequence || 101,
 				extraDisabled: (name: string) => {
-					//如果光标选区内有数学公式则禁用链接菜单、代码块菜单
+					//如果光标选区内有数学公式则禁用链接、图片、视频、表格和代码块菜单
 					if (name == 'link' || name == 'image' || name == 'video' || name == 'table' || name == 'codeBlock') {
 						return hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 					}
@@ -105,36 +161,67 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 					leftBorder: options!.leftBorder,
 					rightBorder: options!.rightBorder,
 					hideScroll: true,
-					active: false,
+					active: editifyInstance.exposed!.editor.value ? hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
 					disabled: isDisabled || options!.disabled,
+					//浮层展开时触发的事件
+					onLayerShow() {
+						//获取选区所在的数学公式元素
+						const mathformulaElement = getMathformulaElementByRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+						//如果该元素存在，则设置默认的LaTex文本内容
+						if (mathformulaElement) {
+							defaultLaTexContent = mathformulaElement.marks!['data-editify-mathformula'] || ''
+						}
+					},
 					default: () => h(Icon, { value: 'mathformula' }),
 					layer: (_name: string, btnInstance: InstanceType<typeof Button>) => {
 						return h(InsertMathformula, {
 							color: <string | null>editifyInstance.props.color,
+							defaultLaTexContent: defaultLaTexContent,
 							onInsert: (content: string) => {
+								//如果公式文本框有内容则进行下一步处理
 								if (content) {
 									//获取编辑器对象
 									const editor = <AlexEditor>editifyInstance.exposed!.editor.value
-									//渲染LaTex为mathml并转为dom
-									const dom = DapElement.string2dom(
-										KaTex.renderToString(content, {
+									//获取选区所在的数学公式元素
+									const mathformulaElement = getMathformulaElementByRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+									//如果在数学公式下
+									if (mathformulaElement) {
+										//清除该数学公式
+										mathformulaElement.toEmpty()
+										//移动光标到后一个元素上
+										editor.range!.anchor.moveToStart(editor.getNextElement(mathformulaElement)!)
+										editor.range!.focus.moveToStart(editor.getNextElement(mathformulaElement)!)
+									}
+									//定义转换后的mathml内容
+									let mathml: string = ''
+									try {
+										//获取转换后的mathml
+										mathml = KaTex.renderToString(content, {
 											output: 'mathml',
-											throwOnError: false
+											throwOnError: true
 										})
-									) as HTMLElement
-									//设置最终的html内容
-									const html = `<span data-editify-mathformula="true" class="katex" >${dom.innerHTML}</span>`
-									//html内容转为元素数组
-									const elements = editor.parseHtml(html)
-									//插入编辑器
-									editor.insertElement(elements[0])
-									//移动光标到新插入的元素
-									editor.range!.anchor.moveToEnd(elements[0])
-									editor.range!.focus.moveToEnd(elements[0])
-									//渲染
-									editor.formatElementStack()
-									editor.domRender()
-									editor.rangeRender()
+									} catch (error) {
+										mathml = ''
+										if (typeof options!.handleError == 'function') {
+											options!.handleError(error as Error)
+										}
+									}
+									//如果mathml存在则表示数学公式渲染成功则插入到编辑器
+									if (mathml) {
+										//设置最终的html内容
+										const html = `<span data-editify-mathformula="${content}" contenteditable="false">${mathml}</span>`
+										//html内容转为元素数组
+										const elements = editor.parseHtml(html)
+										//插入编辑器
+										editor.insertElement(elements[0])
+										//移动光标到新插入的元素
+										editor.range!.anchor.moveToEnd(elements[0])
+										editor.range!.focus.moveToEnd(elements[0])
+										//渲染
+										editor.formatElementStack()
+										editor.domRender()
+										editor.rangeRender()
+									}
 								}
 								//关闭浮层
 								btnInstance.show = false

package/src/plugins/mathformula/insertMathformula/insertMathformula.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="editify-mathformula">
-		<div class="editify-mathformula-label">{{ $editTrans('insertMathformula') }}</div>
+		<div class="editify-mathformula-label">{{ props.defaultLaTexContent ? $editTrans('editMathformula') : $editTrans('insertMathformula') }}</div>
 		<textarea class="editify-mathformula-textarea" v-model.trim="latexContent" :placeholder="$editTrans('mathformulaPlaceholder')" @focus="handleInputFocus" @blur="handleInputBlur"></textarea>
 		<div class="editify-mathformula-footer">
 			<span :style="{ color: color || '' }" @click="insertMathformula">{{ $editTrans('confirm') }}</span>
@@ -8,7 +8,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { inject, ref, watch } from 'vue'
 import { InsertMathformulaProps } from './props'
 
 defineOptions({
@@ -36,5 +36,15 @@ const handleInputBlur = (e: Event) => {
 const insertMathformula = () => {
 	emits('insert', latexContent.value)
 }
+
+watch(
+	() => props.defaultLaTexContent,
+	newVal => {
+		latexContent.value = newVal
+	},
+	{
+		immediate: true
+	}
+)
 </script>
 <style scoped src="./insertMathformula.less"></style>

package/src/plugins/mathformula/insertMathformula/props.ts

@@ -5,6 +5,11 @@ export const InsertMathformulaProps = {
 	color: {
 		type: String as PropType<string | null>,
 		default: ''
+	},
+	//预置的LaTex文本内容
+	defaultLaTexContent: {
+		type: String,
+		default: ''
 	}
 }