Cara melaksanakan gaya tebal, condong dan gaya lain dalam kotak input selepas diterbitkan

Question

Rujukan gambar e-mel

Pada asasnya, saya ingin mencipta peti mel jenis ini di mana pengguna boleh menyesuaikan siaran mereka. Tapi tak tahu macam mana nak buat bold/italic/quote

Answer 1

Saya rasa anda ingin memberikan pengguna bentuk penghuraian teks standard dan Markdown mempunyai fungsi yang anda perlukan.

Anda boleh cuba menggunakan penghurai Markdown seperti ini:

• ditanda (demo)
• markdown-it (demo)

const textarea = document.querySelector('textarea');
const content = document.querySelector('.content');
const update = () => content.innerHTML = marked.parse(textarea.value);
textarea.addEventListener('input', update);
textarea.value = '**Bold**  \n*Italic*'
update();

html,
body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
}

.container>* {
  flex: 1;
}

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div class="container">
  <textarea></textarea>
  <div class="content"></div>
</div>