html - 工作流如何实现内联编辑？

Question

这是一个非常棒的 UI 功能，我可以在没有特定按钮的情况下点击编辑我的列表。它看起来像带有链接和标签突出显示的大型所见即所得编辑器。他们使用哪种 js 技术？Contenteditable 用于监视焦点，然后 textarea 用于编辑？

Answer 1

我是创建 WorkFlowy 的两个人之一。当您在页面上移动鼠标时，我们有一个opacity:0文本区域，可以随时定位在您悬停的项目的文本上。它具有与基础内容完全相同的内容和格式。

当您单击时，它会聚焦文本区域，我们会制作它opacity:1，以及它正在模仿的内容opacity:0。然后当你输入时，我们会在 textarea 和目标内容之间同步内容。将来我们可能会转移到一个完全不可见的文本区域，因为这将启用富文本编辑。这就是许多基于 html 的 IDE 所做的。