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

Question

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

Answer 1

我是构建WorkFlowy的两个人之一。当您在页面上移动鼠标时，我们会有一个opacity:0文本区域，该区域可以随时放置在您正在悬停的项目的文本上。它具有与底层内容完全相同的内容和格式。

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