javascripthtmlrichtextboxfrontendwmd

How does stackoverflow format textarea when click edit button?


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:

enter image description here

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

enter image description here

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.


Solution

  • 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.