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

Question

我不是 jQuery 大师，但我正在尽力而为 - 以我对内联所见即所得的追求的名义。

我看过“Aloha”，但我不想依赖有缺陷的 HTML5 功能，这些功能远未在所有平台上得到支持。

我也放弃了 iframe 和 textarea 解决方案，并决定直接在目标 DIV 中“伪造”文本光标和其他文本输入行为。

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

我的代码应该跟踪当前事件的 DIV 以进行编辑，插入 SPAN 标签包装每个字符(省略嵌套标签)并使用这些 span 标签 onclick 事件来“移动”假文本光标。我尝试通过选择被单击的字符，然后在其后附加 cursor-div 来完成此操作。

稍后我将添加键盘监听器，但现在如果我可以在事件 DIV 内点击时让“光标”移动，我会很高兴。

任何有一些技能和空闲半小时来帮助我完成这项工作的人都会很棒，我正在努力奋斗，我能走到这一步真是个奇迹。

可以在以下位置查看和测试代码: http://jsfiddle.net/Zn5qD/

感谢任何帮助!!

Answer 1

您为什么要以如此原始的方式重新发明轮子？微软为此设计并实现了designMode和contentEditable属性；使开发人员能够创建富文本编辑器。

只需一行代码，您就可以让您的元素可编辑，而且它在所有主流浏览器(IE 5.5+、FF 3+​​、Opera 9+、Safari 3+、Chrome)中都非常有效。

$(".editable").attr("contentEditable", true);

更进一步，我们可以绑定(bind) focus 和 blur 事件，作为检测元素何时进入可编辑状态的一种方式。通过将 blur 上的元素内容与保存到私有(private)数据存储的副本进行比较，我们可以检测到对元素所做的任何更改。

$(".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
        }
    }
});

我冒昧地用上面的例子修改了你的 fiddle :http://jsfiddle.net/mekwall/Zn5qD/2/

如果您想了解有关 contentEditable 和 designMode 属性的更多信息，您应该查看这篇文章:http://blog.whatwg.org/the-road-to-html-5-contenteditable