簡単なリアルタイムWYSYWIGエディターでJqueryのテキストボックス

Question

私は厳密にはプログラミングの問題ではないことを知っていますが、とにかくそれはとにかく尋ねる最高のウェブサイトだと思いますので、投票しません:)とにかく、私はしようとしていますフォントの色とサイズを変更できる非常にシンプルなテキストボックスエディタを作成します。これはリアルタイムで表示する必要があります。これまでのところ、JQueryでリアルタイムに更新されたdivを作成しましたが、残りの作業を実行する最善の方法は何か分かりません。そこに私を助けることができるものはありますか？実装が難しくなるため、高度なWYSIWYGエディタを使用しないことをお勧めします。それとも最も賢明な解決策ですか？アドバイスをお願いしますか？

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の内容を追加します。