在 JSBin 中运行 ui-codemirror答案

【问题标题】：Run ui-codemirror in JSBin在 JSBin 中运行 ui-codemirror
【发布时间】：2016-12-28 07:12:02
【问题描述】：

我想将this code in Plnkr 移动到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']);

【问题讨论】：

标签： javascript package-managers jsbin ui-codemirror plnkr.co

【解决方案1】：

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

url 有多种形式，应按此顺序首选：

文档相对网址 (app.js)
根相对网址 (/app.js)
相对于协议的 url (//codemirror.net/lib/codemirror.js)
完全合格的网址 (https://codemirror.net/lib/codemirror.js)

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

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

//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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：