Vamos a trabajar a través de él.
No se puede hacer un div editable. No hay tal cosa como un div editable, al menos por ahora. Entonces, el problema es descubrir qué usar para editar. Un textarea funciona perfectamente. Entonces, la idea es obtener de algún modo un área de texto donde actualmente se encuentra el div.
La pregunta es cómo y de dónde obtenemos el área de texto. Hay varias maneras, pero una de ellas es la creación de un área de texto de forma dinámica sobre la marcha:
var editableText = $("<textarea />");
y reemplazarlo con el div:
$("#myDiv").replaceWith(editableText);
El área de texto es en su lugar ahora. Pero está vacío y acabamos de reemplazar el div y lo perdimos todo. Entonces, debemos preservar el texto del div de alguna manera. Una forma de hacerlo es copiar el texto/html dentro de la div antes de reemplazarlo:
var divHtml = $("#myDiv").html(); // or text(), whatever suits.
Una vez que tenemos el código HTML de la div, podemos poblar el área de texto y segura reemplazar el div con el área de texto. Y establece el foco dentro del área de texto ya que el usuario puede querer comenzar a editar. Combinando todo el trabajo hasta este punto, obtenemos:
// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div's text
editableText.val(divHtml);
// replace the div with the textarea
$("#myDiv").replaceWith(editableText);
// editableText.focus();
Es funcional, pero no pasa nada cuando un usuario hace clic en un div porque no hicimos ningún evento configuración. Vamos a conectar los eventos. Cuando el usuario hace clic en cualquier div $("div").click(..), creamos un controlador de clics y hacemos todo lo anterior.
$("div").click(function() {
var divHtml = $(this).html(); // notice "this" instead of a specifiC#myDiv
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
});
Esto es bueno, pero querría una manera de conseguir la espalda div cuando un usuario hace clic o se sale del área de texto. Hay un evento blur para controles de formulario que se desencadena cuando un usuario deja el control. Esto se puede usar para detectar cuándo un usuario abandona el área de texto y reemplazar el div. Hacemos exactamente lo inverso esta vez. Preserve el valor de textarea, cree un div dinámico, configure su html y reemplace el área de texto.
$(editableText).blur(function() {
// Preserve the value of textarea
var html = $(this).val();
// create a dynamic div
var viewableText = $("<div>");
// set it's html
viewableText.html(html);
// replace out the textarea
$(this).replaceWith(viewableText);
});
Todo está bien, excepto que este nuevo div ya no se convertirá en un área de texto al hacer clic. Este es un div recién creado, y tendremos que configurar el evento click nuevamente. Ya tenemos todo el código, pero mejor que repetirlo dos veces, es mejor hacer una función.
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
Como toda la operación es bidireccional reversible, necesitaremos hacer lo mismo para el área de texto. Vamos a convertir eso en una función también.
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
$(viewableText).click(divClicked);
}
cableado hasta todo junto, que tiene 2 funciones, divClicked, editableTextBlurred y la línea de abajo desencadena todo:
$("div").click(divClicked);
Pedido este código en http://jsfiddle.net/GeJkU/. Esta no es la mejor manera de escribir divisiones editables de ninguna manera, sino solo una forma de comenzar y abordar la solución paso a paso. Honestamente, he aprendido tanto como usted al escribir este largo artículo. ¡Firmando, adios!
Hay varios otros plugins existentes del editor in situ para jQuery que figuran en este hilo - http://stackoverflow.com/questions/708801/whats-the-best-edit-in -place-plugin-for-jquery. 'Editable' y' Jeditable' como Sarfaraz ya mencioné son algunos de los buenos, pero no sé qué tiene la edición en contexto tiene algo que ver con Star Wars: D – Anurag
buen tutorial. La gente aprenderá de esto. Gracias. – Cheeso
contenteditable = "true" * does * allow this capability. IE ha admitido desde 5.5 y HTML5 proporciona esto –