Specify css location

2 posts, 0 answers
  1. Paul
    Paul avatar
    3 posts
    Member since:
    Dec 2010

    Posted 25 Oct 2012 Link to this post

    This might be a bit hard to explain but basically im looking for a setting where I can specify where in the page the html editor is (in css terms) so it picks up on particular css.

    It'll be easier to explain with an example.

    So I hook the rad editor up to a particular css file :
    radEditor.CssFiles.Add("<path to css file");

    Then say in the css file there is a div with an id of test, and that div has particular style set in the css file.
    What id then like to do is have the rad editor content styled as if it is located in the div with id of test, so it picks up on all relevent css relating to that div.

    I think this probably isn't possible but just double checking?
  2. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 30 Oct 2012 Link to this post

    Hi,

    RadEditor does not offer the requested functionality. What you can do is to programmatically copy the styles of the RadEditor's parent element and apply them to the content area:

    <script type="text/javascript">
        function copyParentStylesToEditor(editor) {
            var theParentEl = editor.get_element().parentNode;
            var theContentArea = editor.get_contentArea();
     
            theContentArea.style.color = getStyle(theParentEl, "color");
            theContentArea.style.fontFamily = getStyle(theParentEl, "font-family");
            theContentArea.style.fontSize = getStyle(theParentEl, "font-size");
            theContentArea.style.fontWeight = getStyle(theParentEl, "font-weight");
            theContentArea.style.backgroundColor = getStyle(theParentEl, "background-color");
        }
     
     
        function getStyle(el, styleProp) {
            var x = el;
            if (x.currentStyle)
                var y = x.currentStyle[styleProp];
            else if (window.getComputedStyle)
                var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
            return y;
        }
    </script>
    <div id="wrapper" style="font: bold 12px Verdana; color: red; background-color: Yellow;">
        sample content inside the DIV container
        <telerik:RadEditor runat="server" OnClientLoad="copyParentStylesToEditor" ID="RadEditor1">
            <Content>sample content</Content>
        </telerik:RadEditor>
    </div>


    Regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top