形式的节点富文本内容转换成\n换行的文本
let nodeRichTextToTextWithWrapEl = null
-export const nodeRichTextToTextWithWrap = (html) => {
+export const nodeRichTextToTextWithWrap = html => {
if (!nodeRichTextToTextWithWrapEl) {
nodeRichTextToTextWithWrapEl = document.createElement('div')
}
nodeRichTextToTextWithWrapEl.innerHTML = html
const childNodes = nodeRichTextToTextWithWrapEl.childNodes
let res = ''
- for(let i = 0; i < childNodes.length; i++) {
+ for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i]
- if (node.nodeType === 1) {// 元素节点
+ if (node.nodeType === 1) {
+ // 元素节点
if (node.tagName.toLowerCase() === 'p') {
res += node.textContent + '\n'
} else {
res += node.textContent
}
- } else if (node.nodeType === 3) {// 文本节点
+ } else if (node.nodeType === 3) {
+ // 文本节点
res += node.nodeValue
}
}
@@ -567,7 +593,7 @@ export const nodeRichTextToTextWithWrap = (html) => {
// 将
换行的文本转换成
形式的节点富文本内容 let textToNodeRichTextWithWrapEl = null -export const textToNodeRichTextWithWrap = (html) => { +export const textToNodeRichTextWithWrap = html => { if (!textToNodeRichTextWithWrapEl) { textToNodeRichTextWithWrapEl = document.createElement('div') } @@ -575,23 +601,34 @@ export const textToNodeRichTextWithWrap = (html) => { const childNodes = textToNodeRichTextWithWrapEl.childNodes let list = [] let str = '' - for(let i = 0; i < childNodes.length; i++) { + for (let i = 0; i < childNodes.length; i++) { const node = childNodes[i] - if (node.nodeType === 1) {// 元素节点 + if (node.nodeType === 1) { + // 元素节点 if (node.tagName.toLowerCase() === 'br') { list.push(str) str = '' } else { str += node.textContent } - } else if (node.nodeType === 3) {// 文本节点 + } else if (node.nodeType === 3) { + // 文本节点 str += node.nodeValue } } if (str) { list.push(str) } - return list.map((item) => { - return `
${item}
` - }).join('') -} \ No newline at end of file + return list + .map(item => { + return `${item}
` + }) + .join('') +} + +// 判断是否是移动端环境 +export const isMobile = () => { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( + navigator.userAgent + ) +} From bbf424c6d2b1449d3474d29e8e11be07b29016c9 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 9 Aug 2023 18:26:50 +0800 Subject: [PATCH 6/9] =?UTF-8?q?Feat:1.=E9=9D=9E=E5=AF=8C=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E8=BF=9B=E5=85=A5=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=97=B6=E5=8F=96=E6=B6=88=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=85=A8=E9=80=89=EF=BC=9B2.=E5=AD=98=E5=9C=A8=E4=B8=80?= =?UTF-8?q?=E4=B8=AA=E6=BF=80=E6=B4=BB=E8=8A=82=E7=82=B9=E6=97=B6=EF=BC=8C?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8C=89=E4=B8=8B=E4=B8=AD=E6=96=87=E3=80=81?= =?UTF-8?q?=E6=95=B0=E5=AD=97=E3=80=81=E8=8B=B1=E6=96=87=E6=8C=89=E9=94=AE?= =?UTF-8?q?=E6=97=B6=E8=87=AA=E5=8A=A8=E8=BF=9B=E5=85=A5=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/constants/defaultOptions.js | 7 ++- .../src/core/command/KeyCommand.js | 5 ++ simple-mind-map/src/core/render/TextEdit.js | 51 ++++++++++++++++--- 3 files changed, 55 insertions(+), 8 deletions(-) diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 2c72933e..97560ac6 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -126,5 +126,10 @@ export const defaultOpt = { // 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 customInnerElsAppendTo: null, // 拖拽元素时，指示元素新位置的块的最大高度 - nodeDragPlaceholderMaxSize: 20 + nodeDragPlaceholderMaxSize: 20, + // 是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态 + enableCreateHiddenInput: true, + // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式 + // 该配置在enableCreateHiddenInput设为true时生效 + enableAutoEnterTextEditWhenKeydown: true } diff --git a/simple-mind-map/src/core/command/KeyCommand.js b/simple-mind-map/src/core/command/KeyCommand.js index e894516c..4b493fd6 100644 --- a/simple-mind-map/src/core/command/KeyCommand.js +++ b/simple-mind-map/src/core/command/KeyCommand.js @@ -108,6 +108,11 @@ export default class KeyCommand { return arr } + // 判断是否按下了组合键 + hasCombinationKey(e) { + return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey + } + // 获取快捷键对应的键值数组 getKeyCodeArr(key) { let keyArr = key.split(/\s*\+\s*/) diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index 70abc840..92499d98 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -67,7 +67,9 @@ export default class TextEdit { // 创建一个隐藏的文本输入框 createHiddenInput() { - if (this.hiddenInputEl || isMobile()) return + const { enableCreateHiddenInput, enableAutoEnterTextEditWhenKeydown } = + this.mindMap.opt + if (this.hiddenInputEl || isMobile() || !enableCreateHiddenInput) return this.hiddenInputEl = document.createElement('input') this.hiddenInputEl.type = 'text' this.hiddenInputEl.style.cssText = ` @@ -75,6 +77,25 @@ export default class TextEdit { left: -99999px; top: -99999px; ` + // 监听按键事件 + if (enableAutoEnterTextEditWhenKeydown) { + this.hiddenInputEl.addEventListener('keydown', e => { + const activeNodeList = this.mindMap.renderer.activeNodeList + if (activeNodeList.length <= 0 || activeNodeList.length > 1) return + const node = activeNodeList[0] + // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式 + const keyCode = e.keyCode + if ( + node && + (keyCode === 229 || + (keyCode >= 65 && keyCode <= 90) || + (keyCode >= 48 && keyCode <= 57)) && + !this.mindMap.keyCommand.hasCombinationKey(e) + ) { + this.show(node) + } + }) + } // 监听粘贴事件 this.hiddenInputEl.addEventListener('paste', async event => { event.preventDefault() @@ -106,7 +127,7 @@ export default class TextEdit { stopFocusOnNodeActive() { this.enableFocus = false } - + // 开启默认聚焦 openFocusOnNodeActive() { this.enableFocus = true @@ -148,7 +169,7 @@ export default class TextEdit { this.mindMap.richText.showEditText(node, rect, isInserting) return } - this.showEditTextBox(node, rect) + this.showEditTextBox(node, rect, isInserting) } // 处理画布缩放 @@ -166,7 +187,7 @@ export default class TextEdit { } // 显示文本编辑框 - showEditTextBox(node, rect) { + showEditTextBox(node, rect, isInserting) { this.mindMap.emit('before_show_text_edit') this.registerTmpShortcut() if (!this.textEditNode) { @@ -179,10 +200,11 @@ export default class TextEdit { this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) - this.textEditNode.addEventListener('mousedown', (e) => { + this.textEditNode.addEventListener('mousedown', e => { e.stopPropagation() }) - const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + const targetNode = + this.mindMap.opt.customInnerElsAppendTo || document.body targetNode.appendChild(this.textEditNode) } let scale = this.mindMap.view.scale @@ -209,12 +231,27 @@ export default class TextEdit { } this.showTextEdit = true // 选中文本 - if (!this.cacheEditingText) { + // if (!this.cacheEditingText) { + // this.selectNodeText() + // } + if (isInserting) { this.selectNodeText() + } else { + this.focus() } this.cacheEditingText = '' } + // 聚焦 + focus() { + let selection = window.getSelection() + let range = document.createRange() + range.selectNodeContents(this.textEditNode) + range.collapse() + selection.removeAllRanges() + selection.addRange(range) + } + // 选中文本 selectNodeText() { let selection = window.getSelection() From d9a6981df40a128cfc51b524617d3bc5a0febdcf Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 9 Aug 2023 18:43:43 +0800 Subject: [PATCH 7/9] =?UTF-8?q?Fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=85=8D=E7=BD=AE=E4=B8=AD=E8=83=8C=E6=99=AF=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E4=B8=BAnone=E6=97=B6=E4=BC=9A=E5=8F=91=E8=B5=B7?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=E5=BC=82=E5=B8=B8=E8=AF=B7=E6=B1=82=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/core/render/node/Style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index 99e7def9..9cd452d2 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/simple-mind-map/src/core/render/node/Style.js @@ -17,7 +17,7 @@ class Style { // 设置新样式 let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig el.style.backgroundColor = backgroundColor - if (backgroundImage) { + if (backgroundImage && backgroundImage !== 'none') { el.style.backgroundImage = `url(${backgroundImage})` el.style.backgroundRepeat = backgroundRepeat el.style.backgroundPosition = backgroundPosition From 962512969197b98f46c79fe6639ca00386ac3e63 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Thu, 10 Aug 2023 08:47:16 +0800 Subject: [PATCH 8/9] =?UTF-8?q?Demo:=E5=AE=8C=E5=96=84=E5=8F=B3=E9=94=AE?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=92=8C=E5=AF=8C=E6=96=87=E6=9C=AC=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=9D=A1=E7=9A=84=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/components/Contextmenu.vue | 43 +++++++++++++++---- .../pages/Edit/components/RichTextToolbar.vue | 43 +++++++++++++++---- 2 files changed, 69 insertions(+), 17 deletions(-) diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue index c2d1d829..b3e9d461 100644 --- a/web/src/pages/Edit/components/Contextmenu.vue +++ b/web/src/pages/Edit/components/Contextmenu.vue @@ -3,6 +3,7 @@ class="contextmenuContainer listBox" v-if="isShow" :style="{ left: left + 'px', top: top + 'px' }" + :class="{ isDark: isDark }" >