This is a migrated thread and some comments may be shown as answers.

Style inherited from the parent control

3 Answers 117 Views
Editor
This is a migrated thread and some comments may be shown as answers.
christel
Top achievements
Rank 1
christel asked on 26 Aug 2008, 07:31 AM
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

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 26 Aug 2008, 08:26 AM
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.
0
christel
Top achievements
Rank 1
answered on 28 Aug 2008, 07:51 AM
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
0
Rumen
Telerik team
answered on 28 Aug 2008, 02:38 PM
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.
Tags
Editor
Asked by
christel
Top achievements
Rank 1
Answers by
Rumen
Telerik team
christel
Top achievements
Rank 1
Share this question
or