为什么 CodeMirror JavaScript 没有定义 Uncaught ReferenceError答案

【问题标题】：Why CodeMirror JavaScript is not defined Uncaught ReferenceError为什么 CodeMirror JavaScript 没有定义 Uncaught ReferenceError
【发布时间】：2020-12-25 21:44:08
【问题描述】：

我在这里没有找到这个错误的答案。

我有一个 Ruby on Rails 网站，我想添加像 CodeMirror 这样的代码编辑器。

我做的第一件事是在assets/javascript 文件夹中添加codemirror.js。其次，我在assets/stylesheets 中添加了codemirror.css：

       <!DOCTYPE html>
<html>
  <head>
    <title>xxxxx</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_pack_tag 'application' %>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link  type="text/stylesheet" rel="stylesheet" href="stylesheets/codemirror.css">
    <script type="text/javacsript" src="/assets/javascripts/codemirror.js" > </script>
    <script type="text/javacsript" src="mode/javascripts/javascript.js"></script>
  </head>

我将此 JavaScript 代码添加到我的文本字段中

<%= form_for [@unit, @attempt] do |f| %>
    <%= f.text_area :body, class: "editor"%>
    <%= f.submit "Run"%>
  <% end %>
  <script>
   $(document).ready(function(){
    var code = $(".editor")[0];
    var editor = CodeMirror.fromTextArea(code,{
      lineNumbers : true
    })
   })
  </script>

然后我在控制台中收到这些错误

jquery-3.3.1.js:3827 Uncaught ReferenceError: CodeMirror is not defined
    at HTMLDocument.<anonymous> (9:88)
    at mightThrow (jquery-3.3.1.js:3534)
    at process (jquery-3.3.1.js:3602)

我该如何解决这个问题？

【问题讨论】：

它似乎没有找到文件。所有这些文件真的都在units 目录中吗？
@RockwellRice 不，不是！只是带有这个
是的，所以我想修复它用来尝试查找这些文件的路径，它应该可以工作
我修复了它，但我仍然遇到同样的错误
你能发布布局文件吗？是否在将 codemirror js 包含到文件中之前调用了该脚本？

标签： javascript ruby-on-rails codemirror

【解决方案1】：

根据https://codemirror.net/doc/manual.html doc，您还需要添加 codemirror.js。

<script src="lib/codemirror.js"></script>

你添加了两次 jquery 而不是 codemirror.js

如果您添加了 codeirror.js，那么您应该检查浏览器中的网络选项卡。 codemirror.js 有 404 吗？如果是，那么您应该为 codemirror.js 使用正确的路径。您应该在<script src="codemirror.js"></script> 文件之后添加另外 1 件事 <script> your code</script> 代码。

更新

创建文件/mode/javascripts/custom.js

  $(document).ready(function(){
    var code = $(".editor")[0];
    var editor = CodeMirror.fromTextArea(code,{
      lineNumbers : true
    })
   })

在主布局文件中导入您的文件。

<!DOCTYPE html>
<html>
  <head>
    <title>xxxxx</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_pack_tag 'application' %>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link  type="text/stylesheet" rel="stylesheet" href="stylesheets/codemirror.css">
    <script type="text/javacsript" src="/assets/javascripts/codemirror.js" > </script>
    <script type="text/javacsript" src="/mode/javascripts/javascript.js"></script>
    <script type="text/javacsript" src="/mode/javascripts/custom.js"></script>
  </head>
...
</html>

您的 ERB 文件

<%= form_for [@unit, @attempt] do |f| %>
    <%= f.text_area :body, class: "editor"%>
    <%= f.submit "Run"%>
<% end %>

【讨论】：

我像这样添加它但不确定如何更正路径，因为我遇到了同样的错误
在浏览器的网络选项卡中是否有codemirror.js的任何状态404？
这意味着您正在使用不同的路径。在 Rails 中你应该使用 <script src="/assets/javascript/codemirror.js" > </script>
同样的错误 jquery-3.3.1.js:3827 Uncaught ReferenceError: CodeMirror is not defined
app -> assets -> javascripts -> codemirror.js 下的文件