Content Editable Replacement

by kthornbloom

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<small>EDITOR</small>
<div class="ce-fix" contenteditable="true">
  <h1>Content Editable Replacement</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eius, magni dolorem pariatur cumque magnam beatae? Repudiandae nemo dolore sapiente, eum magnam sint cupiditate, illo consectetur, aspernatur numquam distinctio eveniet.
  <ul>
    <li>test</li>
    <li>test Two</li>
  </ul>
</div>

<br>
<br>
<small>OUTPUT</small>
<textarea id="html-manager"></textarea>

SCSS

#caret {
    background: #2471AD;
    display: inline-block;
    height: 1em;
    width: 2px;
    margin: .1em -1px 0 -1px;
    vertical-align: text-top;
    animation: blink .75s infinite;
	position:absolute;
}

.content {
    background-color: white;
    padding: 2em;
    cursor: text;
    letter-spacing: .02em;
    line-height: 1.5em;
	color:#222;
	h1 {
		line-height:1.4em;
	}
}

#html-manager {
    height: 200px;
    width: 100%;
	box-sizing:border-box;
	background:#444;
	color:#eee;
	line-height:1.4em;
	padding:2rem;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

body {
    font-family: sans-serif;
	color:#888;
}

JavaScript

/* Create caret on click
$(".content").on('click', function() {
	$('#caret').remove();
	createCaret();
});
*/

// Handle keypress
$('.ce-fix').on("keypress", function(e) {
  var key = e.keyCode || e.charCode;
  console.log(key);


  switch (key) {
    // Return ↓
    case 13:
      pasteHtmlAtCaret('<br>');
      break;
      // Tab ↓
    case 9:
      console.log('tab');
      break;
    default:
      var c = String.fromCharCode(e.which);
      insertTextAtCursor(c);
  }
  updateHTML();
  return false;
});

// Handle odd keys that need keydown
$(document).on("keydown", function(e) {
  var key = e.keyCode || e.charCode;
  console.log(key);

  if ($('.content #caret').length) {

    switch (key) {
      // Return ↓
      case 8:
        console.log('backspace');
        return false;
        break;
        // Delete ↓
      case 46:
        console.log('delete');
        return false;
        break;
        // Tab ↓
      case 9:
        console.log('tab');
        return false;
        break;
        // Arrow Left ↓
      case 37:
        console.log('arrow left');
        return false;
        break;
        // Arrow Up ↓
      case 38:
        console.log('arrow up');
        return false;
        break;
        // Arrow Right ↓
      case 39:
        console.log('arrow right');
        return false;
        break;
        // Arrow Down ↓
      case 40:
        console.log('arrow down');
        return false;
        break;
    }
  }
});



/*

	↓ Helper Functions ↓
                                                                          
*/


// Update hidden textarea
function updateHTML() {
  var saveHtml = $('.content').html();
  $('#html-manager').html(saveHtml);
}
updateHTML();

// Get selected text within editor
function getSelectedText() {
  var text = "";
  if (typeof window.getSelection != "undefined") {
    text = window.getSelection().toString();
  } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
    text...