¿Cómo puedo hacer que el contenido de mi página web sea editable por los visitantes del sitio?

¿Cómo puedo hacer que el contenido de mi página web sea editable por los visitantes del sitio?

¿Cómo puedo hacer que el contenido de mi página web sea editable por los visitantes del sitio?

VALORACIÓN DEL ARTÍCULO:
5/5


Hacer que el texto de un sitio web sea editable por los usuarios es más fácil de lo que se puede esperar. HTML proporciona un atributo para este propósito: contenteditable.

El atributo contenible se introdujo por primera vez en 2014 con el lanzamiento de HTML5. Especifica si el contenido que gobierna puede ser cambiado por un visitante del sitio desde el navegador.

Soporte para el Atributo Contenible

La mayoría de los navegadores de escritorio modernos soportan este atributo. Estos incluyen

  • Chrome 4.0 y superiores
  • Internet Explorer 6 y superior
  • Firefox 3.5 y superiores
  • Safari 3.1 y superiores
  • Opera 10.1 y superiores
  • Borde de Microsoft

Lo mismo ocurre con la mayoría de los navegadores móviles.

Cómo usar Contenteditable

Simplemente añada el atributo al elemento HTML que desea editar. Tiene tres valores posibles: verdadero, falso y hereditario. Inherit es el valor por defecto, lo que significa que el elemento toma el valor de su padre. Del mismo modo, cualquier elemento hijo de su nuevo contenido editable también será editable a menos que cambie sus valores a false. Por ejemplo, para hacer que un elemento DIV sea editable, use:

Crear una lista de tareas editables con Contenteditable

El contenido editable tiene más sentido cuando se combina con el almacenamiento local, por lo que el contenido persiste entre las sesiones y las visitas al sitio.

  1. Abra su página en un editor HTML.
    1. Crear una lista con viñetas y sin orden llamada myTasks
       Some task
  • Another task
  • Añada el atributo contenible al elemento

      :

      Ahora tiene una lista de cosas por hacer que se puede editar, pero si cierra el navegador o abandona la página, la lista desaparecerá. La solución: Añada un script simple para guardar las tareas en localStorage.

      Añada un enlace a jQuery en el de su documento.

      Este ejemplo utiliza la CDN de Google, pero puede alojarla usted mismo o utilizar otra CDN si lo prefiere.

      En la parte inferior de su página, justo encima de la etiqueta , agregue su script:

      }); Este es el inicio de la función jQuery document.ready y le dice al navegador que cargue este script después de que el documento se haya cargado completamente.

      Dentro de la función document.ready, añada su script para cargar las tareas en localStorage y obtener las tareas que se hayan guardado allí previamente:

        1.  localStorage.setItem('myTasksData', this.innerHTML); // guardar en localStorage
        2.  });
        3. if ( localStorage.getItem(‘myTasksData’)) { /// if there is content in the localStorage
        4. $(«#myTasks»).html(localStorage.getItem(‘myTasksData’)); // poner contenido en page
        5.  }
        6.  });

      El HTML de toda la página se ve así:


      â?ª â?ª â?ª â?ª#fefefe">font color="#fefefe "#fefefe "#fefefe
      Subtítulos por aRGENTeaMwWw.Subs-Team.Tv P r e s e n t a.
      Subtítulos por aRGENTeaMIntroduce los artículos de tu lista. El navegador lo almacenará por ti, así que cuando vuelvas a abrirlo, seguirá aquí.

        Some task / i> / i>.Otra tarea

      / i> (documento).ready(function(){
      )$(«#myTasks»).blur(function() {
      localStorage.setItem(‘myTasksData’, this.innerHTML);
      });
      si ( localStorage.getItem(‘myTasksData’)) {
      >$(«#myTasks»).html(localStorage.getItem(‘myTasksData’));
      }
      }); / i> / i> / i&gt.

    TAMBIÉN TE INTERESA

    vivo X200 FE

    Vivo X200 FE: fuera caretas con esta nueva gama alta

    La marca vivo, siempre muy identificada con móviles accesibles, se quita la carea para presentar el nuevo vivo X200 FE, un dispositivo que busca conquistar a los usuarios que quieren rendimiento premium sin renunciar a la comodidad. Con una cámara desarrollada junto a ZEISS, batería de larga duración, una pantalla de alto nivel y un

    videovigilancia camara AOV PT

    La cámara AOV PT: un motivo para irse tranquilo de vacaciones

    El verano es sinónimo de descanso, desconexión y viajes. Pero también de preocupación y seguro que las siglas de la cámara AOV PT ayudan a combatir ese sentimiento. Casas vacías, negocios con menos actividad y propiedades que quedan fuera del radar diario se convierten en un blanco fácil para robos o actos vandálicos. En este

    la estafa más habitual de España

    Así es la estafa más habitual: WhatsApp, Telegram, oferta de empleo y un troyano…

    Está arrasando. La estafa más habitual que circula por España lo tiene todo: ingeniería social, plataformas de mensajería, el señuelo del un empleo irreal y un troyano que tienes cuando ya has caído. Los expertos en ciberseguridad como Secure&IT se han hecho eco de multitud de robos de estas características. Describiendo la estafa más habitual

    planificar un viaje con ChatGPT

    Planificar un viaje con ChatGPT: todo lo que debes saber

    Planificar un viaje con ChatGPT es una de las muchas cosas que se pueden hacer con esta popular herramienta. Destinos, restaurantes, precios, parkings donde dejar el coche, itinerarios… Se puede hacer de todo con la IA, pero hasta cierto punto. Y es que hay límites y riesgos que hay que tener en cuenta. Lo analizamos