如何使用 raphael 动态更改文本

Question

好的，这基本上就是我现在正在做的事情。我创建了 raphael 文本对象。我使用点击事件打开一个对话框。然后我对对话框中的文本进行更改。不过，这不是我希望实现的方式。我希望我的实现有点类似于在 MS Paint 中创建文本的方式，用户可以单击文本对象并在键入时更改文本。有人知道如何使用 raphael 文本对象来实现这一点吗？

Answer 1

一个简单的解决方案是在用户开始编辑文本时创建一个<textarea>。用当前文本填充它并将其放置在文本对象上。然后，当它失去焦点时 (onblur)，移除文本区域并将文本复制回文本对象中。

如果你真的想在文本对象中“就地”编辑文本，那么你可以让用户在一个隐藏的文本字段中输入。但在这种情况下，您必须自己实现所有光标和选择逻辑。参见this fiddle（它只允许使用左右箭头移动光标，使用shift选择文本以便您可以复制和粘贴）。

另外，我不知道contenteditable 是否适用于 SVG 内容，但如果它确实有效，那将是一个非常简单的解决方案。