1

La información que tenga el textarea automáticamente debe pasar también al div editable, y viceversa es decir si yo llego escribir en div también debe pasar en el textarea ambos deben tener una conexión, por ahora dispongo de lo siguiente pero no funciona:

$(function() {
    let EditHTML = $("#detail");
    EditHTML.on("keyup", function(e) {
        $("#editor").val(EditHTML.html());
        $("#editor").keyup();
    });
});
#editor {
    resize: vertical;
    overflow: auto;
    border: 1px solid silver;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    padding: 1em;
    background-color: white;
    width: 100%;
    color: #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="detail">Esta información debe pasar al div editable y viceversa, es decir todo cambio que se realicen tanto en el textarea con el div editable en ambos se debe mostrar </textarea>
<div id="editor" contenteditable></div>

1 respuesta 1

2

El detalle está en el val y el html, también puedes tener dos funciones para poder lograr escribir lo mismo en los dos elementos.

$(document).ready(function(){
            var EditHTML = $("#detail");
            $("#editor").html(EditHTML.val());
        });
    
$(function() {    
  var EditHTML = $("#detail");
    EditHTML.on("keyup", function(e) {
        $("#editor").html(EditHTML.val());
    });
});

$(function() {
  var EditHTML = $("#editor");
    EditHTML.on("keyup", function(e) {
        $("#detail").val(EditHTML.html());
    });
});
#editor {
    resize: vertical;
    overflow: auto;
    border: 1px solid silver;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    padding: 1em;
    background-color: white;
    width: 100%;
    color: #333;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="detail">Esta información debe pasar al div editable y viceversa, es decir todo cambio que se realicen tanto en el textarea con el div editable en ambos se debe mostrar </textarea>
<div id="editor" contenteditable></div>

6
  • alguna forma de que se muestre al instante sin tener que dar enter en el textarea ??
    – Mary
    Commented el 24 nov. 2020 a las 20:33
  • Puedes verificar que cuando el documento este listo añada el contenido del textarea. Edite la respuesta Commented el 24 nov. 2020 a las 20:41
  • Aquí funciona muy bien pero desde mi código igual me toca dar un enter en el textarea para visualizar los datos, creo que a lo mejor es por que los datos los estoy cargando con ajax en un modal... Algúna manera de que al dar click en el div editable este envié un enter o un espacio automáticamente al textarea ?
    – Mary
    Commented el 24 nov. 2020 a las 21:19
  • Desde el Ajax, después de cargar los datos al $("#detail"), puedes pasar el valor a $("#editor") con $("#editor").html($("#detail").val()) Commented el 24 nov. 2020 a las 21:27
  • Aquí lo debo agregar verdad? .done(function(data){ $('#detail').val(data.detail); $('#insert').val("Update"); $('[data-modal="add_data_modal"]').fadeIn(350); }).fail(function(){ alert( "Ajax Request fail" ); }) al final de todo dentro de done
    – Mary
    Commented el 24 nov. 2020 a las 23:25

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.