Как добавлять изображения к textarea с языком сценариев JavaScript?

У меня есть кнопка

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

Я хочу, чтобы, нажав на кнопку, он добавил изображение в одном <textarea id="text"> и что смог продолжать писать.

6
задан 17.06.2016, 21:13
4 ответа

Ты не можешь делать это с textarea прямо потому что textarea определением только допусти текст. То, что ты мог бы делать, состоит в том, чтобы создавать твой собственный форматированный текстовый редактор (RTF), хотя он искренне рекомендовал бы тебе выбирать другие уже распространенные выборы (как TinyMCE), потому что это трудное и сложное задание.

Это решение потребовало бы одного iframe или один div что был editable, создавать твои собственные кнопки, которые реализуют различные функции и, когда будет осуществляться необходимое действие (посылать формуляр, или что поле editable потеряло фокус), которое обновляет стоимость ("невидимого") 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>

Но поскольку ты можешь видеть, он очень основной (только кладется emoticono в конце концов, и не где был курсор), если ты действительно хочешь создать более полный RTF, это потребовало бы достаточно больше: вычислять положение курсора, чтобы размещать там emoticono, различную функциональность (полужирный шрифт, италик, и т.д.) и кажись что не, но начни складывать и суммировать и смоги заканчивать тем, что будь невероятно большим.

4
ответ дан 24.11.2019, 14:07
  • 1
    В действительности textarea, если он может позволять im и # 225; гены, с EmojiArea занимается textarea. –  Máxima Alekz 03.07.2016, 00:28
  • 2
    @M и # 225; ximaAlekz Не, textarea не позволяет im и # 225; гены. Если ты обращаешь внимание в c и # 243; я говорю шрифт EmojiArea (или если ты инспектируешь c и # 243; я говорю, что он производит) podr и # 225; s видеть, что то, что он делает, состоит в том, чтобы производить один div с contenteditable в сходном способе в, как я это делаю в ответе. –  Alvaro Montoro♦ 03.07.2016, 00:52
  • 3
    Проверь пример... Ах и # 237; s и # 243; это есть textarea, и c и # 243; я говорю, что он s и # 243; Javascript. –  Máxima Alekz 03.07.2016, 00:53
  • 4
    @M и # 225; ximaAlekz я проверил пример, создал собственный пример, чтобы видеть c и # 243; mo hac и # 237; в и я посмотрел c и # 243; я говорю шрифт plugin. EmojiArea верьте в один div с contenteditable и класс " emoji-wysiwyg-editor" спрячь textarea и проконтролируй различные события, которые происходят в div. –  Alvaro Montoro♦ 03.07.2016, 00:57

То, что ты стараешься делать, не является возможным. Одна приклеивает этикетку на тип <textarea /> будь разработана, чтобы содержать текст только. То, что ты можешь делать, состоит в том, чтобы помещать этой изображение фона, также, делать textarea transparent посредством background-color: transparent в CSS.

$('#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
ответ дан 24.11.2019, 14:07
  • 1
    Мира Эмоджиэреа, он занимается с textarea. –  Máxima Alekz 03.07.2016, 00:29
  • 2
    Спасибо, это подало меня и функционирует совершенно. Привет –  Adriana Hernández 04.08.2017, 20:54

Я новый в этом, agregarГ© cГіdigo внизу и много удачи друг.

Восток cГіdigo то, что он делает, состоит, в том, что нажав на смайлик или изображение в этом случае "изображение тип caritas whatsApp то, что я использовал", и то, что он делает, состоит в том, чтобы добавлять тот же carita в одном div и продолжать писать рядом с введенным carita.

Восток - cГіdigo 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>

Восток кодом то, что он делает, состоит, в том, что нажав на смайлик или изображение в этом случае "изображение тип caritas whatsApp то, что я использовал", и то, что он делает, состоит в том, чтобы добавлять тот же carita в div и продолжать писать рядом с введенным carita

3
ответ дан 24.11.2019, 14:07
  • 1
    В мое это оно я не функционировало. Я это resolví лучше с ответом MitsuG –  Adriana Hernández 04.08.2017, 20:53

С textarea смоги, что не смогли (могли бы быть использованными значки, если они включены в символы шрифта), но посредством div editable, если возможно добавлять персонализированные значки.

Пример из-за andrewfiorillo

1
ответ дан 24.11.2019, 14:07