DIV CSS 佈局教程網

這樣TinyMCE 就可以正常顯示圖片了。其實該功能屬於普通HTML富文本控件基本功能了。現有需求將TinyMCE 擴展成可直接上傳本地圖片而後在文本區域顯示圖片。
實現思路：
使用Ajax 進行圖片上傳，此上傳方式可以更友好的實現TinyMCE 的圖片上傳擴展，
具體方法可以參考我的上一篇 Jquery ajaxsubmit 上傳圖片。將Ajax上傳圖片集成到 TinyMCE 中，
主要是修改TinyMCE 目錄下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。
了解TinyMCE的人應該知道 TinyMCE 類似 FireFox。 開發者是可以為其編寫適合自己需求的插件。
所以只要稍稍修改 advimage 這個插件即可。我們為 advimage
目錄下的image.htm 新增 jquery 圖片異步提交代碼：
代碼如下:
<script type="text/javascript">
function AjaxUploadPic() {
if ($("#flUpload").val() == "") {
alert("請選擇一個圖片文件，再點擊上傳。");
return;
}
$('#myForm').ajaxSubmit({
beforeSubmit: function() {
},
success: function(html, status) {
var result = html.replace("<PRE>", "");
result = result.replace("</PRE>", "");
if (html.indexOf("格式") > 0) {
alert(result);
return;
}
$("#src").val(result);
ImageDialog.showPreviewImage($("#src").val())
}
});
}
});
</script>

當然了，flUpload 這個input type="file" 需要被form html標簽包住同時為該form設置好

method="post" enctype="multipart/form-data" action=url 屬性。
程序截圖如下：