Question

我正在尝试在rails项目中使用EpicEditor，以允许用户查看带有他们编辑的wiki标记的实时预览。到目前为止，我已成功地将EpicEditor加载并显示在我的wiki编辑页面上，但在创建实时预览方面没有取得任何成功。我用https://github.com/zethussuen/epic-editor-rails来设置东西。我如何自定义我的epiceditor.js.erb文件才能实现这一目标？到目前为止，这是我的代码：

维基/ 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 &ldquo;#{ @wiki.title }&rdquo;
            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();

有关详细信息，请参阅我正在处理https://github.com/jlquaccia/blocipedia/tree/extra-credit-user-stories-3-markdown-preview

的分支

EpicEditor实时预览导航

0 个答案: