weseek__growi/lib/views/_form.html

{% if req.form.errors %}
<div class="alert alert-danger">
  <ul>
  {% for error in req.form.errors %}
    <li>{{ error }}</li>
  {% endfor %}

  </ul>
</div>
{% endif %}
<div id="form-box" class="row">
  <form action="{{ path }}/edit" id="page-form" method="post" class="col-md-6">
    <textarea name="pageForm[body]" class="form-control form-body-height" id="form-body">{% if pageForm.body %}{{ pageForm.body }}{% elseif not revision.body %}# {{ path|path2name }}{% else %}{{ revision.body }}{% endif %}</textarea>

    <input type="hidden" name="pageForm[format]" value="markdown" id="form-format">
    <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(revision._id.toString()) }}">
    <div class="form-submit-group form-group form-inline">
      {#<button class="btn btn-default">
        <i class="fa fa-file-text"></i>
        ファイルを追加 ...
      </button>#}

      <div class="pull-right form-inline">
        <select name="pageForm[grant]" class="form-control">
          {% for grantId, grantLabel in consts.pageGrants %}
          <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %}>{{ grantLabel }}</option>
          {% endfor %}
        </select>
        <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
      </div>
    </div>
  </form>
  <div class="col-md-6 hidden-sm hidden-xs">
    <div id="preview-body" class="wiki preview-body">
    </div>
  </div>
  <div class="file-module hidden">
  </div>
  <script type="text/javascript">
  $(function() {
    // preview watch
    var originalContent = $('#form-body').val();
    var prevContent = "";
    var watchTimer = setInterval(function() {
      var content = $('#form-body').val();
      if (prevContent != content) {
        var renderer = new Crowi.renderer($('#form-body').val(), $('#preview-body'));
        renderer.render();

        prevContent = content;
      }
    }, 500);

    // tabs handle
    $('textarea#form-body').on('keydown', function(event){
      var self  = $(this)
          start = this.selectionStart,
          end   = this.selectionEnd
          val   = self.val();

      if (event.keyCode === 9) {
        // tab
        event.preventDefault();
        self.val(
          val.substring(0, start)
          + '    '
          + val.substring(end, val.length)
        );
        this.selectionStart = start + 4;
        this.selectionEnd   = start + 4;
      } else if (event.keyCode === 27) {
        // escape
        self.blur();
      }
    });

    var unbindInlineAttachment = function($form) {
      console.log('unbind inlineattach.');
      $form.unbind('.inlineattach');
    };
    var bindInlineAttachment = function($form, attachmentOption) {
      console.log('bind inline with options:', attachmentOption);
      var $this = $form;
      var editor = createEditorInstance($form);
      var inlineattach = new inlineAttachment(attachmentOption, editor);
      $form.bind({
        'paste.inlineattach': function(e) {
          inlineattach.onPaste(e.originalEvent);
        },
        'drop.inlineattach': function(e) {
          e.stopPropagation();
          e.preventDefault();
          inlineattach.onDrop(e.originalEvent);
        },
        'dragenter.inlineattach dragover.inlineattach': function(e) {
          e.stopPropagation();
          e.preventDefault();
        }
      });
    };
    var createEditorInstance = function($form) {
      var $this = $form;

      return {
        getValue: function() {
          return $this.val();
        },
        insertValue: function(val) {
          inlineAttachment.util.insertTextAtCursor($this[0], val);
        },
        setValue: function(val) {
          $this.val(val);
        }
      };
    };

    var $inputForm = $('textarea#form-body');
    if ($inputForm.length > 0) {
      var pageId = $('#content-main').data('page-id') || 0;
      var attachmentOption = {
        uploadUrl: '/_api/attachment/page/' + pageId,
        extraParams: {
          path: location.pathname
        },
        progressText: '(Uploading file...)',
        urlText: "\n![file]({filename})\n"
      };

      attachmentOption.onFileUploadResponse = function(res) {
        var result = JSON.parse(res.response);
        console.log("onFileUploadResponse", result);

        if (result.status && result.pageCreated) {
          var page = result.page,
            pageId = page._id;

          $('#content-main').data('page-id', page._id);
          $('#page-form [name="pageForm[currentRevision]"]').val(page.revision)

          unbindInlineAttachment($inputForm);

          attachmentOption.uploadUrl = '/_api/attachment/page/' + pageId,
          bindInlineAttachment($inputForm, attachmentOption);
        }
        return true;
      };

      bindInlineAttachment($inputForm, attachmentOption);
    }

    $('textarea#form-body').on('dragenter dragover', function() {
        $(this).addClass('dragover');
      });
    $('textarea#form-body').on('drop dragleave dragend', function() {
        $(this).removeClass('dragover');
      });
  });


  </script>
</div>