Hoje em dia, todos os clientes querem ser capazes de editar o próprio conteúdos dos seus sites.
E por que não? Quer dizer, eles têm um orçamento de 500€, e até têm algum conhecimento em HTML / CSS. Ter um site que permita editar blocos de conteúdo, é o sonho de muitos clientes. Despendi algumas horas para desenvolver um sistema in-page para editar blocos de conteúdo.

O XHTML

<h1 class="editar" rel="32" title="Article Title">Titulo Editável</h1>
<p class="editar textarea" title="Conteúdo" rel="33">
	Isto é um parágrafo que podes editar.  Isto é um parágrafo que podes editar. Isto é um parágrafo que podes editar.
	Isto é um parágrafo que podes editar.  Isto é um parágrafo que podes editar. Isto é um parágrafo que podes editar.
	Isto é um parágrafo que podes editar.  Isto é um parágrafo que podes editar. Isto é um parágrafo que podes editar.
	Isto é um parágrafo que podes editar.  Isto é um parágrafo que podes editar. Isto é um parágrafo que podes editar.
	Isto é um parágrafo que podes editar.  Isto é um parágrafo que podes editar. Isto é um parágrafo que podes editar.
	Isto é um parágrafo que podes editar.  Isto é um parágrafo que podes editar. Isto é um parágrafo que podes editar.
</p>

De notar que qualquer área editável terá que ser da classe editar. O atributo “rel” reflecte a identificação do registo que será actualizado na base de dados. Além disso, se quisermos que o formulário passe a ser uma área de texto em vez de uma entrada de texto, vamos dar o elemento editar à classe textarea.

O CSS

.editar:hover	{ background:#eee; }
.textarea textarea{ height:200px; padding:3px; }
.editar-empty	{ background:#fffea1; padding:20px; border:1px dashed #fc0; }
.box		{ border:1px solid #ccc; padding:5px; display:block; width:95%; }

A “classe” box é aplicada tanto para inputs e textareas.

O MooTools

window.addEvent('domready', function() {
	//encontrar as áreas editáveis
	$$('.editable').each(function(el) {
		//adicionar duplo-clique
		el.addEvent('dblclick',function() {
			var before = el.get('html').trim();
			el.set('html','');
			//substituir o texto actual pelo conteúdo introduzido no input ou na textarea
			if(el.hasClass('textarea'))
			{
				var input = new Element('textarea', { 'class':'box', 'text':before });
			}
			else
			{
				var input = new Element('input', { 'class':'box', 'value':before });
				input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });
			}
			input.inject(el).select();
			input.addEvent('blur', function() {
				val = input.get('value').trim();
				el.set('text',val).addClass(val != '' ? '' : 'editable-empty');

				var url = 'moo-editable-content.php?id=' + el.get('rel') + '&content=' + el.get('text');
				var request = new Request({
					url:url,
					method:'post',
					onRequest: function() {
						alert('making ajax call :: ' + url);
					}
				}).send();
			});
		});
	});
});

Uma vez que o DOM estiver pronto, encontramos todos os elementos com a classe editar. Adicionamos um duplo clique para cada item que insere um elemento de entrada.

O PHP & MySQL

if($_SESSION['is_admin'] && is_numeric($_POST['id']) && isset($_POST['content']))
{
	$query = "UPDATE content_table SET content = '".mysql_real_escape_string(stripslashes($_POST['content']))."' WHERE content_id = ".(int)$_POST['id'];
	$result = mysql_query($query,$db_link);
}

Quando o PHP recebe a solicitação de $_POST, valida as credenciais e actualiza a Base de Dados com o novo conteúdo. Simples! Clica aqui para veres em acção.

Algumas notas sobre o código.
Em primeiro lugar, este sistema não foi criado para ser utilizado num site grande, pois exige que o conteúdo editável seja colocado dentro de uma base de dados com um ID único.
Segundo, a textarea não possui um editor WYSIWYG ligada a ela de modo que o cliente precisa ter algum conhecimento de HTML, se eles queriam adicionar links e tal.

Opinem! Digam de vossa justiça.

(Nenhum voto por enquanto)

 Loading ...