这是一个非常棒的UI功能,我可以在没有特定按钮的情况下编辑我的列表。它看起来像大所见即所得的编辑器,带有链接和标签突出显示。他们使用哪种js技术?内容可编辑以监视焦点,然后文本区域进行编辑?
我是构建WorkFlowy的两个人之一。当您在页面上移动鼠标时,我们有一个opacity:0
文本区域,该区域随时会定位在您悬停的项目的文本上。它具有与基础内容完全相同的内容和格式。
当您单击时,它会聚焦文本区域,我们使其opacity:1
,以及它模仿的内容opacity:0
。然后,当您键入时,我们会同步文本区域和目标内容之间的内容。将来我们可能会移动到完全不可见的文本区域,因为这将启用富文本编辑。这就是许多基于 html 的 IDE 所做的。