特定のタグだけを許可する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>

私は、ボタンを削除しても、人々はまだ任意のWebサイトからコピー＆ペーストで任意の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>