如何上傳圖像中使用Angularjs和的NodeJS

Question

一些研究，我能夠但是將數據發送到服務器，並得到響應後的CKEditor，對響應我收到錯誤

Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match. 

和

Uncaught DOMException: Blocked a frame with origin "http://localhost:3001" from accessing a cross-origin frame. 

如何在ckeditor中的angularjs部分實現此檢查以獲取url並設置url中的URL：

AngularJs：localhost：3001

的index.html

<script> 
     window.addEventListener("message", receiveMessage, false); 

     function receiveMessage(event) 
     { 
      var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object. 
      if (origin !== "http://localhost:3010" || origin !== "http://example.com") 
       return; 

      // ... 
     } 
    </script> 

tmpl.html

<div id="a" ckeditor="vm.options" ng-model="vm.textInput" ready="vm.onReady()"></div> 

controller.js

where API_ENDPOINT = localhost:3010 
vm.options = { 
      language: 'en', 
      allowedContent: true, 
      entities: false, 
      filebrowserImageUploadUrl : API_ENDPOINT.url+'/ckeditor/pictures' 
     }; 
     vm.onReady = function() { 
      // ... 
     }; 

服務器側：本地主機：3010

editor.js以下路線/ckeditor/pictures

var express = require('express'); 
var router = express.Router(); 


router.post('/', function (req, res, next) { 
    console.log("got it"); 
    var path = "http://mytestplan.com/img/256/pdb.png"; 
var data = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(1,path,\"File uploaded\");</script>" 
res.writeHeader(200, {"Content-Type": "text/html", }); 
html = ""; 
html += "<script type=\"text/javascript\">"; 
html += " var funcNum = 1;"; 
html += " var url = \"" + path + "\";"; 
html += " var message = \"Uploaded file successfully\";"; 
html += ""; 
html += " window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);"; 
html += "</script>"; 
console.log(html); 
res.write(html); 
res.end(); 

}); 

module.exports = router; 

app。JS

var allowCrossDomain = function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}; 
app.use(allowCrossDomain); 

來源如下：

• https://alfrednutile.info/posts/50
• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• https://github.com/lemonde/angular-ckeditor
• SecurityError: Blocked a frame with origin from accessing a cross-origin frame

截圖事件的序列：

在當地

選擇在CKEditor的圖片上傳選項卡，選擇圖像點擊發送到服務器從服務器獲取響應並沒有錯誤，直到又

後

在點擊圖像信息後， n的CKEditor的它應該顯示的圖像的URL文本框中，

當我再次點擊上傳選項卡，服務器響應與腳本標記的iframe從服務器發送，然後我得到下面的錯誤

Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match 

而且它不是讓我關閉彈出

Answer 1

許多開發商的NodeJS有同樣的問題。如何通過CKEditor和Nodejs上傳和瀏覽圖片或文件。由於新ckeditor不提供像它的前任Fckeditor一樣的免費文件/圖像上傳器。

所以這個解決方案將幫助他們非常快速地將Ckeditor與文件/圖像上傳選項一起直接集成到Nodejs中。

我用CkEditor和nodejs圖片上傳器和瀏覽器免費創建了簡單的解決方案。目前沒有免費版本。

Github repository for this solution