html editor by HAP

by Petr Haluza

HTML

<div class="container">
    <div id='HAPEditor'>
      <h1>HAPEditor</h1>
      <div>
        <button data-role='undo'><i class='fa fa-undo'></i></button>
        <button data-role='redo'><i class='fa fa-repeat'></i></button>
        <span></span>
        <button data-role='bold'><i class='fa fa-bold'></i></button>
        <button data-role='italic'><i class='fa fa-italic'></i></button>
        <button data-role='underline'><i class='fa fa-underline'></i></button>
        <button data-role='strikeThrough'><i class='fa fa-strikethrough'></i></button>
        <span></span>
        <button data-role='justifyLeft'><i class='fa fa-align-left'></i></button>
        <button data-role='justifyCenter'><i class='fa fa-align-center'></i></button>
        <button data-role='justifyRight'><i class='fa fa-align-right'></i></button>
        <button data-role='justifyFull'><i class='fa fa-align-justify'></i></button>
        <span></span>
        <button data-role='indent'><i class='fa fa-indent'></i></button>
        <button data-role='outdent'><i class='fa fa-outdent'></i></button>
        <span></span>
        <button data-role='insertUnorderedList'><i class='fa fa-list-ul'></i></button>
        <button data-role='insertOrderedList'><i class='fa fa-list-ol'></i></button>
        <span></span>
        <button data-role='h2'>nadpis<sup>2</sup></button>
        <button data-role='h3'>nadpis<sup>3</sup></button>
        <button data-role='h4'>nadpis<sup>4</sup></button>
        <button data-role='p'>řádek</button>
        <span></span>
        <button data-role='subscript'><i class='fa fa-subscript'></i></button>
        <button data-role='superscript'><i class='fa fa-superscript'></i></button>
        <button data-role='template'>šabl</button>
        
      </div>
      <div>Použij i klávesové zkraty ctrl+b atd..</div>
    </div>
    <div id='HAPEditorMain' contenteditable>
      <h2>Toš todle je nadpis</h2>
      <p>A tohle je text jen tak na zkoušku</p>
    </div>
   ...

CSS

@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
*{box-sizing: border-box} 
.container {width:100%; max-width: 1024px; margin:1em auto}
#HAPEditor { text-align:center; padding:5px;}
#HAPEditor div {display:flex; justify-content:center; gap:3px}
#HAPEditor div span {width:4px}
#HAPEditor button {font-size: 1.125em; padding:5px; cursor:pointer}
#HAPEditor button:hover:at {font-size: 1.125em; padding:5px; cursor:pointer}
#HAPEditorMain {resize:vertical;overflow:auto;border:1px solid silver;border-radius:5px;min-height:10em;box-shadow: inset 0 0 10px silver;padding:1em;}
#output { width:100%; min-height:10em}

.exBox {display:flex; border:1px dotted lightblue}
.exBox div { border:1px dotted lightblue; flex-grow:1}
.exBox .exImg {background:url(https://s3-alpha.figma.com/hub/file/948140848/1f4d8ea7-e9d9-48b7-b70c-819482fb10fb-cover.png);     background-size: contain;    background-repeat: no-repeat;
}}

JavaScript

$('#HAPEditor button').click(function(e) {
  switch($(this).data('role')) {
    case 'h2':
    case 'h3':
    case 'h4':
    case 'p':
      document.execCommand('formatBlock', false, $(this).data('role'));
      break;
    case 'template':
    document.execCommand($('#HAPEditorMain').append('<div class="exBox"><div><div class="exH2"><h2>Nadpis</h2></div><div class="exP"><p>Odstavec textu</p></div></div><div class="exImg"><input type="file"></div></div>'));
    break;
    default:
      document.execCommand($(this).data('role'), false, null);
      break;
    }
  update_output();
})

$('#HAPEditorMain').bind('blur keyup paste copy cut mouseup', function(e) {
  update_output();
})

function update_output() {
  $('#output').val($('#HAPEditorMain').html());
}