寻求最终的内联wysiwyg使用jQuery [英] quest for the ultimate inline wysiwyg using jQuery

问题描述

我已经看过'Aloha'，我已经看过'Aloha'但我不依赖于在所有平台上远不支持的buggy HTML5功能。

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

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

我的代码应该跟踪当前活动的DIV进行编辑，插入SPAN标签包裹每个字符（嵌套标签省略），并使用这些span标签onclick事件来移动假文本光标。

稍后我将添加键盘监听器，但现在我已经添加了键盘监听器， d我很高兴，如果我可以得到光标移动时，我点击周围的活动DIV。

任何人有一些技能和一个半小时，以帮助我的工作

代码可以被看到和测试：








http://jsfiddle.net/Zn5qD/

任何帮助赞赏！

解决方案

为什么要尝试重新发明轮子， Microsoft为此设计并实现了 designMode 和 contentEditable 属性;允许开发人员创建富文本编辑器。

只需一行代码，就可以使您的元素可编辑，它在所有主流浏览器（IE 5.5+，FF 3+​​，Opera 9+，Safari 3+，Chrome）。

  $（可编辑）。 attr（contentEditable，true）; 
  

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

  $（。editable）。attr（contentEditable，true）.bind（{
 focus：function（e）{
 var $ this = $（this） ; 
 //将当前内容保存到数据存储
 //这样我们可以使用它来检测是否有任何更改
 $ this.data（content，$ this.html （）; 
}，
 blur：function（e）{
 var $ this = $（this）; 
 if（$ this.data（content）！ == $ this.html（））{
 //内容已更改，所以我们可以使用ajax来保存它
} 
} 
}）; 
  

我用自由修改上面的例子中的小提琴： http://jsfiddle.net/mekwall/Zn5qD/2/

如果你想更多地了解 contentEditable 和 designMode 属性，你应该查看这篇文章： http://blog.whatwg.org/the-road-to-html-5-contenteditable

I'm no jQuery guru but I'm trying my best anyway - in the name of my quest for inline wysiwyg.

I've seen 'Aloha' but I rather not depend on buggy HTML5 features that's far from supported on all platforms.

I also dismissed the iframe and textarea solutions and decided to "fake" the text cursor and other text-input behavior directly inside the target DIV.

This might have been a mistake, I'm not sure yet.

My code should keep track of currently active DIV for editing, insert SPAN tags wrapping each character (nested tags omitted) and use those span tags onclick event to "move" the fake text cursor. I try to accomplish this by selecting the characted that was clicked, then appending the cursor-div after that.

Later on I'll add keyboard listeners but for now I'd be happy if I could get the "cursor" moving when I click around inside the active DIV.

Anyone with some skills and a spare half hour to help me work on this would be awsome, I'm struggling by myself and it's a miracle that I've gotten this far.

The code can be seen and tested on: http://jsfiddle.net/Zn5qD/

Any help appreciated!!

解决方案

Why are you trying to reinvent the wheel, and in a such primitive way? Microsoft designed and implemented designMode and contentEditable attributes for this reason; to enable developers to create rich text editors.

With just a single line of code you can make your elements editable, and it works like a charm in all major browsers (IE 5.5+, FF 3+, Opera 9+, Safari 3+, Chrome).

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

To take it a step further we can bind the focus and blur events as a way to detect when the element enters the editable state. By comparing the contents of the elements on blur with a copy that was saved to the private data storage, we can detect any changes that was made to the element.

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

I took the liberty to modify your fiddle with the above example: http://jsfiddle.net/mekwall/Zn5qD/2/

If you want to know more about the contentEditable and designMode attributes you should check out this article: http://blog.whatwg.org/the-road-to-html-5-contenteditable

这篇关于寻求最终的内联wysiwyg使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！