<script>
  $(document).ready(function() {
    'use strict';

    // Hide Preview by default
    $('.button_preview_<?=$NID?>')
      .css('display', 'none');

    var easyMDE = new EasyMDE({
      element: $( <?=$ID?> )[0],
      autoDownloadFontAwesome: false,

      toolbar: [
        // https://github.com/Ionaru/easy-markdown-editor#toolbar-icons
        'bold', 'italic', 'strikethrough', 'heading',
        '|', 'code', 'quote', 'unordered-list', 'ordered-list', 'clean-block',
        '|', 'link', 'image', 'table',
        '|', 'preview', 'side-by-side', 'fullscreen',
        '|', 'guide',

        {
          name: 'plain',
          action: function customFunction(editor) {
            easyMDE.toTextArea();
            easyMDE = null;

            // Show Preview on easyMDE destruction
            $('.button_preview_<?=$NID?>')
              .css('display', 'inline');

          },

          className: 'fa fa-toggle-on',
          title: 'Plain Text Editor',
        },
      ],

      shortcuts: {
        'toggleStrikethrough': 'Cmd-Alt-S',
        'drawTable': 'Cmd-Alt-T',
      },
    });
  });
</script>

<div id="textarea_wrap_<?=$NID?>" class="textarea_wrap">
  <textarea name="<?=$Name?>"
    id="<?=$ID?>"
    placeholder="<?=$Placeholder?>"
    cols="<?=$Cols?>"
    rows="<?=$Rows?>"
    <?=$Attributes?>><?=$Value?></textarea>
</div>