2 Replies Latest reply on Feb 26, 2013 11:59 PM by Mike Straka-Oracle

    How to Change Width of Rich Text Editor

    Joe Upshaw
      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
      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
      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"
      So, since the control isn't actually there at load time, what's the best way to do this?

        • 1. Re: How to Change Width of Rich Text Editor
          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-Oracle
            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!