RadEditor and DialogsCssFile changes skin class

2 posts, 0 answers
  1. Colin
    Colin avatar
    1 posts
    Member since:
    Feb 2018

    Posted 02 Feb 2018 Link to this post

    Hello,

    I am having an issue with RadEditor and the attribute DialogCssFile. I have previously posted this on stackoverflow, but have not yet got a reply. The basic question is

    I have a Telerik RadEditor (2017.3.913.45) control with custom/unembedded skin (created using the themebuilder on telerik), and when I enter a value for the DialogsCssFile attribute, the markup of the page changes, meaning that my custom skin is not applied to the editor anymore.

    Why is this a problem? Well the css inside the dialog for Find/replace for example didn't display correct, and having done some research, I needed to do some @imports into a customDialog.css file and drop that into the DialogsCssFile attribute.
    As soon as I do this, the generated markup in the page for RadEditor changes from

    Radeditor RadEditor_MyCustomSkin reWrapper

    to

    Radeditor MyCustomSkin reWrapper

    meaning that my radeditor Skin is not applied to the editor, If I remove the DialogCssFile then the editor skin loads correctly, but the dialogs look wrong. In the Page source, the Window is a div within the page, and not an iFrame

    Am I doing something wrong here?

     

    For more detail, see my question on Stack Overflow:

    https://stackoverflow.com/questions/48497461/telerik-radeditor-css-dialog-classes-overwriting-main-skin

     

  2. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 02 Sep 2019 Link to this post

    Hi Colin,

    Thank you for reporting this issue!

    To fix the DialogsCssFile problem please explicitly set the RenderMode property of RadEditor to "Lightweight", i.e.

     

            <telerik:RadEditor RenderMode="Lightweight"
                runat="server" ID="pageRadEdit" ToolbarMode="Default" EditModes="Design,Html"
                DialogsCssFile="~/assets/css/MyCustomSkin/DialogHandler.MyCustomSkin.css"
                ToolsFile="~/App_Data/Editor.xml" Width="980px" Height="800px"
                EnableResize="false" OnClientLoad="resizeMe" NewLineMode="P"
                OnClientSelectionChange="$page.setdirty"
                ContentFilters="DefaultFilters,ConvertFontToSpan,IECleanAnchors,OptimizeSpans,MozEmStrong,FixEnclosingP"
                EnableEmbeddedSkins="false">
                <SpellCheckSettings DictionaryLanguage="en-GB" AllowAddCustom="false" />
                <Languages>
                    <telerik:SpellCheckerLanguage Code="en-GB" Title="English (UK)" />
                </Languages>
            </telerik:RadEditor>

     

    Best Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top