javascript - 如何使用 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:本地主机: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: Blocked a frame with origin from accessing a cross-origin frame

按事件顺序排列的屏幕截图:

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

点击发送到服务器后，从服务器获取响应，到目前为止还没有错误

点击 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 那样提供免费的文件/图像 uploader 。

因此，这个解决方案将帮助他们非常快速地直接将 Ckeditor 与 Nodejs 以及文件/图像上传选项集成。

我使用 CkEditor 和 nodejs 图像 uploader 和浏览器免费创建了简单的解决方案。到目前为止还没有免费版本。

Github repository for this solution