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; }