Feat:新增通过按键进入文本编辑时是否自动清空原有文本

This commit is contained in:
街角小林 2024-11-06 18:16:02 +08:00
parent d93511eca4
commit be3faa0aef
3 changed files with 15 additions and 4 deletions

View File

@ -130,6 +130,8 @@ export const defaultOpt = {
// 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式 // 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式
// 开启该特性后需要给你的输入框绑定keydown事件并禁止冒泡 // 开启该特性后需要给你的输入框绑定keydown事件并禁止冒泡
enableAutoEnterTextEditWhenKeydown: false, enableAutoEnterTextEditWhenKeydown: false,
// 当enableAutoEnterTextEditWhenKeydown选项开启时生效当通过按键进入文本编辑时是否自动清空原有文本
autoEmptyTextWhenKeydownEnterEdit: false,
// 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据如果你想处理其他思维导图的数据比如processon、zhixi等那么可以传递一个函数接受当前剪贴板中的文本为参数返回处理后的数据可以返回两种类型 // 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据如果你想处理其他思维导图的数据比如processon、zhixi等那么可以传递一个函数接受当前剪贴板中的文本为参数返回处理后的数据可以返回两种类型
/* /*
1.返回一个纯文本那么会直接以该文本创建一个子节点 1.返回一个纯文本那么会直接以该文本创建一个子节点

View File

@ -265,7 +265,8 @@ export default class TextEdit {
nodeTextEditZIndex, nodeTextEditZIndex,
textAutoWrapWidth, textAutoWrapWidth,
selectTextOnEnterEditText, selectTextOnEnterEditText,
openRealtimeRenderOnNodeTextEdit openRealtimeRenderOnNodeTextEdit,
autoEmptyTextWhenKeydownEnterEdit
} = this.mindMap.opt } = this.mindMap.opt
if (!isFromScale) { if (!isFromScale) {
this.mindMap.emit('before_show_text_edit') this.mindMap.emit('before_show_text_edit')
@ -338,7 +339,11 @@ export default class TextEdit {
this.textEditNode.style.background = this.getBackground(node) this.textEditNode.style.background = this.getBackground(node)
} }
this.textEditNode.style.zIndex = nodeTextEditZIndex this.textEditNode.style.zIndex = nodeTextEditZIndex
this.textEditNode.innerHTML = textLines.join('<br>') if (isFromKeyDown && autoEmptyTextWhenKeydownEnterEdit) {
this.textEditNode.innerHTML = ''
} else {
this.textEditNode.innerHTML = textLines.join('<br>')
}
this.textEditNode.style.minWidth = this.textEditNode.style.minWidth =
rect.width + this.textNodePaddingX * 2 + 'px' rect.width + this.textNodePaddingX * 2 + 'px'
this.textEditNode.style.minHeight = rect.height + 'px' this.textEditNode.style.minHeight = rect.height + 'px'

View File

@ -188,7 +188,8 @@ class RichText {
textAutoWrapWidth, textAutoWrapWidth,
selectTextOnEnterEditText, selectTextOnEnterEditText,
transformRichTextOnEnterEdit, transformRichTextOnEnterEdit,
openRealtimeRenderOnNodeTextEdit openRealtimeRenderOnNodeTextEdit,
autoEmptyTextWhenKeydownEnterEdit
} = this.mindMap.opt } = this.mindMap.opt
textAutoWrapWidth = node.hasCustomWidth() textAutoWrapWidth = node.hasCustomWidth()
? node.customTextWidth ? node.customTextWidth
@ -279,7 +280,10 @@ class RichText {
if (isEmptyText) { if (isEmptyText) {
this.lostStyle = true this.lostStyle = true
} }
if (noneEmptyNoneRichText) { if (isFromKeyDown && autoEmptyTextWhenKeydownEnterEdit) {
this.textEditNode.innerHTML = ''
this.lostStyle = true
} else if (noneEmptyNoneRichText) {
// 还不是富文本 // 还不是富文本
let text = String(nodeText).split(/\n/gim).join('<br>') let text = String(nodeText).split(/\n/gim).join('<br>')
let html = `<p>${text}</p>` let html = `<p>${text}</p>`