[Solved] Absolute positioning inside the editor vs in rendered mode

[abdu bukres]

The absolute positioning works fine when in design mode inside the editor but in the final rendered mode, the absolute position values will be in relation to the page or whatever the parent container is which means the object could be way off where it should it should be in relation to other non absolute positioned objects while viewing them all in design mode.

Shouldn't the editor be injecting some extra html/css dynamically or add x,y offsets to the position values so that the object is positioned where the user had intended to be? Meaning what you see in the editor in design mode is 'exactly' what you'll see in the rendered page.

Otherwise what's the value of the absolute positioning function?

[Rumen]

Hi Abdu,

The requested feature is not supported out-of-the box by RadEditor and it is up to the developer to implement it depending on the specific requirements of the project.

You can use the code below as a base to implement your scenario, but it is not a complete solution and you need to further polish and enhance it:

<script type="text/javascript">
function OnClientSubmit(editor)
{
   //go through all elements in the content area
   var elems = editor.get_document().getElementsByTagName("*");
   for (var i = 0; i < elems.length; i++)
   {
       var elem = elems[i];
       var elemStyle = elem.style;
       //if the elements have absolute positioning then update their top and left attribute values to be correct when the elements are displayed outside of the editor -> for example on the public site
       if(elemStyle.top && elemStyle.left)
       {
           elemStyle.top = parseInt(elemStyle.top) + 400 + "px";
           elemStyle.left = parseInt(elemStyle.left) + 400 + "px";
       }
   }
}
</script>

<telerik:RadEditor runat="server"
        OnClientSubmit="OnClientSubmit"
        ImageManager-ViewPaths="~/"
        ID="RadEditor1">
    <Content>
        <IMG src="http://www.telerik.com/demos/aspnet/Prometheus/Editor/Img/productLogo.gif">
    </Content>
</telerik:RadEditor>
    <asp:Button ID="Button1" runat="server" Text="Submit Button" />

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[abdu bukres]

Which file do you add this code to? I couldn't find a file in DNN which had the Telerik:RadEditor tag.

[Rumen]

Hi Abdu,

The following KB article provides guidance how to attach event to RadEditor in DNN:
Executing custom code called on RadEditor's events.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.