Comment implémenter les styles gras, italique et autres dans la zone de saisie après la publication

Question

Photo de l'e-mail de référence

En gros, je souhaite créer ce type de boîte mail où les utilisateurs peuvent personnaliser leurs publications. Mais je ne sais pas comment le mettre en gras/italique/citation

Answer 1

Je pense que vous souhaitez fournir aux utilisateurs une forme standard d'analyse de texte, et Markdown a la fonctionnalité dont vous avez besoin.

Vous pouvez essayer d'utiliser un analyseur Markdown comme celui-ci :

• marqué (démo)
• markdown-it (démo)

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>