Toster editor

by Ed Bulikyan

HTML

<button data-type="b">B</button>
<button data-type="i">I</button>
<button data-type="img">Image</button>
<button data-type="link">Link</button>
<button data-type="quote">Quote</button>
<button data-type="spoiler">●</button>
<button data-type="ul">UL</button>
<button data-type="ol">OL</button>
<textarea class="editor" contenteditable=true></textarea>

CSS

.editor {
  display: block;
  width: 600px;
  min-height: 100px;
  border: 1px solid;
  padding: 7px 5px;
  font-size: 14px;
  outline: none;
}

button {
  margin-bottom: 4px;
  outline: none;
}

JavaScript

function wrapSelectedText(el, wrapper) {
  const start = el.selectionStart;
  const end = el.selectionEnd;
  const val = el.value;
  
  el.value = val.slice(0, start) + wrapper[0] + val.slice(start, end) + wrapper[1] + val.slice(end);
  
  el.focus();
  
  if (start === end) {
    el.selectionEnd = end + wrapper[0].length;
  } else {
    el.selectionEnd = end + wrapper[0].length + wrapper[1].length;
  }
}

[].forEach.call(document.querySelectorAll('button'), item => {
  item.addEventListener('click', e => {
    const { type } = e.target.dataset;
    let wrapper, src, href;
    
    switch (type) {
      case 'b':
        wrapper = ['<b>', '</b>'];
        break;
      case 'i':
        wrapper = ['<i>', '</i>'];
        break;
      case 'quote':
        wrapper = ['<blockquote>', '</blockquote>'];
        break;
      case 'img':
        src = prompt('Введите src картинки', 'http://');
        if (src === null) return;
        wrapper = [`<img src="${src}" alt="image"/>`, ''];
        break;
      case 'link':
        href = prompt('Введите URL ссылки', 'http://');
        if (href === null) return;
        wrapper = [`<a href="${href}">`, '</a>'];
        break;
      case 'spoiler':
        wrapper = ['<spoiler title="">', '</spoiler>'];
        break;
      case 'ul':
        wrapper = ['<ul>\n	<li>','</li>\n</ul>'];
        break;
      case 'ol':
        wrapper = ['<ol>\n	<li>','</li>\n</ol>']; 
    }
    
    wrapSelectedText(document.querySelector('.editor'), wrapper); 
  });
});