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

【问题标题】：How does workflowy implemented inline editing?工作流如何实现内联编辑？
【发布时间】：2012-05-09 05:18:56
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：