World Easiest Text Editor

# 가장 간단한 버전의 Text Editor 입니다.

<< html >>

<div>

  <div>

    <div id='editControls'>

      <div>

        <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='h1' >h¹</button>

        <button data-role='h2' >h²</button>

        <button data-role='p' >p</button>

        <button data-role='subscript'><i class='fa fa-subscript'></i></button>

        <button data-role='superscript'><i class='fa fa-superscript'></i></button>

      </div>

    </div>

    <div id='editor' contenteditable>

    </div>

    <textarea id='output'>

    </textarea>

  </div>

</div>

<< css >>

#editor {

  font-size: 14px;

  border: 1px solid #BABABA;

}

#output {

  margin-top: 20px;

  width:99.7%;

}

<< js >>

/*

Big Thanks To:

https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands

*/

$('#editControls button').click(function(e) {

  switch($(this).data('role')) {

    case 'h1':

    case 'h2':

    case 'p':

      document.execCommand('formatBlock', false, $(this).data('role'));

      break;

    default:

      document.execCommand($(this).data('role'), false, null);

      break;

    }

    update_output();

})

$('#editor').bind('blur keyup paste copy cut mouseup', function(e) {

  update_output();

})

function update_output() {

  $('#output').val($('#editor').html());

}

# 출처

- https://stackoverflow.com/questions/40868297/what-is-the-best-rich-text-editor-for-use-with-ionic-apps

- http://codepen.io/barney-parker/pen/idjCG