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

在您的 jsbin 中，您正在加载 codemirror 文件，http而不是https因此它们被阻止。

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

我不得不改变两者，js并被css加载过来https。

于 2016-12-30T16:24:27.273 回答
0

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

有几种形式的 url，应该按以下顺序首选它们：

  • 文档相关 url ( app.js)
  • 根相对 url ( /app.js)
  • 协议相关的 url ( //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
于 2016-12-30T16:44:15.073 回答