Inserare img in textarea

[ddorel]

Bună Marplo,
Ce trebuie schimat in codul de mai jos în așa fel în care dau click pe imagine sa imi arate imaginea in câmpul textarea , cu varianta &#x1F600; se afisiază iar cu "<img src= " nu merge doar imi arata tot codul. In campul textarea vreau sa se afiseze imaginea nu codul.

Cod: Selectaţi tot

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form id="post">
	<div class="container-comment-reply">
			<div class="textarea-wrapper">
				<textarea  cols="30"  id="play" placeholder="Scrie..." rows="3" spellcheck="false"></textarea>
                    <button type="submit" id="add" class="">Trimite</button>

		    </div>
	</div>

<hr>
</form>	
<script src='inputEmoji.js'></script>
 	<script>
		$(function () {
			$('#play').emoji({place: 'after'});
		})
	</script>   


<script>
(function ($) {
	$.fn.emoji = function (params) {
		var defaults = {
			button: "<div id='emoj'>&#x1F642;</div>",
			
			place: 'before',
			emojis: 
			
			['<img src=//t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1 style=width:20px>','&#x1F600;'],
			
			fontSize: '18px',
			listCSS: {position: 'relative', border: '1px solid #D5D5D5', 'z-index':'99999999', 'width':'95%', 'background-color': '#fcfcfc', display: 'none'},
			rowSize: 9,
		};
		var settings = {};
		if (!params) {
			settings = defaults;
		} else {
			for (var n in defaults) {
				settings[n] = params[n] ? params[n] : defaults[n];
			}
		}

		this.each(function (n, input) {
			var $input = $(input);

			function showEmoji() {
				
				$list.show(500);
				$input.focus();
				setTimeout(function () {
					$(document).on('click', closeEmoji);
				}, 1);
			}

			function closeEmoji() {
				
				$list.hide(500);
				$(document).off('click', closeEmoji);
			}

			function clickEmoji(ev) {
				ev.preventDefault();
				if (input.selectionStart || input.selectionStart == '0') {
					var startPos = input.selectionStart;
					var endPos = input.selectionEnd;
					input.value = input.value.substring(0, startPos)
						+ ev.currentTarget.innerHTML
						+ input.value.substring(endPos, input.value.length);
				} else {
					input.value += ev.currentTarget.innerHTML;
				}

				closeEmoji();
				$input.focus();
				input.selectionStart = startPos + 2;
				input.selectionEnd = endPos + 2;
			}
           
			var $button = $("<span>").html(settings.button).css({cursor: 'pointer', 'font-size': settings.fontSize}).on('click', showEmoji);
			var $list = $('<div>').css(defaults.listCSS).css(settings.listCSS);
			
			for (var n in settings.emojis) {
				if (n > 0 && n % settings.rowSize == 0) {
					$("<br>").appendTo($list);
					
				}
				$("<span>").html(settings.emojis[n]).css({ cursor: 'pointer', 'font-size': settings.fontSize}).on('click', clickEmoji).appendTo($list);	
                           
		          
			}

			if (settings.place === 'before') {
				$button.insertBefore(this);
			} else {
				$button.insertAfter(this);
			}
			$list.insertAfter($input);
		});
		return this;
	};
}
)(jQuery);
</script>

Salut,
In textarea nu se pot afisa elemente html, precum <img>, ci doar cod text; de aceea are denumirea de textarea (zona de text).
Foloseste varianta care functioneaza, cu cod-hex, de tip &#x...

Ok o sa folosesc coduri hex .