有时候，你可能希望可以添加表情图片，或让上传的图片直接显示在录入框里。怎么做呢？
难点就在于需要把textarea录入框变成一个所见即所得的录入框。
一般可以用FCK等可视化编辑器来替换textarea，但有时候我们不需要fck这样复杂的编辑器，并且为了让代码较少，我们特地写了一个javascript函数来解决这个问题。
请参考模板文件范例：修改添加留言表单的外观 add_msg.php 模板文件里的javascript部分
代码范例：
<script type="text/javascript" src="/<{$web.cms_dir}>/script/jquery/jquery.js"></script>
<script type="text/javascript">
// 将ID为comment_body 的 textarea录入框变成所见即所得的录入框
function hbcmsHtmlEditor(id) {
var iframe_id = id + '_hbEditorIframe';
$('#'+id).after('<iframe id="'+iframe_id+'" name="'+iframe_id+'" style="width:680px;height:230px;background-color: white;border:1px solid gray;"></iframe>');
$('#'+id).hide();
var hbcmsEditor = document.getElementById(iframe_id).contentWindow;
//if ( hbcmsEditor.document.designMode.toLowerCase() != 'on') {
hbcmsEditor.document.designMode="on";
hbcmsEditor.document.contentEditable = true;
//但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document
hbcmsEditor.document.open();
hbcmsEditor.document.write('<html><body>'+$('#'+id).val()+'</body></html>');
hbcmsEditor.document.close();
//}
$("form:has(#"+id+") :submit").click(function () {
if ( hbcmsEditor.document.body.innerHTML.length > 4 ) {
$('#'+id).val(hbcmsEditor.document.body.innerHTML);
}
//alert($('#' + id).val() );
return true;
});
return hbcmsEditor;
}
// 处理上传文件和选择文件的函数
function insert2MsgBody(file_url, file_title, file_desc, file_id) {
var file_str = "";
if ( file_url.indexOf(".gif") != -1 || file_url.indexOf(".png") != -1 || file_url.indexOf(".jpg") != -1 || file_url.indexOf(".jpeg") != -1 ) {
file_str = " <img src="+file_url+" /> ";
} else {
var f_basename = file_url.match("[^/]*$")[0];
var my_basename = f_basename.split("\?")[0];
var extension = my_basename.split(".")[1];
file_str = " <a href="+file_url+" target=_blank>"+extension+" 文件</a> ";
}
var hb_editor = document.getElementById(file_id + '_hbEditorIframe').contentWindow;
hb_editor.focus();
if ( document.all ) {
if (hb_editor.document.selection.type.toLowerCase() != "none") {
hb_editor.document.selection.clear();
}
hb_editor.document.selection.createRange().pasteHTML(file_str) ;
} else {
hb_editor.document.execCommand("insertHTML", false, file_str);