Style inherited from the parent control

[christel]

Hello,

I have RadEditors (I use the version 7.3.1) in a page and these RadEditors are inserted in controls which have a style. I want to be able to edit the text with the default style inherited from the parent control. For example, if my RadEditor is inserted in a div with a style which center the text, I want to edit the text centered in my RadEditor without any additional style.
How can I have this behaviour ? I saw something about the default font but I would like to have a more general behaviour.

Thanks for your help.
Regards
Christel

[Rumen]

Hi Christel,

Here is how to inherit the css styles settings of the parent element of the editor when the editor is in Editable mode:

Set the OnClientLoad property of RadEditor to a client-side function, which will apply the parent formatting (e.g. "copyParentStylesToEditor")
Add the copyParentStylesToEditor function before the RadEditor declaration (the function name should be the same as the value of the OnClientLoad property):

<script type="text/javascript">
function copyParentStylesToEditor(editor)
{
  var theIFrame = document.getElementById("RadEContentIframe" + editor.Id);
  var theMainEditorTable = document.getElementById("RadEWrapper" + editor.Id);

  var theParentEl = theMainEditorTable.parentNode.parentNode;
  var theContentArea = editor.GetContentArea();
  for (var attr in theParentEl.currentStyle)
  {
     theContentArea.style[attr] = theParentEl.currentStyle[attr];
  }
}
</script>

<span style="font: bold 12px Verdana;color: red;">sample content inside the DIV container
  <rad:RadEditor
     id="RadEditor1"
     runat="server"
     SaveInFile="true"
     onClientLoad="copyParentStylesToEditor">sample content inside the Editor
  </rad:RadEditor>
</span>

Thus the editor's content area will inherit the inline style="font: bold 12px Verdana; color: red;" applied to the SPAN element and will apply the same font settings to its content in edit and non-edit modes.

A similar approach is to copy the font styles from the editor's parent and apply them to the contents of the editor.  The result, wherever the editor resides, those are the font settings it will take on.  The solution is tested in IE 6, Firefox 1.5, and Opera 9.

<script type="text/javascript">
function CopyStylesToEditorHelper(element)
{
   if (element.currentStyle) // Handle IE
       return element.currentStyle;
   else // Handle Others
       return document.defaultView.getComputedStyle(element,null);
       return null;
}
function CopyStylesToEditor(editor)
{
   var theIFrame = document.getElementById("RadEContentIframe" + editor.Id);
   var theDocBody = editor.Document.body;
   var IFrameCompStyle = CopyStylesToEditorHelper(theIFrame);

  if (IFrameCompStyle != null)
  {
      theDocBody.style.fontFamily = IFrameCompStyle.fontFamily;
      theDocBody.style.fontSize = IFrameCompStyle.fontSize;
      theDocBody.style.fontWeight = IFrameCompStyle.fontWeight;
      theDocBody.style.lineHeight = IFrameCompStyle.lineHeight;
  }
}
</script>
<span style="font: bold 12px Verdana;">
<rad:RadEditor runat="server" id="TextEditor" onClientLoad="CopyStylesToEditor">test</rad:RadEditor>
</span>

Note that we only copy the Font Family, Size, Weight, and Line Height, but other font properties can be copied too by adding the respective javascript code.

Best regards,
Rumen
the Telerik team

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

[christel]

Dear Rumen,

Thank you for your reply. I integrated your solution in my application and it works fine for IE. However, on Firefox, the first solution doesn't do anything and the second returns me an error message :

Exception while executing client event OnClientLoad Error: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]

I saw on forums that this error could be due to some plugins added to Firefox. Nevertheless, I would like to avoid this kind of error because I could not know which plugins are installed on the browser of the user. Do you have any idea to avoid this issue or to use another method instead of getComputedStyle?
 
Thanks for your help.
Regards,
Christel

[Rumen]

Hi Christel,

Here is an example how to implement the solution for Firefox:

<script type="text/javascript">
function copyParentStylesToEditor(editor)
{
  var theIFrame = document.getElementById("RadEContentIframe" + editor.Id);
  var theMainEditorTable = document.getElementById("RadEWrapper" + editor.Id);

  var theParentEl = theMainEditorTable.parentNode.parentNode;
  var theContentArea = editor.GetContentArea();
  if (document.all)
  {
      for (var attr in theParentEl.currentStyle)
      {
       
         theContentArea.style[attr] = theParentEl.currentStyle[attr];
      }
  }
  else //Firefox
  {
    theContentArea.style.color = document.defaultView.getComputedStyle(theParentEl, '').getPropertyValue("color");
    theContentArea.style.fontFamily = document.defaultView.getComputedStyle(theParentEl, '').getPropertyValue("font-family");
    theContentArea.style.fontSize = document.defaultView.getComputedStyle(theParentEl, '').getPropertyValue("font-size");
    theContentArea.style.fontWeight = document.defaultView.getComputedStyle(theParentEl, '').getPropertyValue("font-weight");
  }
}
</script>

<span style="font: bold 12px Verdana;color: red;">sample content inside the DIV container
  <rade:RadEditor
     id="RadEditor1"
     runat="server"
     SaveInFile="true"
     onClientLoad="copyParentStylesToEditor">sample content inside the Editor
  </rade:RadEditor>


Best wishes,
Rumen
the Telerik team

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