TinyMCE 官网 （类似：百度的富文本web编辑器UEditor）

第一步

下载 TinyMCE，解压后放入工程，在需要的HTML页面引入tinymce.min.js。

第二步

下载tinyMCE image upload 插件 tinymce-imageupload，解压后把该文件夹放在 tinymcejstinymceplugins目录下。

该插件使用了jquery.iframe-post-form.js ,在试用的时候没有成功，遂换成 jquery.form.js 对插件进行改造。

第三步

下载jquery.form.js，在HTML页面引入jquery和该插件。

jquery.form.js 提供了基础的文件上传表单，可以用此插件上传本地图片到服务器。然后得到图片对应的URL。

第四步：

在HTML页面，初始化tinyMCE：

tinymce.init({    selector: '#myTextArea',    theme: 'modern',    menubar: false,    width: 750,    height: 250,    autoresize_min_height: 350,    imageupload_url: 'serverAddress/file/fileUpload', //图片上传地址    plugins: [        "advlist autolink print preview  imageupload"    ],    toolbar: "insertfile undo redo | bold | print preview | imageupload",    convert_urls: false,    // init_instance_callback: setTinyContent});

文件上传后的处理（tinymce\plugins\imageupload\plugin.min.js）

{"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}

根据服务器的返回对应修改。大致流程：把服务器返回的路径置入<img>标签中，插入到tinyMCE编辑器中，然后即可看到上传的图片。

$('#uploadImageForm').ajaxSubmit({        dataType: 'json',        success: function(response){            if (response.url) {                var tpl = '';                var tplV = tpl.replace('%s', response.url);                tplV = tplV.replace('%k', response.key);                ed.insertContent(tplV);                ed.focus();                removeForeground();                removeBackground();            } else {                showImageUploadError('上传失败，请重试！');            }        },        error: function(){            showImageUploadError('上传失败，请重试！');        }});

改造后的插件

注意点：

点击上传图标后，弹出的上传图片窗口，由于tinyMCE内置CSS的问题导致弹窗缩放0.1倍，问题CSS：

.mce-window {    transform:scale(.1)}

（come from skin.min.css）

在使用的时候重写覆盖掉就可以了：

.mce-window {    transform: initial !important;}

原文地址：