Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Editor > Setting Content Area Defaults of RadEditor 7.3+

• Telerik Admin Master

  Posted on Jan 10, 2008 (permalink)

  RadEditor 7.3 introduces a slight change to the way EditorContentArea.css works.
   
  In the latest version 7.3 of RadEditor an enhanced content filters mechanism was introduced. The content filters mechanism is responsible above all, for correcting browser-generated HTML into XHTML. The mechanism was developed for RadEditor "Prometheus". The changes itnroduced allow the editor to properly cover more scenarios.
   
  The editor loads the CSS classes from the EditorContentArea.css file in the RadControls/Editor/Skins/<Used_Skin>/ folder, followed by the CSS styles from the parent page [or from external css files if CssFiles property is used].
   
  To style the elements in the content area you need to define global css classes for them, e.g. body, table, td, th
   
  body
  {
      background-color: White !important;
      color: Black !important;
      font-family: Arial !important;
      font-size: 10px !important;
      padding:3px;
      background-image: none;
      margin: 0px;
      text-align: left;
      scrollbar-face-color: #E9E9E9;
      scrollbar-highlight-color: #FFFFFF;
      scrollbar-shadow-color: #E9E9E9;
      scrollbar-3dlight-color: #DBDBDB;
      scrollbar-arrow-color: #787878;
      scrollbar-track-color: #F5F5F5;
      scrollbar-darkshadow-color: #AEAEAE;
      word-wrap: break-word;
  }
   
  
  Please, note the use of the !important attribute after the values of some properties.
  
  Since the EditorContentArea.css is loaded first on purpose, it is possible for another global style to override its settings.If you want to prevent the overriding of the properties defined in the EditorContentArea.css file just set the !important attribute after their values.
   
  Save the file and restart your browser to see the changes.

• Brad

  Posted on Jan 16, 2008 (permalink)

  Hello:
  
  This is not working within our application.
  
  We had somehow successfully overridden this problem with the older version we were using, but with the changes to this one the editor continues to pick up the styles from the primary style sheet (most annoyingly the background color and the default text-align property).  We have added the !important designation as recommended, but that has still had no effect. 
  
  Any other suggestions?
  
  Brad

• Tervel Tervel

  Posted on Jan 16, 2008 (permalink)

  Hello Brad,
  
  If indeed you changed the correct file in the correct skin, it is likely that the problem is due to caching in the browser. Please, clear your browser cache, close the browser and reopen the page. The !important attribute is compulsory and overrides any other css setting (unless this setting also has the !important attribute).
  
  In addition to this - you could easily specify just the css files you want loaded in the editor by using its CssFiles property - this is how the editor will not pick up the styles from the parent page. The following online demo shows how to use the CssFiles property -
  http://www.telerik.com/demos/aspnet/Editor/Examples/StylesAndExternalCssFiles/DefaultCS.aspx
  
  
  Best wishes,
  Tervel
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Brad

  Posted on Jan 16, 2008 (permalink)

  Well, we may have something else going on, perhaps because we write the styles to the headers on page load.  We can change the specific skin within the control time and time again, and it does indeed reload the outer look/feel of the editor, however, the interior portion of the editor is where our problems lie.  The !important tag also seems to have no impact whatsoever.
  
  But perhaps the new update really isn't even necessary.  By installing the newer version we were hoping to eliminate the problems that the Ajax spell chekcer has on Mac Safari/Mac Firefox. We've been using 4Q06 in this app.  Will 3Q07 SP1 have any effect on the problems experienced by those browsers?
  
  Brad

• George George

  Posted on Jan 18, 2008 (permalink)

  Hi Brad,
  
  Unfortunately, the provided information is not sufficient for us to determine what the reason for the skin problem is. Please, open a support ticket and send us a sample working project reproducing the issue. Once you do, we will do all our best to provide you with a solution as soon as possible.
  
  Regarding to the RadEditor's Ajax spellchecker issues under Safari/Mac - I have already answered your other forum post here.
  
  
  Kind regards,
  George
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Ozan Akiman

  Posted on Jan 31, 2008 (permalink)

  Hi,
  
  We were able to set editor background to transparent in version 7.2 but the changes in version 7.3 has probably made it obsolete. The following code was working fine earlier:
  
  var iframe = document.getElementById("RadEContentIframe" + editor.Id);
  iframe.allowTransparency = true;
  
  Any suggestions on how to achieve the same result in the new version?
  
  Regards,
  Ozan
  

  
  

• Rumen Rumen

  Posted on Jan 31, 2008 (permalink)

  Hello Ozan,
  
  You can set RadEditor v7.3.x background to transparent by following the instructions below:
  

  1. set background-color:Transparent !important; in the BODY class (~/RadControls/Editor/Skins/<Used_Skin>/EditorContentArea.css)
     
     BODY
     {
         padding:3px;
         background-color: Transparent !important;
         background-image: none !important;
         margin: 0px;   
         text-align: left;   
         scrollbar-face-color: #E9E9E9;
         scrollbar-highlight-color: #FFFFFF;
         scrollbar-shadow-color: #E9E9E9;
         scrollbar-3dlight-color: #DBDBDB;
         scrollbar-arrow-color: #787878;
         scrollbar-track-color: #F5F5F5;
         scrollbar-darkshadow-color: #AEAEAE;
         word-wrap: break-word;
        
     
     }
     
     
  2. In ~/RadControls/Editor/Skins/<Used_Skin>/Editor.css:
     1. remove the .RadEWrapper iframe class
     2. remove the background-color property from the TD.RadEContentContainer class or set it to Transparent
     3. set the background-color property to transparent in the TABLE.RadEWrapper class
  3. Allow transparency to the iFrame in the OnClientLoad Event:
     <script type="text/javascript">
         function OnClientLoad(editor)
             {
                 var iframe = document.getElementById("RadEContentIframe" + editor.Id);
                 iframe.allowTransparency = true;
             }
     </script>
     <form id="Form1" method="post" runat="server">
         <rade:radeditor 
             onclientload="OnClientLoad" 
             id="RadEditor1" 
             editable="true" 
             runat=server>
       </rade:radeditor>
     </form>

  For your convenience I have attached my test project demonstrating the transparent background.
  
  
  All the best,
  Rumen
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

  Attached files

  • editor731.zip

• Ozan Akiman

  Posted on Jan 31, 2008 (permalink)

  Thanks Rumen, it worked just fine..

• David Morgan

  Posted on Mar 11, 2008 (permalink)

  Hi Telerik,
  
  I am also having problems. This CSS code doesn't work for me, even after I have cleared the browser cache and restarted the browser. The font still defaults to Times New Roman, even though the only font listed is Arial.
  
  I'm using the MOSS version of the Editor.
  
  Do you have any suggestions? Thanks.

• Rumen Rumen

  Posted on Mar 11, 2008 (permalink)

  Hi David,
  
  By dafault, RadEditor for MOSS uses the Default2006 skin, thus if the editor on your side uses this skin then you need to modify the \Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.5.0.0__1f131a624888eeed\RadControls\Editor\Skins\Default2006\EditorContentArea.css
  file, but not the EditorContentArea.css file in another location.
  
  You can download from here a video demonstrating how to set the default font and background appearance of RadEditor for MOSS as well as how to see whether the editor reads the proper EditorContentArea.css file using FireBug in Firefox.
  
  
  Best regards,
  Rumen
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Pramod Goutham

  Posted on Aug 30, 2008 (permalink)

  Hi,
  
  I am using RadEditor of Q1 2008. How can I change the background color of the RadEditor content?

• Rumen Rumen

  Posted on Sep 1, 2008 (permalink)

  Hi Pramod,
  
  Please, see the following articles on the subject:
  Setting Editor Background And Color
  and
  Content Area Appearance Problems.
  
  
  Best regards,
  Rumen
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Pramod Goutham

  Posted on Sep 1, 2008 (permalink)

  Hi Rumen,
  
  Thanks for the reply. Its now working fine. I have one more problem. When the page loads on the client side, I need to set focus to a textbox. But after the rad editor loads, the focus from the textbox is lost. I tried setting the focus to the textbox in the onLoad event of rad editor, but still the focus on the textbox gets lost after the rad editor loads on the client side. How do I avoid this?
  

• Rumen Rumen

  Posted on Sep 1, 2008 (permalink)

  Hi Pramod,
  
  You need to set the focus to the textbox in the OnClientLoad event of RadEditor with a small delay. For that purpose you can use the setTimeout javascript method, e.g.
  
  function OnClientLoad()
  {
     setTimeout(function()
     {
        txt1.focus();
     }, 100);
  }
  
  This should do the trick.
  
  Best regards,
  Rumen
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Editor > Setting Content Area Defaults of RadEditor 7.3+