簡單的實時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的內容添加到一個隱藏字段的形式提交。