Editor de texto com PHP e jQuery

09 ago, 2012
By wiliamluis
0 Comments
0
Dicas, Funções, JQuery, PHP

Linha de edição, como é conhecido, ou ser capaz de editar conteúdo diretamente em uma página é uma grande ferramenta tem sob sua correia. Vou percorrer exatamente como ele funciona e também como postar o conteúdo do texto atualizado através de um script PHP para o processamento do lado do servidor para colocar no banco de dados.

O Código

Parece um pouco complexo para que eu vou correr rapidamente com exatamente o que está acontecendo.

Quando você visitar a página de demonstração são apresentados com um bloco de texto. Se você passar o mouse sobre o texto que você verá um ícone de edição pouco semelhante a quando você quiser editar o conteúdo no Facebook.
Se o usuário clicar sobre o bloco de código do texto é substituída por uma textarea de formulário com a opção de salvar ou cancelar as alterações.

Um pouco mais de detalhes

Este tutorial usa vinculação e desvinculação. Em termos simples, podemos associar um evento de clique de um elemento. Lançamentos de desligamento caso o clique do elemento, simples. Na linha 9 do código abaixo ligamos um evento clique a todos os elementos com uma classe de ‘inlineEdit’ o manipulador de eventos é “UpdateText” a função. Isto significa que toda vez que uma div com ‘inlineEdit “a classe é clicado’ UpdateText” a função será executada. “UpdateText” A função substitui o texto atual com um textarea.
Em seguida, vemos a função de salvaguarda. Esta função só é executado quando o usuário clica no ícone salvar. Nós basicamente salvar o novo texto em uma variável e passá-lo através do arquivo update.php. Você notará que o ícone de carregamento é exibido durante o processo de salvação. Nós também exibir uma mensagem quando há uma resposta a partir da página PHP. Finalmente, retire o formulário da classe “selecionado” o elemento, e então injetar o novo texto que o usuário escreveu no textarea para o div
A função de cancelamento é ativado quando o elemento com a classe. Reverter é clicado. Esta função simplesmente remove a classe ‘selecionado’ como acima, na função de economia, bem como colocar o texto original no div.

</pre>
<script type="text/javascript">
$(document).ready(function () {

function slideout() {
 setTimeout(function () {
 $("#response").slideUp("slow", function () {});
 },
 2000);
 }

$(".inlineEdit").bind("click", updateText);

var OrigText, NewText;

$(".save").live("click", function () {

$("#loading").fadeIn('slow');

NewText = $(this).siblings("form").children(".edit").val();
 var id = $(this).parent().attr("id");
 var data = '?id=' + id + '&amp;text=' + NewText;

$.post("update.php", data, function (response) {
 $("#response").html(response);
 $("#response").slideDown('slow');
 slideout();
 $("#loading").fadeOut('slow');

});

$(this).parent().html(NewText).removeClass("selected").bind("click", updateText);

});

$(".revert").live("click", function () {
 $(this).parent().html(OrigText).removeClass("selected").bind("click", updateText);
 });

function updateText() {

$('li').removeClass("inlineEdit");
 OrigText = $(this).html();
 $(this).addClass("selected").html('<form ><textarea class="edit">' + OrigText + '" </textarea> </form><a href="#" class="save"><img src="images/save.png" border="0" width="48" height="15"/></a> <a href="#" class="revert"><img src="images/cancel.png" border="0" width="58" height="15"/></a>').unbind('click', updateText);

}
});
</script>

&nbsp;
<pre>

O PHP

Neste exemplo eu não ter adicionado o script de conexão banco de dados. Nós, basicamente, envie os dados para update.php e usando PHP que ecoam de volta os resultados. Você pode facilmente adicionar esses dados ao banco de dados.


<?
$text = mysql_escape_string($_POST['text']);
$id = mysql_escape_string($_POST['id']);

echo $text;
// this is where you could add the updated text to the database where the database row id = $id for example.
?>

O HTML

O HTML é simplesmente um item da lista com “inlineEdit” a classe que torna o conteúdo do elemento editável. Os elementos mais que você adicionar a esta classe, mais você pode editar. perceber como eu adicionei um id de 1 para o exemplo abaixo. Esta poderia ser uma linha específica em um banco de dados, por exemplo, se você tiver vários elementos editáveis em uma página.

</pre>
<h2>jQuery Inline-Edit <img id="loading" src="images/loading.gif"/></h2>
Click the text below to edit it.
<div id="response"></div>
<ul>
 <li class="inlineEdit" id="1">Lorem Ipsum....</li>
</ul>

&nbsp;
<pre>

Para ver a demostração clique aqui, para baixar clique aqui.

Fonte: http://papermashup.com/jquery-and-php-inline-editing/

Loading