Code Mirror 无法在 Heroku Rails 6 应用程序上正确呈现

Question

我最近将代码镜像编辑器添加到我的 rails 6 应用程序中。我能够在我的本地环境 (ubuntu 18.04) 上使一切正常工作，但是当我将应用程序部署到 heroku 时，代码镜像编辑器呈现的实际文本编辑区域远低于 div。它似乎也用 x 填充它。 here是它的截图。靠近顶部的x实际上是未显示的顶部编辑器的一部分，下面的x是图中主编辑器的一部分。

这是我的 application.js 文件：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import { autocompleteExport } from '../custom/autocomplete';
import { initialize } from '../custom/editor';
import { formatToc } from '../custom/page_display';

window.jQuery = $;
window.$ = $;

$(document).on("turbolinks:load", autocompleteExport.categories)
$(document).on("turbolinks:load", autocompleteExport.search)
$(document).on("turbolinks:load", autocompleteExport.admins)
$(document).on("turbolinks:load", initialize)
$(document).on("turbolinks:load", formatToc)

这是初始化编辑器的编辑器文件：

import CodeMirror from 'codemirror/lib/codemirror.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/markdown/markdown.js'

function initialize(){
    let textArea = document.getElementById('page_edit_content')
    let editor = document.getElementById('content-editor')

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
                                                    lineWrapping: true,
                                                    mode: "markdown",
                                                });

        contentEditor.display.wrapper.id = "content-editor"
    }

    textArea = null
    editor = null

    textArea = document.getElementById('page_edit_summary')
    editor = document.getElementById("summary-editor")

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
            lineWrapping: true,
            mode: "markdown",
        });

        contentEditor.display.wrapper.id = "summary-editor"
    }

    textArea = null
    editor = null

    textArea = document.getElementById('page_content')
    editor = document.getElementById("new-content-editor")

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
            lineWrapping: true,
            mode: "markdown",
        });

        contentEditor.display.wrapper.id = "new-content-editor"
    }

    textArea = null
    editor = null

    textArea = document.getElementById('page_summary')
    editor = document.getElementById("new-summary-editor")

    if(textArea && !editor){
        var contentEditor = CodeMirror.fromTextArea(textArea, {
            lineWrapping: true,
            mode: "markdown",
        });

        contentEditor.display.wrapper.id = "new-summary-editor"
    }
}

export {initialize}

最后是有问题的观点之一：

<% @page_title = "New Page" %>

<div class="container form-container">
  <%= form_for @page, url: world_pages_path(params[:world_name]), html: {style: "width: 100%"} do |f| %>
    <%= render 'shared/error_messages', errors: flash[:errors] %> 
    <div class="form-group">
      <%= f.label :title %>
      <%= f.text_field :title, autofocus: true, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :summary %>
      <%= f.text_area :summary, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :content %>
      <%= f.text_area :content, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.submit "Create!", class: "btn btn-primary" %>
    </div>
    <% if params[:category] %>     
    <%= hidden_field_tag :category, params[:category] %>
    <% end %>
  <% end %>
</div>

对于可能导致此问题的原因，我几乎一头雾水。我们将不胜感激。

编辑：

通过我的浏览器 devtools 查看了一下，看起来问题可能来自 css 没有正确加载到我的 editor.js 文件中，这是我导入 css 代码镜像文件。

edit-2:

当我从 editor.js 文件中删除 css import 语句时，我在开发中得到了相同的行为，所以我确定这就是问题所在。如果有人知道从节点模块导入样式的正确方法，那将非常有帮助

Answer 1

如果以后有人遇到这样的事情，我可以找到答案。

这个问题源于我对 webpack 的误解。

我直接将 css 从节点模块导入到 editor.js 文件中。我仍然不是 webpack 专家，所以我不能说为什么这在本地有效，但它没有正确设置 css 文件由 webpack 在生产中编译。

解决方法是在 app/javascript/src 中创建一个 application.scss 文件。我在这个文件中添加了 @import 'codemirror/lib/codemirror.css';

这样做之后，我将 import '../src/application.scss' 添加到我的 application.js 文件中，以便 webpack 知道编译 css.

最后，我将 <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 添加到我的 application.html.erb 布局文件中，该文件从编译文件中提取 css。

Code Mirror 无法在 Heroku Rails 6 应用程序上正确呈现

Code Mirror not rendering correctly on Heroku Rails 6 app

javascript

ruby

codemirror

webpack

ruby-on-rails-6