轉自：http://www.tangshuang.net/1715.html

使用tinymce作為網站的編輯器的時候，由於tinymce本身並不提供本地圖片上傳（提供付費圖片上傳外掛），所以我們需要自己去整合這個功能。但是我在網上找了很多資料，都沒有完整且有效的實現方法，經過對已有外掛的研究，最終實現了這個功能。現在記錄下來，為今後參考。

1. 使用imageUpload外掛

tinymce擁有完備的外掛體系，就像WordPress一樣，tinymce本身就提供了一些核心外掛，例如字型樣式等，雖然都是編輯器的核心功能，但是仍然是通過外掛實現的。它不提供圖片上傳功能，它的圖片只能引用網路圖片。所以我們可以通過外掛的形式來實現這個功能。

imageUpload外掛可以在這裡獲取和了解。按照作者的意圖，在使用本外掛的時候，必須先載入iframe form post外掛，這個外掛在這裡下載。

但是iframe form post外掛的機制似乎出現了問題，導致我在使用時無法正常使用imageUpload外掛，所以我選擇了使用jquery.form.js這個外掛。

2.使用jquery.form.js外掛

jquery非常漂亮的封裝了ajax，但是在進行表單提交的時候，特別是在上傳圖片的時候，就會出現問題，[type=file]無法被提交。而通過jquery.form.js外掛，就可以很好的解決這個問題。

jquery.form.js並沒有提交為官方外掛，你可以在

3.開始部署tinymce

說了這麼多，到底怎麼來實現tinymce的本地上傳圖片功能呢？按照下方的方法一步一步的操作即可。

1）整合tinymce

也就是在你的HTML中先整合tinymce，並可以正常使用。具體整合方法就不說了。

2）載入jQuery.form.js

在進行tinymce的某個例項化之前，要載入jquery.form.js，你可以直接在tinymce的js載入之後，立即載入jquery.form.js。

3）把外掛丟入tinymce的外掛目錄

上面說過了，我們對imageUpload外掛進行了改造，點選這裡下載我改造過的外掛（jquery.form.js也在這裡面）。下載之後，解壓出imageupload目錄，把這個目錄直接丟在tinymce的外掛目錄（tinymce/plugins）下。

4）初始化時配好配置

在第一步中我們正常集成了tinymce，說明你已經知道如何進行配置了。接下來你要讓你的上傳圖標出現在編輯器工具欄中，並且能夠上傳圖片成功。

<script>
    tinymce.init({
        selector: "#detail",
        language : "zh_CN",
        language_url : "__ASSETS__/TinymceEditor/langs/zh_CN.js", // 語言包，需要到官網去下載，你也可以不使用中文語言包
        menubar: false,
        convert_urls: false,
        height: 450,
        plugins: [
            "link imageupload"
        ],
        toolbar: "undo redo | imageupload link | bold italic | alignleft aligncenter alignright alignjustify",
        imageupload_url: '{:U("File/uploadPicture")}'
    });
</script>

要注意上面三個地方，一個是plugins中新增imageupload（初始化時載入外掛），toolbar中要新增imageupload（工具欄中出現上傳圖片按鈕），imageupload_url要設定檔案上傳到哪一個URL（用php去接收$_FILES['file']進行處理，比如上傳、水印等）。

imageupload_url用來處理上傳好的圖片，同時要返回一個json，讓外掛知道上傳是否成功。json格式在imageUpload的github上已經有了，如果成功的情況下，要返回：

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

這樣子，上傳成功後，就可以直接將圖片插入到該位置了。