让 Epiceditor 在 Ruby on Rails 中工作答案

【问题标题】：Getting Epiceditor to work in Ruby on Rails让 Epiceditor 在 Ruby on Rails 中工作
【发布时间】：2017-07-11 22:21:40
【问题描述】：

我正在尝试在基本的 Ruby on Rails 应用程序中使用史诗编辑器。我按照网页http://epiceditor.com/# 上的说明进行操作。史诗编辑器窗口由于某种原因没有显示...谢谢

这就是我在 edit.html.erb 视图上设置代码的方式：

```

<head>
 <meta charset="utf-8">
   <script src="js/epiceditor.js"></script>
</head>
<body>
  <div id="epiceditor"></div>
</body>
<script type="text/javascript">
  var editor = new EpicEditor().load();
</script>

<h1>Edit Wiki</h1>

  <%= form_for @mywiki do |f| %>
    <div>
        <%= f.label :title %>
        <%= f.text_field :title, :size => 75 %>
    </div>
    <div>
        <%= f.label :body %>
        <%= f.text_area :body, :rows => "35", :cols => "75" %>
    </div>

    <%= f.submit %>

<% end %>

```

【问题讨论】：

标签： ruby-on-rails epiceditor

【解决方案1】：

是否添加了一些有效的 CSS？

从史诗编辑器的网站添加 css 后，我得到了它的工作。

【讨论】：

我没有添加任何 CSS。你可以链接你看到添加CSS的地方吗？谢谢
它在小提琴中。在 Epic Editor 网站上，使用您喜欢的浏览器的 webdeveloper，它们会列在“来源”下。编辑：对不起，我喜欢小提琴错了。一旦epiceditor.com再次上线，检查链接css的源代码或html源代码
检查这个：github.com/OscarGodson/EpicEditor/tree/develop/epiceditor/…

【解决方案2】：

Ruby - 2.3.0
导轨 - 4.2.5
引导程序 3 gem 'bootstrap-sass', '~> 3.3.6'
EpicEditor gem 'epic-editor-rails'

rails_app_root$ bundle

更新/app/assets/stylesheets/application.scss

@import 'base/epiceditor';
//@import 'preview/bartik';
//@import 'preview/github';
//@import 'preview/preview-dark';
//@import 'editor/epic-dark';
//@import 'editor/epic-light';

// 此处显示仅供参考，只是为了指示我已先导入 EpicEditor 主题。 @import "引导链轮";
@import "引导"；

注意我刚刚导入了base/epiceditor，其他的都被注释掉了。原因是他们覆盖了不需要的 Bootstrap 样式。

在我添加的

元素下的部分/app/views/.../_form.html.haml 上，我添加了以下内容：

#myTextAreaContainer(style='display: none')
  = text_area_tag("body", myText, id: 'myTextArea')

.form-group
  = label_tag(nil, "My Text", class: "col-md-3 control-label")
  #myTextEpicEditor.col-md-7

在我的节目中/app/views/..../show.html.haml

.row
  .col-md-10
    #myDetailsView.form-horizontal

      %div(style='display: none')
        = text_area_tag("myText", @my_text, id: 'viewMyTextTextArea')

      .form-group
        = label_tag(nil, "My Text", class: "col-sm-3 control-label")
        #viewMyTextBodyEpicEditor.col-sm-6

在 /app/assets/javascripts/custom.js 中

  (function ($) {

    isEmptyValue = function(value) {
      return ( undefined === value || null === value || "" === value || ("" === value.replace(/[\n\r]/g, '')) )
    }

    myForm = function() {
      return $("form#myForm");
    };

    // Note: EpicEditor requires just the id value not a jquery selector
    // like "#myTextEpicEditor"
    myFormEpicEditorContainerId = function() {
      return "myTextEpicEditor";
    }

    // Note: EpicEditor requires just the id value not a jquery selector
    // like "#myTextArea"
    myFormTextAreaId = function() {
      return "myTextArea";
    }

    myFormMyTextLocalStorageName = function() {
      return "myTextEpicEditorLocalStorage";
    }

    myFormMyTextBodyFileName = function() {
      return "myTextFile";
    }

    myFormEpicEditorOpts = function() {
      var myTextEpicEditorOpts = {
        container: myFormEpicEditorContainerId(),
        textarea: myFormTextAreaId(),
        localStorageName: myFormMyTextLocalStorageName(),
        file: {
          name: myFormMyTextBodyFileName(),
          defaultContent: '',
          autoSave: 100
        },
      };
      return myTextEpicEditorOpts;
    }

    loadEpicEditorOnMyForm = function() {
      var selector = "#" + myFormEpicEditorContainerId();
      if ($(selector).length == 0) {
        return;
      }

      var myFormEpicEditorInstance = new EpicEditor(myFormEpicEditorOpts()).load();
    };

    bindClickEventOnSaveBtnOnMyForm = function() {
      var saveBtnObj = $("#saveBtn");

      if (saveBtnObj.length == 0) {
        return;
      }

      saveBtnObj.off("click").on("click", function(event) {
        var myFormObj = myForm();

        var myFormEpicEditorInstance = new EpicEditor(myFormEpicEditorOpts());

        // console.log(myFormEpicEditorInstance);

        var myText = myFormEpicEditorInstance.exportFile(myFormMyTextBodyFileName(), 'text');

        // console.log(myText);

        if (isEmptyValue(myText)) {
          alert("Please enter text");
          event.stopPropagation();
          return false;
        }

        myFormObj.submit();
      });
    };

    // Used for rendering EpicEditor in ONLY preview mode with only 
    // full screen button and when the epic editor is switched to 
    // full screen mode it hides the editor pane. 
    displaySavedMyTextPreview = function() {
      var myDetailsView = $("#myDetailsView")

      if (myDetailsView.length == 0) {
        return;
      };

      var viewMyTextEpicEditorOpts = {
        container: 'viewMyTextBodyEpicEditor',
        textarea: 'viewMyTextTextArea',
        button: {
          preview: false,
          edit: false,
          fullscreen: true,
          bar: "auto"
        },
      };

      var viewMyTextEpicEditorInstance = new EpicEditor(viewMyTextEpicEditorOpts);
      viewMyTextEpicEditorInstance.load(function() {
        console.log("loaded");
        viewMyTextEpicEditorInstance.preview();
      });

      viewMyTextEpicEditorInstance.on('fullscreenenter', function() {
        // console.log("full screen enter");
        $(viewMyTextEpicEditorInstance.getElement('editorIframe')).hide();
      });
    };


  }) (jQuery);

  var ready;

  ready = function() {
    loadEpicEditorOnMyForm();
    bindClickEventOnSaveBtnOnMyForm();
    displaySavedMyTextPreview();
  };

  $(document).ready(ready);
  $(document).on('page:load', ready);

注意

上面显示的代码是工作代码。如果它对您不起作用，请尝试查找在键入元素选择器等时所犯的任何错误。
我假设 jQuery 在应用程序中可用。
虽然我没有尝试过，但您可以通过像我演示的那样传递自定义选项在同一页面上包含多个 EpicEditor。

【讨论】：