JSBinでui-codemirrorを実行

this code in PlnkrをJSBinに移動したいと思います。それは動作しません、DevToolsはError: ui-codemirror needs CodeMirror to work... (o rly?)を示しています。JSBinでui-codemirrorを実行

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を：あなたのjsbinで

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

出典

2016-12-28 Anonymous

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

ありURLのいくつかの形式があり、彼らはこの順番で優先されるべきである。

ドキュメント相対URL（app.js）
ルート-relative 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-30 16:44:15 Ouroborus

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

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

私はhttpsの上にロードされるように、両方の、jsとcssを変更しなければなりませんでした。

出典

2016-12-30 16:24:27

JSBinでui-codemirrorを実行

答えて

関連する問題