1、下載兩者源碼;
2,簡單配置 :
a. 一套thinkphp框架是顯示前端界面,搭配編輯器環境。對應域名為 http://tp.com;
這是前端界面配置 但是還要修改一下umeditor.config.js 文件 這里配置那個URL ,我思考了很久
我是這么想的 本地站點域名配置到了www/tp5/public位置 ,現在是要實例編輯器加一個路徑,而編輯器的文件位置就在public下面:
在此情況下 編輯器會在界面正常顯示:
好接下來考慮的問題就是圖片上傳了。這一步暫時先不說。先說說API接口配置。
b.一套thinkphp框架提供API接口調用。使用的是編輯器自帶的php上傳方法。 對應的域名是 http://tp_api.com
因為考慮到跨域的原因所以 在入口文件里面進行允許跨域操作:
修改編輯器自帶的上傳圖片方法
到這個時候兩邊都已經配置好,現在來說一下上傳的問題 :
c.圖片上傳--跨域
在網上資料都有說明和編輯器官方文檔也有說明 不支持單張圖片跨域上傳。有很多小伙伴也在網上公布了跨域上傳的解決辦法。可能在各自的開發環境下都是成功的。但是對於我說,只能另辟蹊徑了。
這里參考了以為小伙伴的建議,對我說受益匪淺 這是網址鏈接 :http://www.cnblogs.com/hpnet/p/6290452.html。
這是一種解決跨域上傳的辦法:
但是在我這邊是不可以使用這種方法,前端界面不能使用php進行數據的轉換和傳遞。【具體原因也說不清】。只能考慮修改js進行圖片上傳
也就是在訪問這個地址的時候圖片是在后台上傳成功的。但是返回來的json數據是無法接收的。問題就在這里。出現報錯的界面如下:
在上傳操作過程中與之有關的js是dialog/image/image.js文件,通過實際測試知道一個問題就是 只要一個json數組賦值給變量 r 那所有的問題解決了:
第一想法就是使用ajax異步請求數據。重新請求一次數據。在圖片上傳的時候 把返回的json數據存入到session中。在執行js文件的時候用ajax跨域請求某一個接口,並返回數據。
也就有了下面js文件的配置:
對應的接口【上面有顯示】非常注意jsonp的請求格式:
實際過程中 js調試是個很大的問題,異步返回的數據有延遲效應,必須把對應的操作放到success的方法中:通過斷點調試一個一個的找。才發現問題。
還有一個問題就是一定要搞清楚實際的js代碼流程順序。很重要,要分清代碼之間的邏輯關系。
還有一個問題是:最初的想法是ajax請求接口返回數據直接賦值給變量r即可。把實際邏輯操作放到sucess中,。但是實際的結果並不是正常的。那么思考問題的方向應該是 數據拿到了,那么只能是success里面的功能操作出了問題。要找到問題的症結所在。使用瀏覽器自帶的斷點調試。一步步的走下去。問題自然會出來。
到這個時候。再去進行跨域圖片上傳。完美。
熬了今天,在大神的幫助下完美解決。學到了不少。。。。。