Postings editor

index.html

<div class="post-editor-wrapper">
  <div class="editor-wrapper">
    <div class="toolbar">
      <div class="panel">
        <a href="#" data-command="bold" class="button"><i class="fa fa-bold"></i></a>
        <a href="#" data-command="italic" class="button"><i class="fa fa-italic"></i></a>
        <a href="#" data-command="underline" class="button"><i class="fa fa-underline"></i></a>
        <a href="#" data-command="strikeThrough" class="button"><i class="fa fa-strikethrough"></i></a>
      </div>

      <div class="panel">
        <a href="#" data-command="justifyLeft" class="button"><i class="fa fa-align-left"></i></a>
        <a href="#" data-command="justifyCenter" class="button"><i class="fa fa-align-center"></i></a>
        <a href="#" data-command="justifyRight" class="button"><i class="fa fa-align-right"></i></a>
      </div>
      
      <div class="panel">
        <a href="#" data-command="insertOrderedList" class="button"><i class="fa fa-list"></i></a>
        <a href="#" data-command="insertUnorderedList" class="button"><i class="fa fa-list-ol"></i></a>
      </div>

      <div class="panel">
        <a href="#" data-command="indent" class="button"><i class="fa fa-indent"></i></a>
        <a href="#" data-command="outdent" class="button"><i class="fa fa-outdent"></i></a>
        <a href="#" data-command="createLink" class="button"><i class="fa fa-link"></i></a>
        <a href="#" data-command="createMarker" class="button"><i class="fa fa-map-marker"></i></a>
        <a href="#" data-command="insertHorizontalRule" class="button"><i class="fa fa-cut"></i></a>
      </div>
    </div>
 
    <div class="editor" contentEditable="true">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit totam inventore ipsa eaque necessitatibus molestiae, quibusdam quo illum! Beatae eius repellat harum, modi, nihil saepe maiores impedit aut eaque iure.</div>
      <div>Reprehenderit repellendus animi voluptas, commodi explicabo deleniti, optio tenetur omnis sequi necessitatibus sunt! Labore dolorum dolore rerum error accusamus, maxime optio sed itaque possimus, suscipit numquam esse et, quos voluptate.</div>
      <div>Facilis temporibus quasi molestias atque, dolorum dolor vero? Reiciendis, minima incidunt porro atque officiis sunt, nemo est quae possimus eos eligendi numquam sequi, labore, quasi. Eveniet dolor esse, repellendus quas.</div>
      <div>Praesentium tenetur iure, odio, laboriosam qui ipsum nesciunt alias. Deleniti libero explicabo non sint magnam in amet cumque unde sapiente itaque molestiae possimus qui minus distinctio, dolores commodi quod tempore.</div>
      <div>Enim minus dolor ad quasi eveniet nemo aspernatur libero, accusamus, quidem a voluptas dignissimos, velit ex vitae maxime iure. Cumque tenetur a nulla unde maiores velit eum ut eos vero!</div>
      <div>Doloremque quibusdam nostrum laudantium nam in? Ab ipsum molestiae sequi architecto vero, delectus sed temporibus quaerat quas itaque laboriosam, iste, illum dolores impedit voluptatibus odit culpa quia voluptates! Quisquam, animi?</div>
      <div>Magnam nulla, error maxime quis quos cumque porro, nesciunt perferendis mollitia iste accusantium eligendi similique optio dignissimos consectetur repellendus aliquam possimus. Nihil veritatis numquam ipsam nostrum dolorum doloribus libero sequi.</div>
      <div>Dolorum, incidunt corporis. Quis similique, error cum voluptatum nisi modi, repudiandae, at deleniti, aliquam facilis voluptas voluptate velit natus quas cumque dignissimos! Numquam doloremque optio nemo quia sint labore assumenda!</div>
    </div>
  </div>
  
  <div class="imagebox-wrapper">
      <div class="image-container dropper">
        <span>
        drop image here
        or click here
        </span>
      </div>
    
    <div class="image-container">
        <span>
        <img src="https://login.uj.edu.pl/images/uj/logo_faculty.png" alt="cat image" />
        </span>
      </div>
  </div>
</div>

Postings-editor.markdown

Postings editor

A Pen by Artem Shoobovych on CodePen.

License.

script.js

document.addEventListener('DOMContentLoaded', function() {
  var buttons = document.querySelectorAll('.toolbar .button');

  [].forEach.call(buttons, function(elt) {
    elt.addEventListener('click', function(evt) {
      evt.preventDefault();
      
      var command = elt.dataset['command'];
      var selected = document.getSelection();
      
      switch (command) {
        case 'createLink':
          document.execCommand(command, false, selected);
        default:
          document.execCommand(command, false, null);
      }
    });
  });

  var draggable = document.querySelectorAll('.imagebox-wrapper .image-container');
  var dropper = document.querySelector('.dropper');
  var editor = document.querySelector('.editor');
  
  [].forEach.call(draggable, function(elt) {
    if (elt.classList.contains('dropper')) 
      return;
    
    elt.setAttribute('draggable', 'true');

    elt.addEventListener('dragstart', function(e) {
      this.classList.add('dragged');
      e.dataTransfer.effectAllowed = 'copy';
      window.draggingElement = this;
      
      var image = this.querySelector('img'),
          imageUrl = image.getAttribute('url'),
          imageAlt = image.getAttribute('alt'),
          imageHtml = '<img src="' + imageUrl + '" alt="' + imageAlt + '" />'
      
      // set image
      e.dataTransfer.setData('Text', '');
      //e.dataTransfer.setData('text/html', imageHtml);
    }, false);
    
    elt.addEventListener('drag', function(e) {
    }, false);
  });
  
  dropper.ondragover = function () { return false; };
  
	dropper.ondragend = function () { return false; };

  document.addEventListener('drop', function(e) {
    var maxFileSize = 1024 * 1024 * 2,
        allowedFileTypes = [ 'image/png', 'image/gif', 'image/jpeg' ],
        fileUploadUrl = '/upload_image';
    
    if (e.target == editor || e.target.parentNode == editor) {
      window.draggingElement.classList.remove('dragged');
    } else if (e.target == dropper || e.target.parentNode == dropper) {
      e.preventDefault();
      
      var formData = new FormData();
      
      if (e.dataTransfer.files.length > 0) {
        [].forEach.call(e.dataTransfer.files,  function(file) {
          if (allowedFileTypes.indexOf(file.type) < 0) {
            console.error("could not upload file of type ", file.type, " while allowed types are only ", allowedTypes);
            return false;
          }
          
          if (file.size > maxFileSize) {
            console.error("could not upload file because its size exceeds the maximum allowed one - ", file.size, " out of ", maxFileSize);
            return false;
          }
          
          formData.append('file', file);
        });
        
        var request = new XMLHttpRequest();
        
        var token = document.querySelector('meta[name="csrf-token"]');
        
        token = (token ? token.getAttribute('content') : null);

        request.open('POST', fileUploadUrl, true);
        
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        if (token) {
          request.setRequestHeader('X-CSRF-Token', token);
        }
        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        
        request.send(formData);
      }
    }
    
    return false;
  });
});

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic-ext);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

*[draggable=true] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  cursor: move;
}

.post-editor-wrapper {
  font-family: 'Open Sans', sans-serif;
  width: 1100px;
  position: relative;
}

.imagebox-wrapper {
  margin: 0;
  width: 150px;
  height: 400px;
  float: left;
  border: 1px solid #888;
  text-align: center;
  padding: 10px 15px 0 10px;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
}

.imagebox-wrapper .image-container {
  border: 1px solid #888;
  text-align: center;
  max-width: 140px;
  max-height: 140px;
  width: 140px;
  height: 140px;
  display: block;
  margin: 0 0 10px 0;
  line-height: 140px;
  cursor: move;
}

.imagebox-wrapper .image-container span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.editor-wrapper {
  top: 0;
  float: left;
  width: 800px;
  margin-right: 20px;
}

.editor-wrapper .toolbar {
  width: 812px;
  height: 35px;
  background-color: #ddd;
  margin-bottom: 0;
  border-bottom: 1px solid #6e6e6e;
  font-family: normal normal normal 14px/1 FontAwesome;
}

.editor-wrapper .toolbar .panel {
  border-right: 1px solid #6e6e6e;
  display: inline-block;
  height: 25px;
  margin: 5px 0;
}

.editor-wrapper .toolbar .panel:last-child {
  border-right: none;
}

.editor-wrapper .toolbar .button {
  display: inline-block;
  height: 20px;
  width: 20px;
  color: #2aa;
  vertical-align: middle;
  text-align: center;
  padding: 3px;
}

.editor-wrapper .toolbar .button i {
  vertical-align: middle;
}

.editor-wrapper .toolbar .button:hover {
  background-color: #bbb;
}

.editor-wrapper .editor {
  width: 100%;
  border: 1px solid #888;
  margin: 0;
  padding: 5px;
  outline: none;
  resize: none;
  overflow: auto;
  font-family: 'Open Sans', sans-serif;
}

.image-container:nth-child(1) {
  cursor: pointer;
}

.image-container.dragged {
  border: 1px dashed #888;
}

.editor-wrapper .editor.dragover {
  opacity: 0.6;
}