TinyMCE 官網 （類似：百度的富文本web編輯器UEditor）
第一步
下載 TinyMCE，解壓后放入工程，在需要的HTML頁面引入tinymce.min.js。
第二步
下載tinyMCE image upload 插件 tinymce-imageupload，解壓后把該文件夾放在 tinymce\js\tinymce\plugins目錄下。
該插件使用了jquery.iframe-post-form.js ,在試用的時候沒有成功，遂換成 jquery.form.js 對插件進行改造。
第三步
下載jquery.form.js，在HTML頁面引入jquery和該插件。
jquery.form.js 提供了基礎的文件上傳表單，可以用此插件上傳本地圖片到服務器。然后得到圖片對應的URL。
第四步：
在HTML頁面，初始化tinyMCE：
1 tinymce.init({ 2 selector: '#myTextArea', 3 theme: 'modern', 4 menubar: false, 5 width: 750, 6 height: 250, 7 autoresize_min_height: 350, 8 imageupload_url: 'serverAddress/file/fileUpload', 9 plugins: [ 10 "advlist autolink print preview imageupload"
11 ], 12 toolbar: "insertfile undo redo | bold | print preview | imageupload", 13 convert_urls: false, 14 // init_instance_callback: setTinyContent
15 });
文件上傳后的處理（tinymce\plugins\imageupload\plugin.min.js）
根據服務器的返回對應修改。大致流程：把服務器返回的路徑置入<img>標簽中，插入到tinyMCE編輯器中，然后即可看到上傳的圖片。
1 $('#uploadImageForm').ajaxSubmit({ 2 dataType: 'json', 3 success: function(response){ 4 if (response.url) { 5 var tpl = '<img src="%s" width="220" data-key="%k"/>'; 6 var tplV = tpl.replace('%s', response.url); 7 tplV = tplV.replace('%k', response.key); 8 ed.insertContent(tplV); 9 ed.focus(); 10 removeForeground(); 11 removeBackground(); 12 } else { 13 showImageUploadError('上傳失敗，請重試！'); 14 } 15 }, 16 error: function(){ 17 showImageUploadError('上傳失敗，請重試！'); 18 } 19 });
改造后的插件 git地址
注意點：
點擊上傳圖標后，彈出的上傳圖片窗口，由於tinyMCE內置CSS的問題導致彈窗縮放0.1倍，問題CSS： .mce-window {transform:scale(.1)} （come from skin.min.css）
在使用的時候重寫覆蓋掉就可以了：
.mce-window { transform: initial !important; }