0

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']);
4

2 に答える 2

0

ページが HTTPS 経由で読み込まれる場合、ブラウザは通常、アクティブなコンテンツ アセット (JavaScript、.woffフォント) を HTTP 経由で読み込むことも拒否します。(これは、ブラウザーの開発コンソールにエラーとして表示されます。)

URL にはいくつかの形式があり、次の順序で優先する必要があります。

  • ドキュメント相対 URL ( app.js)
  • ルート相対 URL ( /app.js)
  • プロトコル相対 URL ( //codemirror.net/lib/codemirror.js)
  • 完全修飾 URL ( 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
于 2016-12-30T16:44:15.073 に答える
0

あなたの jsbin では、http代わりにcodemirror ファイルをロードhttpsしているため、ブロックされています。

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

両方を変更する必要がjsあり、cssにロードする必要がありましたhttps。

于 2016-12-30T16:24:27.273 に答える