TinyMCE的上傳外掛程式思路

我看部落格後台使用的是tinymce作為rich text editor，這麼做主要是為了相容wordpress——把wp的資料遷移過來可費了牛鼻子勁了——多處**都是在相容wp的html過濾和輸出，因此為了保持一貫性，現在也就繼續使用tinymce（我用的版本是3.x，一下**不適用於2.x）來寫東西。

tinymce的擴充套件性還是很不錯的，wordpress就把它改了個亂七八糟。我沒那個本事也沒那個功夫，但是上傳還是得做的。放狗搜了一把，大都是在講怎麼整合別人做好的上傳外掛程式，於是我自己啃了半天wiki，這裡把大概的流程記一下：

1. 首先工具欄上得有按鈕，名字是叫image。還有乙個advimage，看名字就知道功能更牛鼻，不過當然用起來也就更複雜了；新增了按鈕之後點選它彈出的視窗（以下稱視窗甲）並沒有什麼地方可以瀏覽要上傳的檔案，因為這個按鈕本身的意思只是插入乙個

標籤，所以必須再彈乙個視窗來上傳，然後把生成的uri填進來。在tinymce的初始化函式init裡面新增乙個叫file_browser_callback的鍵值對，指向我們的瀏覽**函式（先寫乙個空殼）；

tinymce.init();
function wfb(field_name, url, type, win){}

2. 這樣子視窗甲上就會出現乙個browse按鈕了，那我們需要點選它之後彈出來上傳的頁面，就是調乙個函式，最關鍵的其實就是file那個鍵

//field_name: 視窗甲等待填入uri的文字框的id
//url: 對於上傳來說就別管了
//type: 這個也不說了，對我們沒用
//win: 這就是視窗甲的控制代碼，後面用來通訊
function wfb(field_name, url, type, win),); 
return false;
}

3. 這麼一寫，點選browse之後就會彈出我們的頁面（以下稱視窗乙）了，這也就是後台要做的事了。這裡還有乙個問題，上傳完之後如何把生成的uri填回視窗甲？這裡要用到popup這個東西，我也沒空研究這是什麼了，總之它能在tinymce彈出的視窗之間傳遞引數，我們需要讓視窗乙告訴視窗甲uri。我的做法是後台使用同乙個類（/admin/uploadimg）來處理，收到get請求的時候就返回乙個簡單的上傳頁面，收到post請求的時候就儲存，然後輸出類似這樣的**：

var filebrowserdialogue = 
};tinymcepopup.oninit.add(filebrowserdialogue.init, filebrowserdialogue);

4. 於是uri就能填回去了。其實蠻簡單的，就是幾個概念有點繞。

TinyMCE的上傳外掛程式思路

tinymce原裝外掛程式原始碼分析（一） hr

寫jquery外掛程式的思路

檔案上傳（外掛程式版）

TinyMCE的上傳外掛程式思路

tinymce原裝外掛程式原始碼分析（一） hr

寫jquery外掛程式的思路

檔案上傳（外掛程式版）

相關推薦