当我点击那个html元素时，使用一些css效果的文本编辑器

I am creating a business card design application using jquery, php and mysql as backend.

What I want is to generate an inline css editor with a few effects when I click an area. For example, say I have a div containing some text

<div id="name_field">some text</div>

When I click this div I must have a dialog near this text so that I can customise some css like font size color etc. How can I implement this?

here is the image

and card generation example what i want to implement is

http://www.optimalprint.co.uk/edit-design?cid=4LKBh0l-eFk&design_id=TqsipgVSZXI#id:ge8IE8NUryiE_OLWtkSZK1Dyugll9_NKGxAXuEfXWuE+page:1

(Please note one thing: this dialog must have a unique instance and must not effect other elements, i.e. it effects only the element that have generated it).

Secondly, on server side I want to create an image looking exactly like the div area I have created and customised.

Any idea or suggestions are welcome.