HTML5内容可编辑段落在列表后面。

Question

我使用Google Chrome。

我需要一个非常小的HTML编辑器，我找到了Simple Edit。 这是一个非常小的编辑器，只适用于我的需求。然而……这个和许多其他使用Content Editable的编辑器都有一个共同的问题。

问题

在创建列表后（最后一个列表项按两次回车键），它会创建一个新的div。我期望会创建一个新的段落标签。

链接

• 在此处试用编辑器：http://files.inlovewithcss.com/simple-edit/
• 查看微小的源代码：https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

问题

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

- Jens Törnell

---

这将会产生一个问题。如果您使用段落标签替换容器元素而不是div，连续的列表将成为段落的子元素，这是无效的HTML。 - Edward J Beckett

Answer 1

Bryan Allo发布的答案没有考虑到你需要把光标放在div的末尾。否则，在每次替换操作中，用户都需要按CTRL-End。这是我提出的解决方案，在http://jsfiddle.net/82dS6/上也可以看到它的实际效果：

function setEndOfContenteditable(contentEditableElement){
    // Taken from https://dev59.com/2XNA5IYBdhLWcg3wBo5m#3866442
    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);
});


​

- maurits

---

这个解决方案是目前为止最好的。到目前为止，投赞成票。但是当我点击列表图标时，它会将列表添加到段落中。 - Jens Törnell

看起来似乎没有简单的方法可以解决这个问题，因为你正在使用的库使用ExecCommand来替换内容，而这不容易挂钩。 - maurits

Answer 2

不必在每个keyup事件中即时处理，可以考虑后处理：

$('.textarea').bind('blur', function(){
    $('.textarea div').contents().unwrap().wrap('<p/>');
});

代码编辑器：http://jsfiddle.net/thNUS/4/

- user916011

Answer 3

我能想到的最好方法是使用formatblock 它存在兼容性问题。基本上，你可以这样添加另一个链接：

textcontainer.prepend("<button class='paragraph'>p</button>");

...

$(".paragraph").live("click", function(){
    document.execCommand('formatblock', false, "p");
});

这使您的用户可以选择插入段落标签。然而，退出该标签有点棘手，因此它也存在一些可用性问题。您可以在提供的演示中进行测试：

演示：http://jsbin.com/ovexiz/1
源代码：http://jsbin.com/ovexiz/1/edit

*请注意，段落使用绿色文本样式。

- Joseph Marikle

Answer 4

之前的答案提出了基于 keyup 或 blur 的解决方案。这个解决方案使用列表按钮的 click 事件来最小化函数调用的数量：

http://jsfiddle.net/9ZAL7/:

function replaceDivWithP(el){

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

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

$('button.list').bind('click', function(){
    replaceDivWithP($('.textarea'));
});
​

- maurits

Answer 5

一个快速的解决方案是将任何DIV替换为P。将其放置在您的可编辑内容DIV中即可。

onkeyup="this.innerHTML=this.innerHTML.replace('div','p')"

希望它有所帮助。祝好运。

- Bryan Allo

---

如果您希望具体化并避免与有效内容发生冲突，可以替换实际标签。只是不要忘记更换闭合标签。 :-) - Bryan Allo