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