Content Editable bugfix testing
HTML
<div class="textarea" contentEditable="true" placeholder="I'm empty"></div>
<br/>
<label>Inside the first p.textarea:</label><br/>
<textarea class="textarea" placeholder="I'm safe" style="height:200px"></textarea>
CSS
.textarea {
border:1px solid #bbb;
border-radius:2px;
padding:2px 4px;
box-shadow:inset 1px 2px 10px -2px #aaa;
line-height:1.5em;
min-height:1.5em;
vertical-align:middle;
width:99%;
outline:none;
}
.textarea:focus {
border-color:gray;
}
.textarea:empty::before,
.textarea>*:empty::before {
content:attr(placeholder);
position:absolute;
z-index:1000;
color:#999;
}
.textarea:focus::before,
.textarea:focus>*::before {
content:"";
}
JavaScript
function cleanup(html) {
return html.replace(/[\r\n]/g,'') // ie
.replace(/ /gi, " ")
//.replace(/(<\/?div>)\1/ig, "$1")
// replace tags to special codes
.replace(/<br\/?>/gi,"\2")
.replace(/<\/?span[^>]*>/gi, "\3")
.replace(/<\/?[^>]+>/gi, "\1")
// some clearing
.replace(/\2\1\1+/g,"\2")
.replace(/\1\2\1+/g,"\1\2")
// replace special codes
.replace(/\1+/g,"\n")
.replace(/\2/g,"\n")
.replace(/\3/g,"")
.replace(/^\s+|\s+$/g, ''); // trim
}
function nl2br(text){
return text.replace("\n","<br>");
}
$('div.textarea').click(function(){
$(this).filter(':empty:not(:focus)').html('<br>').focus();
});
$('div.textarea').live('paste',function(event){
/*$('#clipboard:first').val('').focus();
setTimeout(function(){
console.debug($('#clipboard:first').val());
//$(event.target).focus();
});*/
/*setTimeout(function(){
$('div.textarea:first').
$('div.textarea:first').html(nl2br(cleanup($('div.textarea:first').html())));
});*/
});
setInterval(function() {
//cleanupEditable();
$('textarea.textarea').val(
"html: \"" + $('div.textarea:first').html() + "\"\n" +
//"text: \"" + $('div.textarea:first').text() + "\"\n" +
"clnp: \"" + cleanup($('div.textarea:first').html()) + "\"\n"
);
}, 200);