Bootstrap WYSIWYG Editor

by ocanal

HTML

<link rel="stylesheet" href="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/css/bootstrap.min.css">
<link rel="stylesheet" href="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css">
<script src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
<script src="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<div class="col-md-8">
  <select id="emailToken">
    <option value="pre">pre</option>
    <option value="post">post</option>
    <option value="future">future</option>
  </select>
</div>

<textarea class="textarea wysihtml5 form-control" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea>

<br><br>
<p>click me</p>

JavaScript

var ComponentsEditors = function() {

  var handleWysihtml5 = function() {
    if (!jQuery().wysihtml5) {
      return;
    }

    if ($('.wysihtml5').size() > 0) {
      var editor = $('.wysihtml5').wysihtml5({
        "stylesheets": ["../assets/global/plugins/bootstrap-wysihtml5/wysiwyg-color.css"]
      });

      editor.on("load", function() {
        var $doc = $(editor.composer.doc);

        $doc.keyup(function(evt) {
          alert('hey');
        });
      });
    }
  }

  var handleSummernote = function() {
    $('#summernote_1').summernote({
      height: 300
    });
    //API:
    //var sHTML = $('#summernote_1').code(); // get code
    //$('#summernote_1').destroy(); // destroy
  }

  return {
    //main function to initiate the module
    init: function() {
      handleWysihtml5();
      handleSummernote();
    }
  };

}();

jQuery(document).ready(function() {
  ComponentsEditors.init();
});

$('p').click(function() {
  debugger;

});

$("#emailToken").on('click', function(e) {

  if (e.offsetY < 0) {
    var $txt = $(".textarea");
    var caretPos = $txt[0].selectionStart;
    var textAreaTxt = $txt.val();
    var txtToAdd = $(this).val();
    var val = textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos);
    $('.textarea').data("wysihtml5").editor.setValue(val);
  }
});