在JSBin中運行ui-codemirror

Question

我想將此代碼在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']);

Answer 1

在您的jsbin中，您正在通過http而不是https加載codemirror文件，因此它們被阻止了。

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

我必須更改js和css才能通過https加載。

Answer 2

如果您的網頁是通過HTTPS加載的，則瀏覽器通常會拒絕也通過HTTP加載活動內容資產（javascript， .woff字體）。 （這將在瀏覽器的開發控制台中顯示為錯誤。）

url有幾種形式，應按以下順序首選它們：

文檔相對網址（ app.js ）
相對根網址（ /app.js ）
相對協議網址（ //codemirror.net/lib/codemirror.js ）
完全限定的網址（ https://codemirror.net/lib/codemirror.js ）

對於同時支持HTTP和HTTPS的服務器上的第三方資產，將為我們提供相對於協議的url。 這種類型的url使用所使用頁面的任何協議（ HTTP:或HTTPS: 。 （這種類型的url的一個小問題是，當瀏覽器嘗試使用FILE:協議加載第三方資源時，直接從文件系統加載頁面時，它們會失敗。要解決此問題，應始終結合進行開發使用本地或其他Web服務器）。

您所包含的第三方資產的服務器同時支持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

在JSBin中運行ui-codemirror

問題描述

2 個解決方案

解決方案1
0 2016-12-30 16:24:27

解決方案2
0 已采納 2016-12-30 16:44:15

在JSBin中運行ui-codemirror

問題描述

2 個解決方案

解決方案1 0 2016-12-30 16:24:27

解決方案2 0 已采納 2016-12-30 16:44:15

解決方案1
0 2016-12-30 16:24:27

解決方案2
0 已采納 2016-12-30 16:44:15