rich.html.erb

<link href="/lib/woofmark/dist/woofmark.min.css" rel="stylesheet">
<link href="/lib/horsey/dist/horsey.min.css" rel="stylesheet">
<link href="/lib/bootstrap-tokenfield/dist/css/tokenfield-typeahead.min.css" rel="stylesheet">
<link href="/lib/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">

<!-- required for TagsModule -->
<script src="/lib/typeahead.js/dist/typeahead.jquery.js"></script>
<script src="/lib/typeahead.js/dist/bloodhound.js"></script>
<script src="/lib/bootstrap-tokenfield/dist/bootstrap-tokenfield.js"></script>

<script src="/lib/typeahead.js/dist/bloodhound.js"></script>
<script src="/lib/bootstrap-tokenfield/dist/bootstrap-tokenfield.js"></script>
<link href="/lib/publiclab-editor/dist/PublicLab.Editor.css" rel="stylesheet">
<script src="/lib/publiclab-editor/dist/PublicLab.Editor.js"></script>

<link href="/lib/publiclab-editor/dist/PublicLab.Editor.css" rel="stylesheet">

<script src="/lib/publiclab-editor/dist/PublicLab.Editor.js"></script>

<div class="pl-editor">

  <div class="ple-header">

    <h1>Share</h1>
    <p><i>Or use the <a target="_blank" href="?<%= request.env['QUERY_STRING'] %>&legacy=true">legacy editor</a></i></p>

  </div>

  <div class="ple-content">

    <!-- errors module -->
    <div class="ple-module container">

      <div class="col-md-3"></div>
      <div class="ple-errors col-md-9"></div>

    </div>
    <!-- end errors module -->

    <!-- title module -->
    <div class="ple-module-title ple-module container">

      <div class="ple-module-guide col-md-3">
        <h2>1</h2>
      </div>

      <div class="ple-module-content col-md-9">
        <input class="form-control input-lg" type="text" placeholder="Title" value="<%= if @node then @node.title else params[:title] end %>" />
      </div>

    </div>
    <!-- end title module -->


    <!-- main_image module -->
    <div class="ple-module-main_image ple-module container">

      <div class="ple-module-guide col-md-3">
        <h2>2</h2>
      </div>

      <div class="ple-module-content col-md-9 container">
        <div class="ple-drag-drop col-md-6">
          Drag an image here to upload.
        </div>
        <div class="col-md-6 help">

          <div style="display:none;" class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
          </div>

          <p><input type="file"  accept=".png, .jpg, .jpeg" name="image[photo]" value="<% if @node && @node.main_image(:rails) %><%= @node.main_image(:rails).id %><% else %><%= params[:main_image] %><% end %>" /></p>
          <p class="ple-help"><span class="ple-help-minor">Select an optional main image for your post.</span></p>

        </div>
      </div>

    </div>
    <!-- end main_image module -->


    <!-- body module -->
    <div class="ple-module-body ple-module container">

      <div class="ple-module-guide col-md-3">
        <h2>3</h2>
      </div>

      <div class="ple-module-content col-md-9 container">
        <textarea id="text-input" class="ple-textarea form-control"><% if @node && @node.latest && @node.latest.body_rich %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
      </div>

    </div>
    <!-- end body module -->


    <!-- tags module -->
    <div class="ple-module-tags ple-module container">

      <div class="ple-module-guide col-md-3">
        <h2>4</h2>
      </div>

      <div class="ple-module-content col-md-9">
        <input class="form-control input-lg" type="text" placeholder="balloon-mapping, water-quality..." value="<% if params[:tags] || (@node && @node.tagnames) %><%= params[:tags] || @node.tagnames.join(',') %><% end %>" />
      </div>

    </div>
    <!-- end tags module -->

    <!-- multi module -->
    <!--
    <div class="ple-module-multi ple-module container">

      <div class="ple-module-guide col-md-3">
        <p>Extras</p>
      </div>

      <div class="ple-module-content col-md-9">

        <div class="btn-group">
          <a class="btn btn-lg btn-default">
            <i class="fa fa-comment-o"></i> Invite responses <i class="fa fa-caret-down"></i>
          </a>
          <a class="btn btn-lg btn-default">
            <i class="fa fa-envelope-o"></i> Event <i class="fa fa-caret-down"></i>
          </a>
          <a class="btn btn-lg btn-default">
            <i class="fa fa-map-o"></i> Map
          </a>
          <a class="btn btn-lg btn-default">
            <i class="fa fa-line-chart"></i> Chart
          </a>
          <a class="btn btn-lg btn-default">
            More <i class="fa fa-caret-down"></i>
          </a>
        </div>

      </div>

    </div>
    -->
    <!-- end multi module -->


  </div>

  <div class="ple-footer">

    <div class="ple-menu-more" style="display:none;">
      <b>History</b>
      <div class="ple-history">
      </div>
      <hr />
      <!--
      <div class="form-control input-md ple-history">
        <option selected value="">recent edits</option>
      </div>
      -->
  </div>

    <button class="btn btn-lg btn-default btn-more">...</button>

    <span> &nbsp; By publishing, you agree to <a href="https://publiclab.org/licenses">open source your work</a><span class="hidden-xs"> so that others may use it.</span></span>

    <button class="ple-publish btn btn-lg btn-primary pull-right disabled"><% if controller.action_name == "edit" && @node.status == 3 %>Save<% else %>Publish<% end %></button>
    <span class="ple-help pull-right">
      <% if controller.action_name != "edit" && !current_user.first_time_poster %>
        <span id="newOpts" style="display: inline-block;">
        <span id="text" style="display: none; color:red;">
          Others won't see your post yet
          (<a href="https://publiclab.org/draft-feature" target="_blank">?</a>) &nbsp; &nbsp;</span>
          <span class="checkbox">
            <label>
              <input type="checkbox" id="myCheck" onclick="draftCheck()" />
              Save as draft
            </label> |
          </span>
          <span class="ple-steps-left">2</span>
          <span class="hidden-xs"> steps left</span>
        </span>
      <% end %>
    </span>

  </div>

</div>
<script>

  var editor;

  (function() {

    editor = new PL.Editor({

      data: {
        token: $('meta[name="csrf-token"]').attr('content')
      },

      textarea:    $('.ple-textarea')[0],

      <% if @main_image %>
        mainImageUrl:   '<%= @main_image %>',
      <% end %>

      <% if params[:action] == 'edit' %>
        destination: '/notes/update/<%= @node.id %>?rich=true',
      <% else %>
        destination: '/notes/create?rich=true',
      <% end %>

      <% if params[:redirect] == 'question' %>
        redirect: 'redirect',
      <% end %>

      <% if (@node && @node.errors.size > 0) && (@revision && @revision.errors.size > 0) %>
         errors: <%=raw (@node.errors.to_h.merge(@revision.errors.to_h)).to_json %>,
       <% elsif (@node && @node.errors.size > 0) %>
         errors: <%=raw (@node.errors.to_h).to_json %>,
       <% elsif (@revision && @revision.errors.size > 0) %>
         errors: <%=raw (@revision.errors.to_h).to_json %>,
       <% end %>

      format:      'publiclab',

      publishCallback: function publishCallback(response) {
        // parse and display errors!
        if (typeof response === "string") {
          if (response.substr(1, 8) == "!DOCTYPE") $('.ple-errors').html('<div class="alert alert-danger">There was an error posting. Please contact web@publiclab.org for assistance - and note that your draft is saved under the "..." menu at the lower left.</div>');
          else window.location = response;
        } else if (response && Object.keys(response).length > 0) {
          $('.ple-errors').html('<div class="alert alert-danger"></div>');
          Object.keys(response).forEach(function(key, i) {
            $('.ple-errors .alert').append('<p><b>' + key + '</b> </p>');
            $('.ple-errors .alert p:last').append(response[key].join(', '));
          });
          window.scroll(0, 0);
        }
      },

      mainImageModule: {
        uid: <%= current_user.id %><% if @node && @node.id %>,
	nid: <%= @node.id %><% end %>,
        token: $('meta[name="csrf-token"]').attr('content')
      },

      richTextModule: {
        authorsAutocomplete: false,
        tagsAutocomplete: false,
        formats: ['jpg', 'jpeg', 'png', 'gif'],
        attachmentFormats: ['csv', 'xls', 'zip', 'kml', 'kmz', 'gpx', 'lut', 'stl', 'dxf', 'txt', 'pdf', 'svg', 'doc', 'ppt', 'docx', 'bmp', 'obj', 'json']
        //formats: ['csv', 'xls', 'zip', 'kml', 'kmz', 'gpx', 'lut', 'stl', 'dxf', 'txt', 'pdf', 'svg', 'doc', 'ppt', 'docx', 'bmp', 'obj', 'json', 'jpg', 'jpeg', 'png', 'gif']
      },

      titleModule: {
        suggestRelated: true,
        fetchRelated: function(show) {
          $.getJSON("/api/srch/notes?query=" + editor.titleModule.value(), function(response) {
            /* API provides:
            {"items":[{
              "doc_id":14022,
              "doc_type":"file",
              "doc_url":"/notes/liz/03-15-2017/host-a-balloon-mapping-workshop",
              "doc_title":"Host a balloon mapping workshop",
              "doc_score":0}
            ]}
            */
            // But we need: [{ id: 1, title: 'A related post',       url: '/', author: 'eustatic'}, ... ]
            var formatted = [];
            if (response['items']) {
              response['items'].forEach(function(item) {
                var formattedItem = {};
                formattedItem.id = item.doc_id;
                formattedItem.title = item.doc_title;
                formattedItem.url = item.doc_url;
                formattedItem.author = item.doc_url.split('/')[2];
                formatted.push(formattedItem);
              });
              show(formatted);
            }
          });
        }
      },

      tagsModule: {
        remote: {
          url: "/tag/suggested/test",
          prepare: function prepareRemote(x) {
            return "/tag/suggested/" + x
          }
        }
      }
    });
  })();

  $('.legacy-button').click(function onLegacyClick(event) {
      event.preventDefault();
      window.location = "/post?legacy=true&body=" + editor.richTextModule.value() + "&tags=" + editor.tagsModule.value() + "&title=" + editor.titleModule.value();
  });

  function draftCheck() {
      var checkBox = document.getElementById("myCheck");
      var text = document.getElementById("text");
      var button = document.getElementsByClassName("ple-publish")[0];
     if (checkBox.checked === true){
          editor.data.draft = true;
         text.style.display = "inline-block";
         button.innerHTML = "Save";
      } else {
          editor.data.draft = false;
          text.style.display = "none";
         button.innerHTML = "Publish";
      }
      console.log("Draft:", editor.data.draft);
  }
</script>