运行 ui-JSBin中的codemirror

Question

我想搬家this code in Plnkr to JSBin。它不起作用，DevTools 显示 Error: ui-codemirror needs CodeMirror to work... (o rly?)。

看来Plnkr有一些JSBin没有的依赖管理。我想知道 Plnkr 在幕后做了什么，运行 JSBin 中的这段代码，有谁知道如何修改链接和源使其工作？

<!DOCTYPE html>
<html ng-app="x">    
  <head>
    <meta charset="utf-8" />
    <title>UI.Codemirror : demo </title>

    <!-- Le css -->
    <link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
    <link rel="stylesheet" type="text/css" href="http://codemirror.net/theme/twilight.css"/>
  </head>
  <body>

    <!-- Le content... -->
    <section>
      <div ui-codemirror="{
          lineNumbers: true,
          theme:'twilight',
          readOnly: 'nocursor',
          lineWrapping : true,
          mode: 'xml'
        }" >&lt;html style=&quot;color: green&quot;&gt;
        &lt;!-- this is a comment --&gt;
        &lt;head&gt;
        &lt;title&gt;HTML Example&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
        The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
        I mean&amp;quot;&lt;/em&gt;... but might not match your style.
        &lt;/body&gt;
        &lt;/html&gt;</div>
    </section>

    <!-- Le vendor... -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <script src="http://codemirror.net/mode/xml/xml.js"></script>
    <script src="https://rawgithub.com/angular-ui/ui-codemirror/bower/ui-codemirror.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

JavaScript:

var app = angular.module('x', ['ui.codemirror']);

Answer 1

在您的 jsbin 中，您正在通过 http 而不是 https 加载代码镜像文件，因此它们被阻止了。

https://gist.github.com/anonymous/2c0c41530b3da4a44b301b36bee922f6

我必须同时更改 js 和 css 才能加载到 https。

Answer 2

如果您的页面是通过 HTTPS 加载的，浏览器通常会拒绝同时通过 HTTP 加载活动内容资产（javascript、.woff 字体）。（这将在浏览器的开发控制台中显示为错误。）

url 有多种形式，应按以下顺序优先选择：

文档相关 url (app.js)
root 相对 url (/app.js)
协议相关 url (//codemirror.net/lib/codemirror.js)
完全合格url (https://codemirror.net/lib/codemirror.js)

对于支持 HTTP 和 HTTPS 的服务器上的第三方资产，这为我们提供了协议相关的 urls。这种类型的 url 使用页面使用的任何协议（HTTP: 或 HTTPS:）。（这种 url 的一个小问题是当浏览器尝试使用 FILE: 协议加载第三方资源时，它们直接从文件系统加载页面时会失败。为了解决这个问题，开发应始终与本地或其他网络服务器一起完成。）

您包含的第三方资产的服务器同时支持 HTTP 和 HTTPS，因此对这些资产使用相对协议 urls 是首选：

//codemirror.net/lib/codemirror.css
//codemirror.net/theme/twilight.css
//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js
//codemirror.net/lib/codemirror.js
//codemirror.net/mode/xml/xml.js
//rawgithub.com/angular-ui/ui-codemirror/bower/ui-codemirror.min.js

运行 ui-JSBin中的codemirror

Run ui-codemirror in JSBin

javascript

package-managers

jsbin

ui-codemirror

plnkr.co