How to style blockquotes in a WYSIWYG editor

I'm kind of new to Javascript and have been doing small projects to get myself acquainted with the language. I've done things like draggable boxes, a calculator, etc., and now I'm working on a small WYSIWYG editor for practice and possibly a future site.

In this project I'm using an iframe as the text box using this snippet of code:

<!-- images as buttons -->
<iframe id='reply'></iframe>

<script>
var doc;

doc = document.getElementById('reply');
doc = doc.contentDocument || document.frames.reply.document;
doc.designMode = 'on';
</script>

to access the document of the iframe. After accessing the document I use various calls to doc.execCommand('someCommand', false, null); to create the editing interface. I've gotten several buttons to work (bold, italic, underline, strikethrough, sub and superscript, etc.) but I'm having trouble with block quotes. This is for a theoretical message board and the editor needs to be able to make long quotations recognizable, much like how the blockquote button on Stack Overflow operates.

To make this work, so far I've used doc.execCommand('formatblock', false, '<blockquote>');. This method will indent the text properly, but my CSS开发者_JAVA技巧 doesn't effect it. I assume this is because the CSS on that document doesn't apply inside the iframe . . . but I don't know how to style the stuff inside of it. Is there a way to insert a stylesheet inside the iframe? Am I going about this all wrong? Should I perhaps try a textarea over an iframe? Thanks for the help!

You would be better off outputting the results to a div as it forms part of the dom for the page you're viewing. Iframes are for loading independant urls and pages therefore you'd need to style the page within the iframe or link to the same stylesheet as the page containing the iframe.

How about a div like this you can set the oveflow property in the css to overflow: scroll; and get a similar effect to the iframe whilst keeping all your elements in the same page?

<div id='reply'></div>

Css for the div

#reply {
  width: 200px;
  height: 150px;
  overflow: scroll;
  /* additional properties */
}

I hope this helps...