특정 태그 만 허용하도록 contentedit 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>