Question

我不是jQuery大师，但无论如何我都在努力 - 以我对内联所见之为的追求。

我见过'Aloha'，但我宁愿不依赖于所有平台都支持的错误的HTML5功能。

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

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

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

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

任何有技巧和闲暇半小时帮助我解决这个问题的人都会很棒，我自己也在挣扎，这是一个奇迹，我已经走到了这一步。

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

任何帮助表示赞赏!!

Answer 1

你为什么试图以一种原始的方式重新发明轮子？出于这个原因，Microsoft设计并实现了designMode和contentEditable属性;使开发人员能够创建富文本编辑器。

只需一行代码即可使您的元素可编辑，并且它在所有主流浏览器（IE 5.5 +，FF 3 +，Opera 9 +，Safari 3 +，Chrome）中都具有魅力。

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

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

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

我冒昧地用上面的例子修改你的小提琴：http://jsfiddle.net/mekwall/Zn5qD/2/

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

使用jQuery寻求终极内联wysiwyg

1 个答案: