HTML5内容列表后的可编辑段落

Question

我使用谷歌浏览器.

我需要一个非常小的HTML编辑器,我找到了Simple Edit.非常小的编辑器,只是为了我的需要.但是......这个和许多其他使用内容可编辑的编辑器有一个共同的问题.

问题

创建一个列表(在最后一个列表项上按两次输入)后,它会创建一个新的div.我预计将创建一个新的段落标记.

链接

• 在这里试试编辑器: http ://files.inlovewithcss.com/simple-edit/
• 看一下微小的源代码: https ://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

题

防止div的正确方法是什么,而是在列表后添加段落标记？

Answer 1

Bryan Allo发布的答案没有考虑到你需要将光标放在div的末尾.否则,每次替换操作时,用户都必须按CTRL-End.

这是我提出的解决方案,也可以在http://jsfiddle.net/82dS6/上看到:

function setEndOfContenteditable(contentEditableElement){
    // Taken from http://stackoverflow.com/a/3866442/1601088
    var range,selection;
    if(document.createRange){//Firefox, Chrome, Opera, Safari, IE 9+
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else if(document.selection){//IE 8 and lower
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false);
        range.select();
    }
}

function replaceDivWithP(el){

    $(el).find('div').each(function(){
        $(this).replaceWith($('<p>' + $(this).html() + '</p>'));
    });
}

$(function(){
    $(".text").simpleEdit();
});

$('.textarea').bind('keyup', function(){
    replaceDivWithP(this);
    setEndOfContenteditable(this);
});


?