Como editar conteúdos do html pelo browser

Via em vários aplicativos web de CMS a opção do usuário editar o conteúdo de uma página pelo próprio browser, ao invés de ter que entrar numa outra interface. Ficava me perguntando como isso era feito, qual o tipo de mágica. Quando vi que o (famoso) Sharepoint, o CMS da Microsoft faz isso, comecei a ficar desesperançoso, pensando que seria com alguma saída proprietária, algum componente para o IE.

Mas uma pesquisada no Google me fez deparar com um atributo desconhecido por mim até hoje (mesmo depois de mais de 5 anos trabalhando com interfaces para web), não reconhecido pela W3C mas suportado por vários browsers (testei no Firefox do Ubuntu, MacOS X e Windows Vista e XP), Safari, IE 6 e 7: contenteditable

Elementos do (x)html podem ser editáveis com a propriedade contenteditable="true"
Faça um teste em qualquer html seu, colocando assim:

<div contenteditable="true">texto editável</div>

Você verá quea área é cliçavel, e um cursor aparece quando você clica. E pode editar!

Como disse, não é válidado pelo W3C, mas todos os browsers usam… muito útil para um CMS ou qualquer outro onde o usuário possa editar textos!

Abaixo, segue um exemplo de como habilitar/desabilitar uma div para edição. A partir daí, muita coisa pode ser feita 🙂

<html>
<head>
<title>Exemplo de uso – contenteditable</title>
<script type="text/javascript">
    function toggleEditArea() {
        var field = document.getElementById("edit_area");
        if(!field.getAttribute("contenteditable") || field.getAttribute("contenteditable")=="false")
            field.setAttribute("contenteditable", "true");
        else
            field.setAttribute("contenteditable", "false");
    }
</script>
</head>
<body>
<div id="edit_area">sadsadsadsadas</div>
<a href="?edit" onclick="toggleEditArea(); return false;">habalitar/desabilitar</a>
</body>
</html>