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

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
¿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.

    Deja un comentario

    TAMBIÉN TE INTERESA

    avatares-para-los-clientes-de-un-supermercado

    Las tiendas y las calles se podrían llenar de avatares inteligentes…

    Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

    anillo-Circular

    Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

    El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

    OnePlus-10-Pro

    Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

    Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

    movil-plegable-honor-magic-v

    Nuevo móvil plegable en el mercado: Honor Magic V

    Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

    hacker

    Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

    Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

    OPPO-Air-Glass

    Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

    Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio