How to implement bold, italic and other styles in the input box after publishing
P粉354948724
P粉354948724 2023-09-08 11:13:36
0
1
652

Reference email picture

Basically, I want to create this type of mailbox where users can customize their posts. But I don't know how to make it bold/italic/quoted

P粉354948724
P粉354948724

reply all(1)
P粉978742405

I think you want to provide users with a standard form of text parsing, and Markdown has the functionality you require.

You can try to use a Markdown parser like this:

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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template