如何用Tiptap实现可编辑行内标签？解决光标无法聚焦到标签内部的问题

嘿，我注意到你在尝试用Tiptap做可编辑行内标签时，遇到了光标没法聚焦到标签内部、总是自动跳转到末尾的问题，这确实挺闹心的。我来帮你捋捋代码里的问题，然后给出修复方案～

先看你遇到的具体现象：

你的代码里主要有几个地方需要调整，才能让光标正常聚焦到标签内部：

1. 别手动给NodeView的contentDOM设置文本内容 #

你在NodeView里直接写了contentDOM.textContent = node.attrs.value，这会干扰Tiptap对节点内容的自动管理逻辑。Tiptap需要自己控制contentDOM里的内容，才能正确处理光标定位和编辑行为，手动赋值会让编辑器无法识别内部的可编辑区域，自然就会出现光标跳转的问题。

2. 调整键盘快捷键的处理逻辑 #

你现在设置的Enter: () => true和Backspace的返回逻辑，会直接阻止编辑器的默认行为，这会影响光标和删除操作的正常执行。应该只在特定场景下才阻止默认行为，其他情况交给编辑器自己处理。

3. 确保节点内容定义和NodeView匹配 #

你的节点content是'(inline | text)*'本身没问题，但要让NodeView的contentDOM能被Tiptap正确注入内容，不需要手动干预文本渲染。

下面是修改后的完整代码示例：

<script type="module">
    const EditableTag = Node.create({
        name: 'editableTag',
        group: 'inline',
        inline: true,
        content: 'text*', // 如果只需要纯文本编辑，这里可以简化为text*，保留原定义也可
        
        // 补充attrs定义，方便存储标签相关属性
        attrs: {
            value: {
                default: '',
            },
        },

        renderHTML({ HTMLAttributes }) {
            return ['span', { 'data-type': 'editable-tag', class: 'editable-tag', ...HTMLAttributes }, 0]
        },

        addKeyboardShortcuts() {
            return {
                // 仅在需要特殊处理Enter时返回true，否则让编辑器默认处理
                Enter: ({ editor }) => {
                    // 比如需要在标签内换行的话可以在这里处理，暂时先放开默认行为
                    // return true;
                },
                Backspace: ({ editor }) => {
                    const { selection } = editor.state;
                    const { from } = selection;
                    const currentNode = editor.state.doc.nodeAt(from - 1);
                    
                    // 只有当标签内容为空时，才触发删除标签的逻辑，否则让编辑器处理默认删除
                    if (currentNode?.type.name === 'editableTag' && currentNode.textContent.length === 0) {
                        editor.commands.deleteRange({ from: from - 1, to: from });
                        return true;
                    }
                    // 其他情况交给编辑器处理默认Backspace行为
                    return false;
                }
            }
        },

        addNodeView() {
            return ({ node, getPos, editor }) => {
                const wrapper = document.createElement('span')
                wrapper.setAttribute('data-type', 'editable-tag')
                wrapper.classList.add('editable-tag')

                // 创建contentDOM，无需手动设置文本，Tiptap会自动管理内容
                const contentDOM = document.createElement('span')
                contentDOM.classList.add('editable-tag-content')

                wrapper.appendChild(contentDOM)

                return {
                    dom: wrapper,
                    contentDOM, // 让Tiptap通过这个元素注入和管理可编辑内容
                }
            }
        },

        addCommands() {
            return {
                insertEditableTag: (attrs) => ({ commands }) => {
                    return commands.insertContent({
                        type: 'editableTag',
                        attrs,
                        content: [{ type: 'text', text: attrs.value || '' }],
                    });
                },
            };
        }
    });
</script>

关键修改点说明： #

• 删掉了NodeView中手动设置contentDOM.textContent的代码，让Tiptap自动管理可编辑区域内容
• 调整了键盘快捷键逻辑，避免无差别阻止编辑器默认行为，只在标签为空时处理删除标签的逻辑
• 完善了插入标签的命令，确保插入的文本内容能被编辑器正确识别

这样修改后，光标应该就能正常聚焦到标签内部，并且可以正常编辑内容了。你可以根据自己的需求再调整attrs和其他细节～

备注：内容来源于stack exchange，提问作者xiao yang