富文本編輯器TInyMCE,本地圖片上傳（Image Upload）

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 = '<img src="%s" width="220" data-key="%k"/>';
                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('上傳失敗，請重試！');
        }
});

改造後的插件 git地址

注意點：

點擊上傳圖標後，彈出的上傳圖片窗口，因爲tinyMCE內置CSS的問題致使彈窗縮放0.1倍，問題CSS：

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

（come from skin.min.css）

在使用的時候重寫覆蓋掉就能夠了：

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

原文地址：http://www.cnblogs.com/hzj680...