Мы можем использовать контент, редактируемый для этого, вот принцип минус некоторые другие причуды, с которыми вы столкнетесь (например, размещение курсора)
<div id="editor" contenteditable="true"> </div>
Использование некоторого jquery
$("#editor").on("blur keyup paste input", function() {
var content = $(this).html(),
smiley = "<img src='smiley.png' alt='smiley'/>";
content = content.replace(/:)/g, smiley);
$(this).html(content);
});
Чтобы получить значение из contenteditable близко к тому же, как вы получите значение для ввода - используйте .html()
вместо .val()
var valuetosend = $("#editor").html();