如何使用Angularjs和NodeJs在ckeditor中上传图像

Question

经过一些研究后，我能够将数据发送到服务器并获得响应，但是在响应时我收到错误

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

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 () {
            // ...
        };

服务器端：localhost：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：阻止具有原点的帧访问跨源帧

事件序列截图：

在ckeditor中选择图像上传选项卡并从本地选择图像

点击发送到服务器后，从服务器获取响应，直到没有错误

点击ckeditor中给出的图片信息，它应该在文本框中显示图片网址，

当我再次单击上传选项卡时，服务器响应在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存储库