7

我使用谷歌浏览器。

我需要一个非常小的 HTML 编辑器，然后我找到了Simple Edit。非常小的编辑器，只是为了满足我的需要。但是... 这个和许多其他使用 Content Editable 的编辑器都有一个常见问题。

问题

创建列表后（在最后一个列表项上按两次 Enter），它会创建一个新的 div。对我来说期望的是创建一个新的段落标签。

链接

问题

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

4

5 回答 5

5

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);
});


​
于 2012-10-27T20:52:44.403 回答
1

keyup您可以考虑后处理，而不是对每个事件进行即时处理：

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

小提琴：http: //jsfiddle.net/thNUS/4/

于 2012-10-29T19:45:29.953 回答
0

一个快速的解决方案是简单地用 Ps 替换任何 DIV。将其放在您的内容可编辑 DIV 中。

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

希望能帮助到你。祝你好运。

于 2012-10-19T19:35:28.817 回答
0

我能想出的最好办法是使用有兼容性问题的格式块。基本上你可以像这样添加另一个链接：

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

*请注意，段落的样式为绿色文本。

于 2012-10-29T20:41:34.723 回答
0

以前的答案提出了一个基于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'));
});
​
于 2012-10-29T22:01:33.483 回答