Telerik RadEditor css/dialog классы переписывают основной скин

У меня есть элемент управления Telerik RadEditor (2017.3) с настраиваемой / неоткрытой оболочкой (созданный с помощью themebuilder в telerik), и когда я ввожу значение для атрибута DialogsCssFile, разметка страницы изменяется, что означает, что моя настраиваемая обложка не применяется к редактор больше.

Почему это проблема? Ну, например, CSS внутри диалогового окна "Найти / заменить" не отображался правильно, и, проведя некоторое исследование, мне нужно было сделать несколько @imports в файле customDialog.css и поместить их в атрибут DialogsCssFile.

Как только я это сделаю, сгенерированная разметка на странице для RadEditor изменится с

Radeditor RadEditor_MyCustomSkin reWrapper

в

Radeditor MyCustomSkin reWrapper

при том, что мой скин radeditor не применяется к редактору, если я удаляю DialogCssFile, то скин редактора загружается правильно, но диалоги выглядят неправильно. В исходном тексте страницы окно - это div внутри страницы, а не iFrame

Вопрос:

Я что-то здесь не так делаю?

Код:

Страничные CSS-файлы (по порядку)

<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/formdecorator.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/toolbar.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/window.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/combobox.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/dropdownlist.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/tabstrip.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/editor.MyCustomSkin.css" />

Основной класс Radeditor (чтобы дать представление об именах классов)

.RadEditor_MyCustomSkin { /* css styles - all generated automatically */ }

Контроль:

<telerik:RadEditor 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>

DialogHandler.MyCustomSkin.css

@import url('FormDecorator.MyCustomSkin.css');
/*@import url('Grid.MyCustomSkin.css');*/
@import url('Input.MyCustomSkin.css');
@import url('Splitter.MyCustomSkin.css');
@import url('TabStrip.MyCustomSkin.css');
@import url('ToolBar.MyCustomSkin.css');
/*@import url('Upload.MyCustomSkin.css');*/
@import url('Window.MyCustomSkin.css');
@import url('ComboBox.MyCustomSkin.css');
@import url('Button.MyCustomSkin.css');
/*@import url('Editor.MyCustomSkin.css');*/

Примечание: редактор CSS все еще использует неправильный класс, даже если нижний импорт не закомментирован

Настройки Web.Config

<add key="Telerik.Skin" value="MyCustomSkin" />
<add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
<add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
<add key="Telerik.Web.UI.RenderMode" value="lightweight" />
<add key="Telerik.Web.UI.EnableEmbeddedSkins" value="false" />
<add key="Telerik.EnableEmbeddedSkins" value="false" />

0 ответов

Это известная проблема, записанная для исправления в [The DialogsCssFile property breaks the appearance of a custom skin][1],

Чтобы устранить проблему, установите для свойства RenderMode в RadEditor значение "Lightweight", т.е.

<telerik:RadEditor RenderMode="Lightweight" DialogsCssFile="~/assets/css/MyCustomSkin/DialogHandler.MyCustomSkin.css" ID="pageRadEdit" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false">
            <ImageManager ViewPaths="~/" UploadPaths="~/" />
</telerik:RadEditor>
Другие вопросы по тегам