¿Cómo añadir imágenes a un textarea con JavaScript?

publicado por: Anonymous

Tengo un botón

<button id="emoji"><img src="emoji.png"></button>

Tengo el siguiente código Javascript

$(function () {
    $('#emoji1').on('click', function() {
        var img = document.createElement('img');
        img.className = 'emoji';
        img.src = 'stick/kiss.png';
        var text = $('#text');
        text.val(text.val() + img);
    });
})();

Quiero que al presionar el botón agregue la imagen en un <textarea id="text"> y que pueda seguir escribiendo.

solución

No puedes hacerlo con textarea directamente porque textarea por definición sólo admite texto. Lo que podrías hacer es crear tu propio editor de texto enriquecido (RTF), aunque sinceramente te recomendaría que optaras por otras opciones ya extendidas (como TinyMCE) porque es una tarea ardua y compleja.

Esta solución requeriría un iframe o un div que sea editable, crear tus propios botones que realizarán diferentes funciones y, cuando se vaya a realizar la acción necesaria (mandar el formulario, o que el campo editable pierda el foco), que se actualice el valor del textarea (“invisible”) en concreto.

Aquí te dejo un ejemplo básico (pulsa en “Enviar formulario” para ver el valor del textarea):

_x000D_

_x000D_

$(function () {_x000D_
  // cuando se pulse en una image de emoticono, copiarlo al final del texto_x000D_
  $('.rtf-tools img').on('click', function() {_x000D_
    var text = $(this).closest(".rtf-box").find(".rtf-text");_x000D_
    text.html(text.html() + "<img class='emoji' src='" + $(this).attr("src") + "' />");_x000D_
  });_x000D_
_x000D_
  // cuando se envia el formulario se actualizan los valores del textarea_x000D_
  $('form').on("submit", function(e) {_x000D_
    e.preventDefault();_x000D_
    $(".rtf-text").each(function() {_x000D_
      var textarea = $(this).closest(".rtf-box").find("textarea");_x000D_
      textarea.val($(this).html());_x000D_
      // esto no es necesario, solo para demo_x000D_
      alert("El valor del textarea es: '" + textarea.val() + "'");_x000D_
    });_x000D_
  });_x000D_
})();

_x000D_

.rtf-box {_x000D_
  width:400px;_x000D_
  height:190px;_x000D_
  border:1px solid gray;_x000D_
  overflow:hidden;_x000D_
}_x000D_
_x000D_
.rtf-tools {_x000D_
  height:40px;_x000D_
  background:#f0f0f0;_x000D_
}_x000D_
_x000D_
.rtf-tools img {_x000D_
  height:30px;_x000D_
  width:30px;_x000D_
  margin-top:5px;_x000D_
  margin-left:5px;_x000D_
  cursor:pointer;_x000D_
  border:1px solid #f0f0f0;_x000D_
}_x000D_
_x000D_
.rtf-tools img:hover {_x000D_
  border:1px solid #ffffff;_x000D_
  background:#f8f8f8;_x000D_
  opacity:0.8;_x000D_
}_x000D_
_x000D_
.rtf-text {_x000D_
  height:150px;_x000D_
  padding:12px;_x000D_
  box-sizing:border-box;_x000D_
}_x000D_
_x000D_
.rtf-text .emoji {_x000D_
  height:20px;_x000D_
  width:20px;_x000D_
  vertical-align:bottom;_x000D_
}_x000D_
_x000D_
.rtf-box textarea {_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<form>_x000D_
  <div class="rtf-box">_x000D_
    <div class="rtf-tools">_x000D_
      <img src="http://i.imgur.com/XQVF7d0.png"/><img src="http://i.imgur.com/QAobBr2.png"/>_x000D_
    </div>_x000D_
    <div class="rtf-text" contenteditable="true">_x000D_
    </div>_x000D_
    <textarea></textarea>_x000D_
  </div>_x000D_
  <button>Enviar formulario</button>_x000D_
</form>

_x000D_

_x000D_

_x000D_

Pero como puedes ver es muy básico (sólo se pone el emoticono al final y no donde esté el cursor), si realmente quieres crear un RTF más completo eso requeriría bastante más: calcular la posición del cursor para colocar ahí el emoticono, diferentes funcionalidades (negrita, cursiva, etc) y parece que no, pero empieza a sumar y sumar y puede acabar siendo increíblemente grande.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *