Simple real time WYSYWIG editor for text box in Jquery

I know it is not strictly a programming question, but I think SO is the best website to ask it anyway, so please dont down vote me:) Anyway, I am trying to create a very simple textbox editor that allows to change font colour and size. This should be visible in real time. So far I have created a div updated in real time in JQuery however I dont know what is the best way to do the rest. Is there anything out there that can help me. I prefer not to use any of the advanced WYSIWYG editors because the i开发者_高级运维mplementation would be too difficult. Or is it the most sensible solution? Any advice please?

var div = $('#mydiv')[0];

$('input').bind('keyup change', function() {
    div.innerHTML = this.value;
});

<form>Text here:<input></form>

---

Can't you just use a contenteditable div for this?

http://blog.whatwg.org/the-road-to-html-5-contenteditable

And add the content of the contenteditable to a hidden field on form submit.

---

This is probably not exactly what you're looking for but just wanted to show you this jsFiddle i made quickly

I hope it gives you an idea of what you were looking for.

<div id="mydiv"></div>

<select id="color">
    <option></option>
    <option>Red</option>
    <option>Blue</option>
</select>
<select id="size">
    <option></option>
    <option>10px</option>
    <option>20px</option>
</select>
<form>Text here:<input></form>

JS here

var div = $('#mydiv')[0];

$('input').bind('keyup change', function() {
    div.innerHTML = this.value;
});

$('#color').change(function(){
    var colorSelected = $(this).val();
    $('#mydiv').css('color',colorSelected);
});
$('#size').change(function(){
    var sizeSelected = $(this).val();
    $('#mydiv').css('font-size',sizeSelected );
});