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

Question

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

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

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

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

Answer 1

这可能不是正是你要找的内容，但只是想告诉你这个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); 
}); 

Answer 2

你就不能使用这个CONTENTEDITABLE DIV？

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

而且CONTENTEDITABLE的内容添加到一个隐藏字段的形式提交。