如何使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>