This discussion is archived
2 Replies Latest reply: Feb 26, 2013 3:59 PM by Mike Straka RSS

How to Change Width of Rich Text Editor

Joe Upshaw Journeyer
Currently Being Moderated
We are attempting to use a rich text editor. By default, the span for the RTE gets a width of 760px. This is much wider than we'd like.

The id attribute of the span control gets set to cke_<PAGE_ITEM_NAME_HERE>, so this jQeury selector should obtain a reference to the control and allow us to change or remove the width attibute
span#cke_P3_DESCRIPTION_2
However, what we've notice is that the control does not exist until after the page has been loaded. In other words, if we do this in the "Execute when Page Loads" section, nothing happens
$('span#cke_P3_DESCRIPTION_2').css('width','');
We can confirm this by popping up an alert. In the page load section, this yields "0" but, in a button on the page, that gets clicked after the page is open, it yields "1"
alert($('span#cke_P3_DESCRIPTION_2').length);
So, since the control isn't actually there at load time, what's the best way to do this?

-Joe
  • 1. Re: How to Change Width of Rich Text Editor
    VC Guru
    Currently Being Moderated
    You cannot access the CKEDITOR instances until they are loaded/ready, But I have never tried re-sizing the CKEDITORs

    Create a dynamic action with event Page Load > true action as Execute JavaScript Code with
    CKEDITOR.on('instanceReady', function (e) {
         $('span#cke_P3_DESCRIPTION_2').css('width', 100);
    })
  • 2. Re: How to Change Width of Rich Text Editor
    Mike Straka Newbie
    Currently Being Moderated
    Thanks for this tip, VC! Worked like a charm.

    I was having a problem with a rich text field in a modal region in one of the new responsive themes (theme 25). The page dutifully alters the spacing and layout of the page regions as the browser window is made wider or narrower, and the modal region also resizes appropriately. But the CKEditor window within the modal region stubbornly stayed at whatever value it defaults to (30 characters, which I guess translates to the number of pixels mentioned by the OP).

    I slightly modified your code below to set the width property to 100% instead of a fixed value and now the editor window expands to fill the available modal region width. Perfect!

    Mike

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points