Smileys couldn't displayed within text box php codeigniter - php

Question

I 've used the below code to convert text to emoticons in javascript,
function add_smile($text) {
var $text=$text;
function RegExpEscape(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
var emoticons = {
':)' : 'images/smileys/angry.gif',
':(' : 'images/smileys/sad.gif',
';)' : 'images/smileys/wink.gif'
}
var result =$text;
var emotcode;
var regex;
for (emotcode in emoticons)
{
regex = new RegExp(RegExpEscape(emotcode), 'gi');
result = result.replace(regex, function(match) {
var pic = emoticons[match.toLowerCase()];
if (pic != undefined) {
return '<img src="' + pic + '"/>';
} else {
return match;
}
});
}
$('#editor-textarea').val($('#editor-textarea').val() + " " + result);
}
In my view,
<textarea name="content" class="editor-textarea" id="editor-textarea">
</textarea>
<?php foreach($smiles as $k=>$v) : ?>
<button type="button" class="nobutton" onclick="add_smile('<?php echo $k ?>')"><?php echo $v ?></button>
<?php endforeach; ?>
The javascript function now replace the text with <img src="images/smileys/angry.gif"> as text not display as image.How do I solve this?

Answer 1

This is how textarea works - it displays and allows you to edit text. If you need a WYSIWYG control, think of using contentEditable (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content)
$("button.make-editable").on("click", function() {
$("#inputbox")
.attr('contenteditable', 'true')
.html("<b>this is bold</b>this is smiley \
<img src='https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg' />");
});
$("button.make-standard").on("click", function() {
var inputbox = $("#inputbox");
inputbox.attr('contenteditable', 'false');
console.log(inputbox.html());
});
#inputbox {
border: 1px solid red;
padding: 10px;
}
#inputbox img {
width: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputbox">
This text should become editable.
</div>
<button class='make-editable'>Make DIV editable</button>
<button class='make-standard'>Remove "contentEditable", get value</button>