我使用谷歌浏览器。
我需要一个非常小的 HTML 编辑器,我找到了 Simple Edit .非常小的编辑器,正好满足我的需要。然而......这个和许多其他使用 Content Editable 的编辑器都有一个共同的问题。
问题
创建列表后(在最后一个列表项上按 Enter 两次),它会创建一个新的 div。我期望创建一个新的段落标记。
链接
- 在这里试试编辑器: http://files.inlovewithcss.com/simple-edit/
- 查看微小的源代码: https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js
问题
防止 div 的正确方法是什么,而是在列表后添加段落标签?
最佳答案
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);
});
关于javascript - 列表后的 HTML5 内容可编辑段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12968170/