Wordlike Input screen in website (docs.google or hotmail) javascript php

Question

I believe the title already says it all, but here is my question:

what I want to know is how to realize a Office Wordlike "piece of paper" inputscreen. I want to build a some kind of "newsletter renderer" which I want to show such an screen for the user. only solution I could think of was an big <textarea> with some CSS styling.

(I already searched on the web but I still found nothing) Excuse my writing, I'm not so great in English.

---

I have used the JavaScript-based "WYSIWYG editor" now. It 'works' , but for my own emailing backend (to come) I need to get the value out of there Iframe.

id of iframe is: #content_ifr . in the iframe (what i've found) there is a < p > element where my/your submitted text is put in.

But if I put the following code in console, I get "an empty string" back: console.debug($("#content_ifr").contents().find("p").contents().val());

or "undefined" :

console.debug($("#content_ifr").contents().find("p").contents().value);

what to do? :O

I will put latest version online asap: http://dominiquedebrabander.nl/nieuwsbrief

---

update: console.debug(tinyMCE.get('content').startContent) is the way to get the content out of the iframe. (is it?) thanks (2 thirtydot ;))

I think i'm helped here, but I have 1 small question left (just because I am curious), how do they get the selected text? (to achieve underlines and bold on selected text).
"window.getSelection()" doesn't seem to work? or am I doing something wrong? :O

Answer 1

what I want to know is how to realize a Office Wordlike "piece of paper" inputscreen

It sounds like you're looking for a JavaScript-based "WYSIWYG editor".

Try TinyMCE, here's a relevant demo.