如何在contenteditable div上書寫任何帶有圖釋的文字

Question

我將textarea更改爲div contenteditable以顯示錶情符號，但只需用文字輸入表情符號的值即可。所以我用jQuery .bind。

現在我無法在contenteditable div上輸入任何文本，當我在textarea上寫任何東西時。

這裏是我的工作：（這裏888所有我的PHP '.$id.'的）

var smileys = { 
 
    ':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />', 
 
\t ':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />', 
 
\t ':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />', 
 
}; 
 

 
function escapeRegExp(str) { 
 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
 
} 
 
function smilyMe(msg) { 
 
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />'); 
 
    for (var key in smileys) { 
 
     msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]); 
 
    } 
 
    return msg; 
 
} 
 
$(document).ready(function() { 
 
    $("#comment").bind("keyup", function(e) { 
 
    \t var EID = $(this).attr('class').replace('com',''); 
 
    $(".com"+EID).html(smilyMe($(".com"+EID).html())); 
 
    }); 
 
});

#maintbox { 
 
    top:50px; 
 
\t position:relative; 
 
\t min-height: 38px; 
 
\t width: 100%; 
 
} 
 
div.chat { 
 
    width: 100%; 
 
} 
 

 
#comment { 
 
    font-family:Times New Roman, Times, serif; 
 
\t font-size:12px; 
 
    \t min-height: 25px; 
 
    \t color:#000; 
 
    \t top:0; left:0; z-index:998; background: transparent; 
 
\t border: 2px solid #ccc; 
 
\t position:relative; 
 
\t float:left; 
 
    width:100%; 
 
    margin: 0; 
 
    resize: none; 
 
    padding-right:50px; 
 
\t -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div id="maintbox"> 
 
    <div class="chat"> 
 
\t <div contenteditable name="comment" tabindex="4" id="comment" class="com888" placeholder="Type here..."></div> 
 
    </div> 
 
</div> 
 
    
 
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>

Answer 1

希望這可以幫助ü交配.. :)

$(document).ready(function() { 
    $("#comment").bind("keyup", function(e) { 
    var EID = $(this).attr('class').replace('com',''); 
    $(".com"+EID).html(smilyMe($(".com"+EID).html())); //Replaced .val() to .html() 
    }); 
}); 

Fiddle