ruby-on-rails - 让 Epiceditor 在 Ruby on Rails 中工作

Question

我正在尝试在基本的 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 %>

```

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

Ruby - 2.3.0
Rails - 4.2.5
Bootstrap 3 gem 'bootstrap-sass', '~> 3.3.6'
EpicEditorgem 'epic-editor-rails'

rails_app_root$ bundle

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

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

// 这里显示的只是为了指示我首先导入了 EpicEditor 主题以供参考。@import "引导链轮";
@import "引导程序";

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

在 <form> 元素下的部分表单上/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。

ruby-on-rails - 让 Epiceditor 在 Ruby on Rails 中工作

2 回答 2

Related

Reference