Load RadEditor from UserControl

[Dale Palmer]

I'm trying to load a RadEditor at runtime from a custom control, i managed to get the RadEditor to render but the Editor does not seem to render correctly. Please see attached.

    [DefaultProperty("Text")]
    [ToolboxData("<{0}:Content runat=server></{0}:Content>")]
    public class Content : WebControl
    {
        RadEditor contentEditor;

        public Content()
        {

        }

        /// <summary>
        /// Load the UserControl
        /// </summary>
        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            contentEditor = new RadEditor();

            contentEditor.ToolsFile = "App_Data/Editor.xml";

            contentEditor.ID = "radEditor";

            contentEditor.Skin = "Black";

            contentEditor.Content = TemplateHelper.PageContent;

            this.Controls.Add(contentEditor);
        }


        /// <summary>
        /// Render this Web Part to the output parameter specified.
        /// </summary>
        /// <param name="output"> The HTML writer to write out to </param>
        protected override void Render(HtmlTextWriter output)
        {
            EnsureChildControls();
            if (contentEditor != null)
            {
                contentEditor.RenderControl(output);
            }
        }

    }

I can't seem to upload images but take a look at http://www.carlfretwell.co.uk/Images/Editor.JPG to see what I mean.

Carl

[Dale Palmer]

It does not load in my Editor.xml tools file as well but the paths are correct.

<root>
  <tools name="InsertToolbar" dockable="true" enabled="true">
    <tool name="AjaxSpellCheck"/>
    <tool name="ImageManager" shortcut="CTRL+M"/>
    <tool name="DocumentManager"/>
    <tool name="FormatStripper"/>
    <tool separator="true"/>
    <tool name="InsertTable"/>
    <tool name="InsertRowAbove"/>
    <tool name="InsertRowBelow"/>
    <tool name="DeleteRow"/>
    <tool name="InsertColumnLeft"/>
    <tool name="InsertColumnRight"/>
    <tool name="DeleteColumn"/>
    <tool separator="true"/>
    <tool name="MergeColumns"/>
    <tool name="MergeRows"/>
    <tool separator="true"/>
    <tool name="SplitCell"/>
    <tool name="DeleteCell"/>
    <tool name="SetCellProperties"/>
    <tool name="SetTableProperties"/>
  </tools>
  <tools enabled="true">
    <tool name="Undo"/>
    <tool name="Redo"/>
    <tool separator="true"/>
    <tool name="Cut"/>
    <tool name="Copy"/>
    <tool name="Paste" shortcut="CTRL+!"/>
    <tool separator="true"/>
    <tool name="PasteFromWord"/>
    <tool name="PasteFromWordNoFontsNoSizes"/>
    <tool name="PastePlainText"/>
    <tool name="PasteAsHtml"/>
    <tool separator="true"/>
    <tool name="Print"/>
    <tool name="FindAndReplace"/>
    <tool name="SelectAll"/>
    <tool separator="true"/>
    <tool name="InsertGroupbox"/>
    <tool name="InsertParagraph"/>
    <tool name="InsertHorizontalRule"/>
    <tool name="InsertSnippet"/>
    <tool separator="true"/>
    <tool name="InsertDate"/>
    <tool name="InsertTime"/>
  </tools>
  <tools enabled="true" dockable="true">
    <tool name="Bold"/>
    <tool name="Italic"/>
    <tool name="Underline"/>
    <tool name="StrikeThrough"/>
    <tool separator="true"/>
    <tool name="Superscript"/>
    <tool name="Subscript"/>
    <tool separator="true"/>
    <tool name="ConvertToLower"/>
    <tool name="ConvertToUpper"/>
    <tool separator="true"/>
    <tool name="Indent"/>
    <tool name="Outdent"/>
    <tool name="InsertOrderedList"/>
    <tool name="InsertUnorderedList"/>
    <tool name="ToggleScreenMode"/>
  </tools>
  <tools name="DropdownToolbar" dockable="true">
    <tool name="ForeColor" />
    <tool name="BackColor"></tool>
    <tool name="FontName"></tool>
    <tool name="FontSize"></tool>
    <tool name="ApplyClass"></tool>
    <tool name="InsertCustomLink"></tool>
    <tool name="FormatBlock"></tool>
    <tool name="FormatStripper" />
  </tools>
</root>

[Martin]

Hi Dale,

Thank you for the provided information and screenshots. We thoroughly examined what you gave us and came to the following conclusions:

1. From what we saw in the screenshot, compared to the tools file declaration you sent, it seems that all tools are loaded correctly and they should work correct.
2. Usually the element displacement and spoilt layout of the editor occurs when 2 factors are present:
   1. Usage of quirks mode (missing doctype declaration) or a DTD different from xhtml1.0 (strict, transitional, frameset) and xhtml1.1. So, please check your DTD. RadControls for ASP.NET AJAX are designed and intended to work in standards compliance mode.
   2. Inheritance of global styles. In your case, the issue might be caused by global <ul> and <li> styles (paddings or margins), that are inherited by RadEditor's lists (that are used by the toolbar). Please, check your global styles - exclude them from the page and witness the result. If their removal fixes RadEditor, do the following - in your CSS style do not use elements as selectors, but classes i.e:

                    li {margin: 20px; padding: 20px;}

                    but

                    li.myClass {margin: 20px; padding: 20px;}

We understand that this is an inconvenience, but due to the nature of CSS (and especially the word "Cascading" in its abbreviation), the use of global styles is not recommended with third party controls. Practically any CSS property can be set to any html element, so we are not able to cover each possible case in order to prevent such problems.

Have a great weekend,
Martin Ivanov
the Telerik team

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