Geek Answers Handbook

Simple WYSYWIG real-time editor for text field in jQuery

I know this is not a programming issue, but I think SO is the best website to ask it anyway, so please don't vote for me :) Anyway, I'm trying to create a very simple text box editor which allows you to change the color and size of the font. This should be seen in real time. So far I have created a div updated in real time in jQuery, but I don't know what is the best way to do the rest. Is there anything that can help me. I prefer not to use any advanced WYSIWYG editors, because the implementation will be too complicated. Or is this the smartest solution? Any tips please?

var div = $('#mydiv')[0]; $('input').bind('keyup change', function() { div.innerHTML = this.value; }); <form>Text here:<input></form>
+4
source share
2 answers

This is probably not exactly what you are looking for, but just want to show you this jsFiddle , which I did quickly

Hope this 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 ); });
+2
source

Can you use a contenteditable div for this?

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

And add the content contenteditable to the hidden field in the submit form.

+3
source

More articles:


All Articles