Estoy usando un div contenteditable.
<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> Incluso si elimino los botones, las personas aún pueden pegar cualquier etiqueta html copiando y pegando desde cualquier sitio web. Quiero que la gente pueda publicar solo etiquetas <strong> dentro de él, todas las demás etiquetas deben eliminarse. ¿Cómo se puede hacer esto?
Finalmente encontré una solución. Aquí está:
$("#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(/<[az][a-z0-9]*>/g) || []) .join(''); var tags = /<\/?([az][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>