updating div with text from ckeditor - getting styles to work

I'm fairly new to JS so sorry in advance if this is a stupid question!

I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page.

My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic.

I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself."

I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?)

So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself?

heres the JS I'm using to update the div:

<label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#story').html(editorText);
}</script>

Code (markup):

 

How about some simple javascript replace before sending it to div? Something like this maybe:

editorText = editorText.replace("<strong>", "<b>");
editorText = editorText.replace("<\/strong>", "<\/b>");
editorText = editorText.replace("<em>", "<i>");
editorText = editorText.replace("<\/em>", "<\/i>");

Code (markup):

This should replace <strong> and </strong> tags to <b> and </b> and also <em> and </em> to <i> and </i> . If that was your only problem then this will fix it. So your full code should look like this:

<label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
editorText = editorText.replace("<strong>", "<b>");
editorText = editorText.replace("<\/strong>", "<\/b>");
editorText = editorText.replace("<em>", "<i>");
editorText = editorText.replace("<\/em>", "<\/i>");
$('#story').html(editorText);
}</script>

Code (markup):