¿Cómo stackoverflow formatea el área de texto al hacer clic en el botón Editar?

Question

Esto no es una pregunta duplicado, sé cómo crear un editor rico, pero me encuentro con problemas

Quiero hacer un cuadro de texto rico como stackoverflow hace.

1. Importe el plugin wmd como SO.

2. Cuando i ahorro un tema a MySQL, guarda el texto procesado de esta manera:

< p> hola mundo </p>

< pre> < código > clase Texto {} </código> </pre>

Esto es normal, creo que porque la página html puede procesar esto correctamente.

pero cuando intento editar este tema, se muestra directamente el código en mi área de texto:

Lo que necesito es esto (igual que la primera vez que entré):

Mi código de área de texto es muy simple como esto:

<!-- 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 --> 

¿Alguien puede ayudar? Gracias.

Answer 1

Yo mismo encuentro la respuesta.

lo que tengo que hacer es simplemente añadir un nuevo campo oculto para almacenar el texto original antes armas de destrucción masiva procesarlo.

Y luego guardo tanto el texto original como el procesado en mi base de datos.

Cuando necesito editarlo, solo uso el texto original. Cuando necesito renderizarlo, uso el texto procesado.