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

如何使用 JavaScript 将图像添加到文本区域？

  • 772

我有一个按钮

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

我有以下 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);
    });
})();

我希望在按下按钮时将图像添加到 a 中<textarea id="text">，并且我可以继续输入。

javascript

4 Answers

  1. 你试图做的事情是不可能的。类型标记<textarea />旨在仅包含文本。您可以做的就是将其设置为背景图像，并通过background-color: transparentCSS 使 textarea 透明。

    $('#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

    您不能textarea直接使用它，因为textarea根据定义它只支持文本。您可以做的是创建自己的富文本编辑器 (RTF)，尽管我真诚地建议您使用其他已经扩展的选项（例如 TinyMCE），因为这是一项艰巨而复杂的任务。

    此解决方案需要一个iframe或一个div可编辑的，创建您自己的按钮来执行不同的功能，并且在执行必要的操作时（发送表单，或可编辑字段失去焦点），更新 textarea 的值（ “隐形”）特别是。

    这是一个基本示例（单击“提交表单”以查看 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>

    但是正如您所看到的，它是非常基本的（表情符号仅放置在末尾，而不是光标所在的位置），如果您真的想创建一个更完整的 RTF，这需要更多：计算要放置的光标的位置那里的表情符号，不同的功能（粗体，斜体等），看起来不像，但它开始累加起来，最终可能会变得难以置信的大。

    • 5

  3. 我是新手，我将在下面添加代码，祝你好运。

    这段代码的作用是，当您在这种情况下按下表情符号或图像时，“像我使用的 WhatsApp 面孔这样的图像”，它的作用是在 a 中添加相同的面孔div并继续在插入的面孔旁边书写。

    这是 HTML 代码：

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

    这是脚本的一部分：

    <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>

    这段代码的作用是，当您在这种情况下按下表情符号或图像时，“像我使用的 WhatsApp 面孔这样的图像”，它的作用是在 div 中添加相同的面孔并继续在插入的面孔旁边书写

    • 3

  4. 使用 textarea 可能是不可能的（如果图标包含在字体的字符中，则可以使用它们），但是通过可编辑的 div 可以添加自定义图标。

    示例由 andrewfiorillo

    • 1