Javascript 使用jQuery寻求最终的内联所见即所得

我不是jQuery大师，但无论如何我都在尽力——以我对内联所见即所得的追求的名义

我看过《阿罗哈》，但我并不依赖于所有平台都不支持的有缺陷的HTML5特性

我还排除了iframe和textarea解决方案，并决定直接在目标DIV内“伪造”文本光标和其他文本输入行为

这可能是个错误，我还不确定

我的代码应该跟踪当前活动的DIV进行编辑，插入环绕每个字符的SPAN标记（嵌套标记省略），并使用这些SPAN标记onclick事件“移动”假文本光标。我试图通过选择被点击的字符，然后在其后添加游标div来完成这项工作

稍后，我将添加键盘侦听器，但现在，如果在活动DIV中单击时能够移动“光标”，我会很高兴

任何人只要有一些技能和半个小时的时间来帮助我完成这项工作都会很糟糕，我一个人在挣扎，我能走到这一步真是个奇迹

可以在以下位置查看和测试代码：

---

谢谢你的帮助

你为什么试图以如此原始的方式重新发明轮子？为此，Microsoft设计并实现了

designMode

和

contentEditable

属性；使开发人员能够创建富文本编辑器

只需一行代码，您就可以对元素进行编辑，它在所有主流浏览器（IE 5.5+、FF 3+、Opera 9+、Safari 3+、Chrome）中都能发挥迷人的效果

更进一步，我们可以绑定焦点和模糊事件，以检测元素何时进入可编辑状态。通过将blur上元素的内容与保存到私有数据存储的副本进行比较，我们可以检测对元素所做的任何更改

$(".editable").attr("contentEditable", true).bind({
    focus: function(e){
        var $this = $(this);
        // Save the current content to data storage
        // This so we can use it to detect if any changes were made
        $this.data("content", $this.html());
    },
    blur: function(e){
        var $this = $(this);
        if ($this.data("content") !== $this.html()) {
            // Content was changed so we can use ajax to save it
        }
    }
});

我冒昧地用上面的例子修改了你的小提琴：

---

如果你想了解更多关于

contentEditable

和

designMode

属性的信息，你应该看看这篇文章：

如果你说的是HTML5元素“contentEditable”，它根本就不是bug。它适用于所有主流浏览器。你可能会担心IE，但事实上他们早在IE 4well就创建了它。如果我能让它工作，那就意味着支持更多的浏览器——为什么不呢？对于像aloha这样更高级的项目，可以将其用作后备方案。就我个人而言，我认为这是一个挑战，也是一件有趣的尝试。我一直在使用contentEditable，并结合一个名为Rangy的javascript库。这远不是完美的，但它确实做到了。否则我觉得tinymce是更好的选择。我建议你拿出你的精力，为一个成熟的项目做出贡献，例如Aloha。世界现在最不需要的就是另一个所见即所得编辑器/我原以为编程就是要重新发明轮子，但无论如何还是要谢谢你：）@chris，我不反对重新发明轮子。有时，重新发明是更好的选择，这实际上取决于用例。尤其是在处理专有软件时，它可能会更好（即创建一个开源替代方案），但在处理开源软件和/或标准时（例如在本例中），参与其中是一种比创建自己的解决方案更好的方法。

$(".editable").attr("contentEditable", true).bind({
    focus: function(e){
        var $this = $(this);
        // Save the current content to data storage
        // This so we can use it to detect if any changes were made
        $this.data("content", $this.html());
    },
    blur: function(e){
        var $this = $(this);
        if ($this.data("content") !== $this.html()) {
            // Content was changed so we can use ajax to save it
        }
    }
});