javascript – Jquery中文本框的简单实时WYSYWIG编辑器

我知道这不是一个严格的编程问题,但我认为无论如何SO是最好的网站,所以请不要投票给我:)无论如何,我试图创建一个非常简单的文本框编辑器,允许更改字体颜色和尺寸.这应该是实时可见的.到目前为止,我已经在JQuery中实时更新了div,但是我不知道剩下的最好的方法是什么.有没有什么可以帮助我.我不想使用任何高级WYSIWYG编辑器,因为实现起来会太困难.或者它是最明智的解决方案？有什么建议吗？

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

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

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

解决方法:

这可能不是你想要的,但只是想向你展示我快速制作的jsFiddle

我希望它能让你了解你在寻找什么.

<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在这里

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