¿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

    Zenfone-11-Ultra

    Zenfone 11 Ultra, que siga la fiesta de la IA en los smartphones

    Todos los últimos lanzamientos de smartphones están marcados por la inteligencia artificial. Este hecho, que ocupa los titulares de hoy, se está convirtiendo en un estándar y pronto dejará de ser noticia. Pero no estos momentos es la novedad y la transformación hacia la que caminan todas las marcas del mercado. Así lo ha hecho

    Enco-Buds2-Pro

    Enco Buds2 Pro: unos auriculares buenos, bonitos, baratos e inteligentes

    Por menos de 50 euros, los auriculares OPPO Enco Buds2 Pro pueden darnos todo lo que necesitamos para nuestro día a día. ¿Por qué? Porque son una combinación excepcional de calidad de sonido, duración de batería extendida y un diseño moderno y funcional. Además cuentan con funciones inteligentes y dan a los usuarios la libertad

    Xiaomi-14-Series

    Xiaomi 14 Series se suma a la puja por ser el móvil del año

    Xiaomi 14 Series llega al mercado para colarse en la eterna batalla que mantienen los flagships de Apple y Samsung. Al igual que sus rivales, los nuevos móviles de la marca china llegan con la IA bajo el brazo y una gran cantidad de razones para aspirar a ser uno de los móviles del 2024.