Lo que estás buscando es el atributo contenteditable
que tienen algunos elementos HTML para que el usuario pueda editar su contenido interno.
¿Has visto editores de ciertos sitios que permiten dan formato al texto cuando estás escribiendo? Algunos de ellos utilizan dicha propiedad. Si no logras ubicarlos, la nueva versión de Reddit tiene uno de ellos cuando quieres agregar un nuevo comentario, por decir un ejemplo.
Su uso es muy sencillo, y de acuerdo a la documentación de Mozilla Developers Network siempre debes especificar un valor a dicho atributo. Te explico:
Esta etiqueta te permitirá insertar contenido dentro de la misma.
<p contenteditable="true"></p>
Esta etiqueta se mostrará como un párrafo en tu documento.
<p contenteditable="false"></p>
Pero nunca hagas esto:
<p contenteditable=""></p>
<p contenteditable></p>
Para la integración con Javascript y jQuery, se me ocurre algo rápido como lo siguiente:
let bandera = true; // La bandera cambia su valor entre verdadero y falso cada vez que el usuario hace clic sobre el botón
let funcion = function(evento){
evento.preventDefault(); // Cuando invocamos esta función, le decimos al navegador que no ejecute la acción por defecto de dicho botón y en su lugar proceda con las instrucciones que le damos aquí abajo
jQuery('p').attr('contenteditable', bandera);
bandera = !bandera; // Simplemente intercambiamos su valor anterior
}
jQuery(document).on('click', 'button', funcion);
Si necesitas hacer algo más complejo, considera utilizar algunas librerías ya existentes como Trumbowyg.