1

Tengo estos paneles en Bootstrap, con texto escrito directamente de html, es decir sin traerlo de base de datos..

introducir la descripción de la imagen aquí

la pregunta es, hay alguna forma de editar lo que tiene escrito directamente desde el front end, es decir sin tener que hacer un formulario mediante php y guardar los datos para luego traerlos de la base de datos?

gracias.

2
  • Si no te importa que los cambios no se guarden podrías hacerlo con javascript.
    – akko
    el 4 dic. 2018 a las 23:34
  • vuejs más rapido!
    – DoubleM
    el 4 dic. 2018 a las 23:35

2 respuestas 2

1

Lo puedes lograr con JQuery, a través de un elemento (por ejemplo un botón) que te permita editar el texto, es decir, no podrías simplemente dar click sobre el texto y empezar a editar; la solución es la siguiente:

$('button').click(function(){
    var $div=$('div'), isEditable=$div.is('.editable');
    $('div').prop('contenteditable',!isEditable).toggleClass('editable')
})
.editable{ background:#EAEAEA}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Texto editable...</div>
<br>
<button>Editar Texto</button>

Al presionar el botón te permitirá editar y al volver a presionarlo te bloqueará (como viene por defecto).

Espero te sirva.

2
  • El editor de html no me permite modificar el orden pero te explico: el primer bloque va dentro de las etiquetas <script></sctript>. El segundo bloque va dentro de las etiquetas <style></style>. Y el tercer bloque iría tal cual. Todo en un mismo archivo con extensión html el 5 dic. 2018 a las 0:59
  • 1
    Muchas gracias, me sirvió mucho. el 5 dic. 2018 a las 1:19
0

Te dejo un ejemplo de como podrías hacerlo en Javascript.

<h1 id="mi-h1">
  Texto definido desde HTML
</h1>

<div>
  <input id="input" type="text">
  <button id="button">
    Cambiar texto
  </button>
</div>

En mi html tengo una etiqueta <h1> con texto definido desde el código html. El cual será cambiado con lo escrito en el input al momento de dar click en el botón.

let h1 = document.getElementById('mi-h1');
let input = document.getElementById('input');
let button = document.getElementById('button');

button.onclick = () => {
  let texto = input.value;
  h1.innerHTML=texto;
}

Declaro unas variables haciendo referencia a los elementos html. Al hacer click en el botón se almacena lo escrito en el input y se pone en la etiqueta <h1>.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.