TinyMCE 新增本地圖片上傳功能
更新時(shí)間：2010年11月05日 14:47:25 作者：
在TinyMCE 在處理富文本時(shí)，可以通過(guò)網(wǎng)站的相對(duì)路徑錄入圖片地址。
這樣TinyMCE 就可以正常顯示圖片了。其實(shí)該功能屬于普通HTML富文本控件基本功能了。現(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對(duì)象和DOM對(duì)象使用說(shuō)明
jQuery對(duì)象和DOM對(duì)象使用說(shuō)明，需要的朋友可以參考下。2010-06-06
jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果，根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能，需要的朋友可以參考下2015-12-12
jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
bind與on的區(qū)別就在于–事件冒泡，關(guān)于jquery中的on與bind綁定事件的區(qū)別通過(guò)本文給大家實(shí)例講解，需要的朋友參考下吧2017-02-02
基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
有時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn)，使用jquery的朋友可以參考下代碼。2011-09-09
一個(gè)分享按鈕的插件使用介紹（可擴(kuò)展，內(nèi)附開發(fā)制作流程）
前幾天由于工作需要制作一個(gè)分享按鈕，考慮到后續(xù)其他項(xiàng)目可能也會(huì)用到，于是就打算寫成插件化2011-09-09
idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項(xiàng)目用了SunSean的idTabs，但每個(gè)tab里的控件會(huì)觸發(fā)postback，或者轉(zhuǎn)到其他頁(yè)面再轉(zhuǎn)回來(lái)，這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX，無(wú)奈今天加班給印度人寫個(gè)demo，通過(guò)回傳URL參數(shù)來(lái)選擇tab2012-04-04
jQuery圖片漸變特效的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery圖片漸變特效的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
Spring MVC中Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Spring MVC中Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
使用jQuery如何寫一個(gè)含驗(yàn)證碼的登錄界面
這篇文章主要介紹了如何寫一個(gè)含驗(yàn)證碼的登錄界面，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05