I'm trying to use EpicEditor in a rails project to allow users to view a live preview with markdown of wikis that they edit. So far I have been successful in getting EpicEditor to load and appear on my wikis edit page but have not had any success in creating a live preview. I used https://github.com/zethussuen/epic-editor-rails to get things setup. How do I have to customize my epiceditor.js.erb file in order to achieve this? Here is my code so far:
wikis/edit.html.haml:
%h1 Edit Wiki
.row
.col-md-8
= form_for @wiki do |f|
.form-group
= f.label :title
= f.text_field :title, class: 'form-control', placeholder: "Enter wiki title"
.col-md-6
= form_for @wiki do |f|
.form-group#epiceditor
= f.label :edit
= f.text_area :body, rows: 8, class: 'form-control', placeholder: "Enter wiki body"
.col-md-6
= form_for @wiki do |f|
.form-group#epiceditor
= f.label :preview
= f.text_area :body, rows: 8, class: 'form-control', placeholder: "Enter wiki body"
.col-md-8
= form_for @wiki do |f|
- if current_user.role == 'admin' || (current_user.role == 'premium' && @wiki.user == current_user)
= render 'wikis/form', f: f
- if current_user.role == 'admin' || (@wiki.private == true && @wiki.user == current_user)
.form-group
%h5
Add/Remove Collaborators to the
%em “#{ @wiki.title }”
wiki (Showing all users)
%small
.js-collaborators-count
Currently #{ pluralize(@wiki.collaborators.count, 'collaborator') } on this wiki.
-create_collection_column(@users, "Name") do |user|
= user.name
-create_collection_column(@users, "Email") do |user|
= user.email
-create_collection_column(@users, "Give Access") do |user|
- if collab = user.collaborators.find_by(wiki_id: @wiki.id)
= link_to "Remove", wiki_collaborator_path(@wiki, collab), method: :delete, remote: true, id: user.id
- else
= link_to "Add", wiki_collaborators_path(@wiki, user_id: user.id), method: :post, remote: true, id: user.id
.form-group
= f.submit "Update", class: 'btn btn-success mt_10'
:javascript
var editor = new EpicEditor().load();
For more information, here is the branch I am working on https://github.com/jlquaccia/blocipedia/tree/extra-credit-user-stories-3-markdown-preview