Home / Questions / 14299
Accepted
Máxima Alekz
Asked: 2020-06-18 07:48:29 +0800 CST 2020-06-18 07:48:29 +0800 CST

How to add images to a textarea with JavaScript?

  • 772

I have a button

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

I have the following Javascript code

$(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);
    });
})();

I want that when pressing the button it adds the image in a <textarea id="text">and that I can continue typing.

javascript

4 Answers

  1. What you are trying to do is not possible. A type tag <textarea />is designed to contain text only. What you can do is set this as the background image, as well as make the textarea transparent via background-color: transparentCSS.

    $('#btn').on('click', function() {
  var src = $(this).find('img').attr('src');
  $('textarea').css('background-image', 'url('+src+')');
});
    button {
  border: none;
  border-radius: 100%;
  background-color: transparent;
  cursor: pointer;
}
button:focus { outline: none; }
button img {
  background-size: cover;
  border-radius: 100%;
  height: 20px;
  width: 20px;
}
textarea {
  background-color: transparent;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #ddd;
  padding: .25rem;
  transition: border-color .2s ease;
}
textarea:focus {
  border-color: rgba(108, 153, 208, .7);
  outline: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="btn">
    <img src="http://i.imgur.com/XQVF7d0.png">
</button>
<br />
<textarea cols="40" rows="10"></textarea>

    • 8
  2. Best Answer

    You can't do it with textareadirectly because textareaby definition it only supports text. What you could do is create your own rich text editor (RTF), although I would sincerely recommend you to go for other already extended options (such as TinyMCE) because it is an arduous and complex task.

    This solution would require one iframeor one divthat is editable, create your own buttons that will perform different functions and, when the necessary action is to be performed (send the form, or the editable field loses focus), update the value of the textarea ("invisible") specifically.

    Here is a basic example (click on "Submit form" to see the value of the textarea):

    $(function () {
  // cuando se pulse en una image de emoticono, copiarlo al final del texto
  $('.rtf-tools img').on('click', function() {
    var text = $(this).closest(".rtf-box").find(".rtf-text");
    text.html(text.html() + "<img class='emoji' src='" + $(this).attr("src") + "' />");
  });

  // cuando se envia el formulario se actualizan los valores del textarea
  $('form').on("submit", function(e) {
    e.preventDefault();
    $(".rtf-text").each(function() {
      var textarea = $(this).closest(".rtf-box").find("textarea");
      textarea.val($(this).html());
      // esto no es necesario, solo para demo
      alert("El valor del textarea es: '" + textarea.val() + "'");
    });
  });
})();
    .rtf-box {
  width:400px;
  height:190px;
  border:1px solid gray;
  overflow:hidden;
}

.rtf-tools {
  height:40px;
  background:#f0f0f0;
}

.rtf-tools img {
  height:30px;
  width:30px;
  margin-top:5px;
  margin-left:5px;
  cursor:pointer;
  border:1px solid #f0f0f0;
}

.rtf-tools img:hover {
  border:1px solid #ffffff;
  background:#f8f8f8;
  opacity:0.8;
}

.rtf-text {
  height:150px;
  padding:12px;
  box-sizing:border-box;
}

.rtf-text .emoji {
  height:20px;
  width:20px;
  vertical-align:bottom;
}

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

    But as you can see it is very basic (the emoticon is only placed at the end and not where the cursor is), if you really want to create a more complete RTF that would require much more: calculating the position of the cursor to place the emoticon there, different functionalities ( bold, italic, etc) and it doesn't seem like it, but it starts to add up and add up and can end up being unbelievably big.

    • 5

  3. I'm new to this, I'll add the code below and good luck mate.

    What this code does is that when you press an emoticon or an image in this case "an image like the WhatsApp faces that I use" and what it does is add the same face in a divand continue writing next to the inserted face .

    This is the HTML code:

    <div class="rtf-tools"> 
    <img onclick='insertar_emogi(this)'src="imagenes/1.png"/><img onclick='insertar_emogi(this)' src="imagenes/2.png"/> 
</div>

    This is the part of the SCRIPT:

    <script type="text/javascript"> 
function insertar_emogi(emo){ 
    document.getElementById('campo').focus();
    document.execCommand('insertHTML',false,'<img id="im" style="width:17px;height:17px;" src='+emo.src+' />') 
} 
</script>

    What this code does is that when you press an emoticon or an image in this case "an image like the WhatsApp faces that I use" and what it does is add the same face in a div and continue writing next to the face inserted

    • 3

  4. With textarea it may not be possible (icons could be used if they are included in the characters of a font), but through an editable div it is possible to add custom icons.

    Example by andrewfiorillo

    • 1