Donde encuentro un tutorial para esto:

[Jarkaos]

Los atributos del p-tag no se necesitan cambiar, de hecho no tiene ninguno.
Y no hay serverside implementacion, es un html plano.
Lo que he logrado hasta ahora es guardar el texto en una variable y crear el nuevo elemento con el texto original. El problema es que el nuevo elemento ('textarea') se crea debajo del p-tag y si hago click en el texto del textarea se crea un nuevo textarea debajo del anterior. Lo ideal es que el p-tag sea reemplazado por el textarea mientras se edita el texto y luego vuelva a la normalidad cuando se haya terminado de editar, es decir que vuelva a ser p-tag.

Esta es la funcion que he excrito hasta ahora.

Código Javascript:

window.onload = function  () {
    var pElements = document.getElementsByTagName('*');
    for (var i=0; i < pElements.length; i++) {
        if(pElements[i].className == 'editable')
            inPlaceEditor(pElements[i]);
    };
};
 
function inPlaceEditor (editableElement) {
        editableElement.onclick = function() {
            var text = editableElement.firstChild.nodeValue;
            var textarea = document.createElement('textarea');
            var nyText = document.createTextNode(text);
            textarea.appendChild(nyText);
            var nyElement = editableElement.appendChild(textarea);
            return false;
        };
    };