homepage Welcome to WebmasterWorld Guest from 54.166.116.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
updating div with text from ckeditor - getting styles to work
barricades



 
Msg#: 4380161 posted 1:38 pm on Oct 27, 2011 (gmt 0)

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>

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved