Getting Epiceditor to work in Ruby on Rails

Question

I am trying to use epiceditor in a basic Ruby on Rails application. I followed the instructions on the webpage http://epiceditor.com/#. The epic editor window is not display

Answer 1

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

• Ran bundle from my app root:

rails_app_root$ bundle

• Updated /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';

  // This is shown here for reference just to instruct that I have imported EpicEditor themes first. @import "bootstrap-sprockets";
  @import "bootstrap";

  Note I have just imported base/epiceditor and others are commented out. The reason being they were overriding the Bootstrap styling which wasn't needed.

• On my form partial /app/views/.../_form.html.haml under <form> element following things I added:

  #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
  

• On my show view /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
  

• In /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);
  

Note

• The code shown above is working code. In case it doesn't work for you try looking for any mistakes made in typing the element selectors etc.

• I assume that jQuery is available in the application.

• Though I have not tried it but you can include multiple EpicEditors on the same page by passing in custom options like I have demonstrated.

Answer 2

is there some valid CSS added?

After adding the css from epic editor's site, I got it working.