TinyMCE 新增本地圖片上傳功能
更新時間：2010年11月05日 14:47:25 作者：
在TinyMCE 在處理富文本時，可以通過網(wǎng)站的相對路徑錄入圖片地址。
這樣TinyMCE 就可以正常顯示圖片了。其實該功能屬于普通HTML富文本控件基本功能了?，F(xiàn)有需求將TinyMCE 擴展成可直接上傳本地圖片而后在文本區(qū)域顯示圖片。
實現(xiàn)思路：
使用Ajax 進行圖片上傳，此上傳方式可以更友好的實現(xiàn)TinyMCE 的圖片上傳擴展，
具體方法可以參考我的上一篇 Jquery ajaxsubmit 上傳圖片。將Ajax上傳圖片集成到 TinyMCE 中，
主要是修改TinyMCE 目錄下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。
了解TinyMCE的人應該知道 TinyMCE 類似 FireFox。 開發(fā)者是可以為其編寫適合自己需求的插件。
所以只要稍稍修改 advimage 這個插件即可。我們?yōu)?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 屬性。
程序截圖如下：
實現(xiàn)思路：
使用Ajax 進行圖片上傳，此上傳方式可以更友好的實現(xiàn)TinyMCE 的圖片上傳擴展，
具體方法可以參考我的上一篇 Jquery ajaxsubmit 上傳圖片。將Ajax上傳圖片集成到 TinyMCE 中，
主要是修改TinyMCE 目錄下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。
了解TinyMCE的人應該知道 TinyMCE 類似 FireFox。 開發(fā)者是可以為其編寫適合自己需求的插件。
所以只要稍稍修改 advimage 這個插件即可。我們?yōu)?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 屬性。
程序截圖如下：
相關(guān)文章
jQuery 創(chuàng)建Dom元素代碼，需要的朋友可以參考下。2010-05-05
jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法
這篇文章主要介紹了jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JQuery記住用戶名密碼實現(xiàn)下次自動登錄功能,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
jQuery實現(xiàn)的導航動畫效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的導航動畫效果,可實現(xiàn)導航條的底部橫條隨鼠標移動的效果,涉及jQuery針對鼠標事件的響應及頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
本文主要介紹了jQuery uploadify文件上傳插件的使用方法，uploadify這個插件是基于js里面的jquery庫寫的。結(jié)合了ajax和flash，實現(xiàn)了這個多線程上傳的功能。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了jQuery+ajax的資源回收處理機制,結(jié)合實例形式簡單分析了ajax中complete對象完成回調(diào)之后的資源回收處理機制用法,需要的朋友可以參考下2017-01-01
jquery仿京東導航/仿淘寶商城左側(cè)分類導航下拉菜單效果
jquery實現(xiàn)下拉菜單效果，jquery寫的仿京東導航菜單，一個經(jīng)典的左側(cè)多級導航菜單，學會了可以任意改變布局，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
jquery獲取select選中值的文本,并賦值給另一個輸入框的方法
今天小編就為大家分享一篇jquery獲取select選中值的文本,并賦值給另一個輸入框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章給大家介紹了jquery 圖片輪播代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
JQuery 操作Javascript對象和數(shù)組的工具函數(shù)小結(jié)
JQuery提供了很多實用的工具函數(shù)。這些函數(shù)主要分為兩類，操作集合數(shù)組的函數(shù)和非集合數(shù)組函數(shù)。2010-01-01