如何使contenteditable div只允许某些标签？

Question

我使用了contenteditable div。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div contenteditable="true"></div> 
 

 
<button id="insert_strong">Strong!</button> 
 

 
<button id="insert_italic">Italic</button> 
 

 
<button id="insert_span">Span!</button> 
 

 
<script> 
 
    $("#insert_strong").click(function(){ 
 
     $("div").append('<strong>Strong text!</strong> '); 
 
    }); 
 

 
    $("#insert_italic").click(function(){ 
 
     $("div").append('<i>Italic text!</i> '); 
 
    }); 
 

 
    $("#insert_span").click(function(){ 
 
     $("div").append('<span>Span text!</span> '); 
 
    }); 
 
</script>

即使我删除的按钮，人们仍然可以通过粘贴复制粘贴任何HTML标记任何网站。我希望人们只能在其中发布<strong>标签，所有其他标签都应该被删除。如何才能做到这一点？

Answer 1

我终于找到了解决方案。那就是：

$("#insert_strong").click(function(){ 
 
    $("div").append('<strong>Strong text!</strong> '); 
 
    div_key_up("div"); 
 
}); 
 

 
$("#insert_italic").click(function(){ 
 
    $("div").append('<i>Italic text!</i> '); 
 
    div_key_up("div"); 
 
}); 
 

 
$("#insert_span").click(function(){ 
 
    $("div").append('<span>Span text!</span> '); 
 
    div_key_up("div"); 
 
}); 
 

 
function div_key_up(l) 
 
{ 
 
    $(l).html(strip_tags($(l).html(), "<strong><br>")); 
 
} 
 

 
function strip_tags(input, allowed) 
 
{ 
 
    allowed = (((allowed || '') + '') 
 
    .toLowerCase() 
 
    .match(/<[a-z][a-z0-9]*>/g) || []) 
 
    .join(''); 
 
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, 
 
    commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi; 
 
    return input.replace(commentsAndPhpTags, '') 
 
    .replace(tags, function($0, $1) 
 
    { 
 
    return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : ''; 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div contenteditable="true" onkeyup="div_key_up(this);"></div> 
 

 
<button id="insert_strong">Strong!</button> 
 

 
<button id="insert_italic">Italic</button> 
 

 
<button id="insert_span">Span!</button>