JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/WordPress/dashicons/master/css/dashicons.css">
<script src="http://markdown-here.com/js/marked.js"></script>
<br>
<div id="prev">
</div>
<br>
<br>
<br>
<textarea id="my-mark" class="cr-mark-ed" name=""></textarea>


<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Вставить изображение</h4>
      </div>
      <div class="modal-body">
        <div class="">
          <div class="form-group">
            <label for="exampleInputEmail1">Ссылка на изображение</label>
            <input type="url" class="form-control" id="cr-marc-img-url" placeholder="">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Атрибут ALT</label>
            <input type="text" class="form-control" id="cr-marc-img-alt" placeholder="">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>
        <button type="button" class="btn btn-primary" id="cr-marc-img-insert">Вставить</button>
      </div>
    </div>
  </div>
</div>

CSS

.cr-mark-ed {
  border: 2px solid #dedede;
  width: 100%;
  min-height: 150px;
  outline: 0
}

.my-button-panel span {
  padding: 10px;
  display: inline-block;
  border: 1px solid #909090;
  margin-bottom: 10px;
  margin-right: 5px;
  cursor: pointer;
  color: #909090;
}

.my-button-panel span:hover {
  color: #fff;
  background-color: #909090;
}

.my-button-panel span:active {
  color: #5AA1A9;
  background-color: #E4E2E2;
}

JavaScript

(function($) {
  $('#my-mark').after('<div class="cr-mark"><div class="my-button-panel"><span class="cr-mark-insert cr-mark-b" data-toggle="tooltip" data-placement="top" title="Жирный шрифт"><i class="fa fa-bold"></i></span><span class="cr-mark-inser cr-mark-i" data-toggle="tooltip" data-placement="top" title="Курсив"><i class="fa fa-italic"></i></span><span class="cr-mark-inser cr-mark-quote" data-toggle="tooltip" data-placement="top" title="Цитата"><i class="fa fa-quote-left"></i></span><span class="cr-mark-img" data-toggle="tooltip" data-placement="top" title="Изображение"><i class="fa fa-picture-o" data-toggle="modal" data-target=".bs-example-modal-sm"></i></span><span class="cr-mark-link" data-toggle="tooltip" data-placement="top" title="Ссылка"><i class="fa fa-link"></i></span><span class="cr-mark-inser cr-mark-code" data-toggle="tooltip" data-placement="top" title="Строка кода"><i class="dashicons dashicons-editor-code"></i></span><span class="cr-mark-inser cr-mark-pre" data-toggle="tooltip" data-placement="top" title="Блок кода"><i class="fa fa-code"></i></span></div></div>');
  $('#my-mark').appendTo('.cr-mark');

  function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
  }

  $('[data-toggle="tooltip"]').tooltip();

  function prev() {
    var str = $('#my-mark').val(),
      out = marked(str);
    $('#prev').html(out);
  }

  $('#my-mark').keyup(function() {
    prev()
  });
  $('#my-mark').change(function() {
    prev()
  });

  $(document).on('click', '.cr-mark-b', function() {
    wrapText("my-mark", "**", "**");
    prev()
  });
  $(document).on('click', '.cr-mark-i',...