TinyMCE這個東西很多地方再用，不過我以前一直沒用過，最近才接觸，因為有一套現成的metro風格的皮膚，僅此而已，不過最終如何調用還是我得來實現。其他的都好說，網上的資料一大把一大把的，唯獨這個本地圖片上傳，網上查的資料都是三言兩語，不成體系，有些地方總歸是沒有說到，費了好大勁兒，總算是鬧明白怎么弄這個了。（大牛們這次怎么就不能一起愉快的玩耍呢……）
TinyMCE中使用本地上傳圖片，實際上是在TinyMCE中使用了一個編寫好的插件。這個插件自定義性非常大，按照你的想法，想干嘛就干嘛。
首先一點，在TinyMCE編輯器初始化時啟用圖片功能，這個不說了，網上資料都有，一大把一大把的。這里只舉一個例子：
tinymce.init({ selector: 'textarea', mode: "textareas", theme: "advanced", plugins: "preview", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_buttons1: "bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, undo,redo, link, unlink, hr, formatselect, fontselect, fontsizeselect, forecolor,spacer,cut,copy,paste, image,cleanup, code, myplugins,preview", theme_advanced_buttons2: "", theme_advanced_buttons3: "", }); tinymce.mceImage
然后直奔本地圖片上傳。
核心要關注的就是這個htm頁面和image.js文件這兩個。
image.htm這個里面你可以完全自己定義，不用太操心，你希望他是什么樣子都可以，一般都會跟你整體項目的UI框架保持一致，當然也有特別炫酷的。當你覺得他的墨陽能夠讓你滿意，記得在head標簽區域內引用“image.js”文件。這個很重要。
這里我們還用到了jquery.form.js這個經典的插件，主要是要用它來實現ajax提交表單。
這里是我自己的代碼，給大家參考下：
<head> <script src="../../../../../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../../../jquery.form.js"></script> <script type="text/javascript" src="../../tiny_mce_popup.js"></script> <script type="text/javascript" src="../../utils/mctabs.js"></script> <script type="text/javascript" src="../../utils/form_utils.js"></script> <script type="text/javascript" src="js/image.js"></script> </head>
上面的東西除了jquery.form.js都可以在插件內部找到，這里不再一一解釋作用了。往下就是html主體部分，這個大家隨意，反正只要有個form標簽，里面再有個<input type='file' ……>就可以了。
先說上傳本身，上傳本身要利用ajax提交表單，具體來說就是利用jquery.form.js中的ajaxSubmit方法，參數和Jquery的ajax一樣，但是不需要傳遞data參數，因為表單本身在內部會處理完當做post方式傳輸。與此同時，對於上傳文件來說，form表單中需要設置如下內容：
method="post" enctype="multipart/form-data" action="……"
method和action兩個屬性不解釋了，如有疑問請自行百度。enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼，默認值是“application/x-www-form-urlencoded”，編碼所有字符，“text/plain”是指不編碼特殊字符，但會將空格轉換為 "+" 加號，還有一個值就是我們用到的“multipart/form-data”，該值為不對字符編碼，上傳文件的請求必須使用這個值。這種方式的核心在於post請求的數據在文件數據和文本數據中存在分隔符，具體的不贅述太多了。
然后是表單 提交的部分（重頭戲哦）：
if (document.getElementById("upload").value == "") { alert("請選擇一個圖片文件，再點擊上傳。"); return; } $("#myForm").ajaxSubmit({ type: "POST", dataType: "text", url: "……", async: true, success: function (value) { if (value != "0") { $("#src").val(value); $("#uploadsrc").html("<img src='"+value+"' />"); } else { alert("上傳失敗"); } }, error: function (value) { alert("失敗" + value); } });
方法里看到對於表單“myForm”使用了ajaxSubmit方法，方法跟jquery本身的ajax一樣，簡單明了，至於后台的代碼這里不說了，如果有同學需要的話可以百度，或者聯系我。在文件上傳完畢之后，可以看到在例子中我是把圖片顯示了出來，這樣主要為了方便，預覽一下再確定，省的誤操作，這個大家可以根據自己的用戶習慣和要求來設計。
然后就是如何把圖片添加到文本編輯器里了。因為TinyMCE的方式是彈出窗口，注意是窗口，不是層。對於這樣的彈出窗口，一般情況下我們會有插入，取消之類的按鈕來使用，這里只說插入和取消，其他的就不說了。
取消：主要功能為刪除圖片，關閉窗口，刪除圖片這個在自己后台處理就是了，用一個ajax方法，后台刪除就是了，服務端代碼這里不做研究了。關閉窗口我們使用TinyMCE的方法：tinyMCEPopup.close()，這樣可以直接關閉彈出窗口並使焦點回到富文本編輯器本身。
插入：把剛剛上傳的圖片對象插入到富文本編輯器當前的光標所在處。並關閉彈出窗口，這里就要用到前文提到的image.js了。這個image.js文件，tinyMCE本身就有，但是不見得適用每個人，所以需要自行修改。
文件中有一個聲明好的全局變量：ImageDialog，這里面可以做很多東西。文件本身有很多方法，大家感興趣的可以研究下，這里只說一些我們馬上就需要用到的代碼。
insertAndClose: function () { var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el; tinyMCEPopup.restoreSelection(); // Fixes crash in Safari if (tinymce.isWebKit) ed.getWin().focus(); if (!ed.settings.inline_styles) { args = { vspace: nl.vspace.value, hspace: nl.hspace.value, border: nl.border.value, align: getSelectValue(f, 'align') }; } else { // Remove deprecated values args = { vspace: '', hspace: '', border: '', align: '' }; } tinymce.extend(args, { src: nl.src.value.replace(/ /g, '%20'), width: 100, height: 100, alt: "", title: "", 'class': getSelectValue(f, 'class_list'), style: "", id: "", dir: "", lang: "", usemap: "", longdesc: "" }); args.onmouseover = args.onmouseout = ''; //if (f.onmousemovecheck.checked) { // if (nl.onmouseoversrc.value) // args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';"; // if (nl.onmouseoutsrc.value) // args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';"; //} el = ed.selection.getNode(); if (el && el.nodeName == 'IMG') { ed.dom.setAttribs(el, args); } else { tinymce.each(args, function (value, name) { if (value === "") { delete args[name]; } }); ed.execCommand('mceInsertContent', false, tinyMCEPopup.editor.dom.createHTML('img', args), { skip_undo: 1 }); ed.undoManager.add(); } tinyMCEPopup.editor.execCommand('mceRepaint'); tinyMCEPopup.editor.focus(); tinyMCEPopup.close(); }
這個方法是我根絕別人的東西改改直接用的，方法是把圖片添加到富文本編輯器當前光標處並關閉彈出窗口的。其中：
tinyMCEPopup是tinyMCE的彈出窗口對象,利用他可以通過tinyMCEPopup.editor操作富文本編輯器，同時，tinymce是tinymce的全局對象。
在方法中：
tinymce.extend(args, {
src: nl.src.value.replace(/ /g, '%20'),
width: 100,
height: 100,
alt: "",
title: "",
'class': getSelectValue(f, 'class_list'),
style: "",
id: "",
dir: "",
lang: "",
usemap: "",
longdesc: ""
});
這個方法我是自己改的很死，因為我的需求沒有那么嚴格，所以這些參數我都是寫死的，各位根據需要自行修改吧，這是初始化的設定。
編寫完成關閉方法，還需要調用，在HTML頁面中，在插入按鈕對應的點擊方法中，可以直接使用：ImageDialog.insertAndClose()方式調用。
以上，就是基本的tinyMCE本地圖片上傳功能，往下就是根據需要調整了，各位發揮才智，可以各種酷炫哦。