bk2018/editor.html

<section class="container">
  <div class="left-half noprint">
    <div class="editor">
      <ul class="toolbar">
        <li><button type="button" data-command="bold">Fett</button></li>
        <li><button type="button" data-command="italic">Kursiv</button></li>
        <!-- <li><button type="button" data-command="link">Link</button></li>
        <li><button type="button" data-command="image">Bild</button></li> -->
        <li><button type="button" data-command="header1">Groß</button></li>
        <li><button type="button" data-command="header2">Bisschen Groß</button></li>
        <li><button type="button" data-command="unorderedList">Liste</button></li>
        <li><button type="button" data-command="orderedList">Aufzählung</button></li>
        <!-- <li><button type="button" data-command="code"></button></li> -->
      </ul>
      <textarea bind:value=text type=text>{text}</textarea>
    </div>
  </div>
  <div class="right-half">
    {#each schueler as s (s.ID)}
      <Brief schueler={schueler}><span slot="kuerzel">{s.Lehrer}</span><span slot="anschrift">{s.Vorname} {s.Name}<br>{s.Strasse}<br>{s.PLZ} {s.OrtAbk}</span><svelte:component this={Component} s={s} /></Brief>
    {/each}
  </div>
</section>

<script>
import svelte from 'svelte'
import TextareaEditor from 'textarea-editor'
import marked from 'marked'

export default {
  oncreate () {
    const textarea = document.querySelector('textarea')
    const toolbar = document.querySelector('.toolbar')
    const editor = new TextareaEditor(textarea)
    toolbar.addEventListener('mousedown', e => e.preventDefault());

    toolbar.addEventListener('click', e => {
      const command = e.target.getAttribute('data-command');
      if (!command) return;
      let url;
      if (/image|link/.test(command) && !editor.hasFormat(command)) {
        url = prompt('URL:');
      }
      editor.toggle(command, url);
    })
    textarea.addEventListener('keydown', (e) => {
      const key = e.which;
      const cmd = e.metaKey || e.ctrlKey;
      if (!cmd) return;
      switch (key) {
        case 66:
          editor.toggle('bold');
          break;
        case 73:
          editor.toggle('italic');
          break;
        default: return;
      }
      e.preventDefault();
    })
  },
  data () {return {
    text: 'Hallo {s.Vorname}'
    }},
  computed: {
    Component: ({text}) => svelte.create(marked(text, { sanitize: false }))
  },
  components: {Brief: './brief.html'}
}
</script>

<style>
@import 'daten/main.css';
/* Pattern styles */
.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 2fr;
  margin-top: 10px;
}

.left-half {
  grid-column: 1;
}

.right-half {
  grid-column: 2;
}

.editor {
  position: sticky;
  top: 60px;
  height: 90%;
  margin-left: 10px;
}

textarea {
  width: 100%;
  height: 100%;
  padding: 20px;
  border-color: #ccc;
  resize: none;
  font-size: 1.6em;
}

textarea:focus {
  outline: none;
  border-color: #3498db;
}

.toolbar {
  background: #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

.toolbar button {
  float: left;
  font-weight: bold;
  background: #ddd;
  color: #333;
  border: none;
  padding: 15px;
}

.toolbar button:hover {
  background: #ccc;
}
</style>