workflowy是如何实现内联编辑的？

Question

这真是一个很棒的UI功能，我可以在没有特定按钮的情况下点击编辑我的列表。它看起来像一个大的所见即所得编辑器，链接和标签高亮显示。他们使用的是哪种js技术？可用于监视焦点的内容，然后用于编辑的文本区？

Answer 1

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

当您单击时，它会聚焦文本区域，我们将其设置为opacity:1，以及它模仿的opacity:0内容。然后，当您键入时，我们会在文本区域和目标内容之间同步内容。我们可能会在将来移动到一个完全不可见的文本区域，因为这将支持富文本编辑。这是很多基于html的IDE所做的事情。