How does stackoverflow format textarea when click edit button?

Question

This is not a duplicate question, i know how to create a rich editor, but i meet problems

I want to make a rich text box like stackoverflow does.

1. I import the wmd plugin just like SO.

2. When i save a topic to mysql, it saves the processed text like this:

< p>hello world< /p>

< pre >< code >class Text {} < /code >< /pre >

This is normal i think because the html page can render this correctly.

But When i try to edit this topic, it directly shows the code in my textarea:

What i need is this(Just like the first time i entered):

My textarea code is very simple like this:

<!-- text area start -->
      <div id="wmd-button-bar"></div>
      <textarea id="wmd-input" name="description" onblur="checkForm()">${topic?.description}</textarea>
      <div id="wmd-preview"></div>
<!-- text area end -->

Anyone can help ? Thanks.

Answer 1

I find the answer myself.

What i need to do is simply add a new hidden field to store the original text before wmd process it.

And then i save both original and processed text into my database.

When i need to edit it, just use original text. When i need to render it, use the processed text.