Question

我有一个带有自定义/未嵌入皮肤的Telerik RadEditor（2017.3）控件（使用telerik上的themebuilder创建），当我输入DialogsCssFile属性的值时，页面的标记会发生变化，这意味着我的自定义皮肤是不再适用于编辑。

为什么这是一个问题？例如，查找/替换对话框中的css显示不正确，并且做了一些研究后，我需要将一些@imports写入customDialog.css文件并将其放入DialogsCssFile属性。

一旦我这样做，RadEditor页面中生成的标记就会从

更改

Radeditor RadEditor_MyCustomSkin reWrapper

到

Radeditor MyCustomSkin reWrapper

表示我的radeditor Skin未应用于编辑器，如果我删除了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_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" />

Answer 1

这是记录在[The DialogsCssFile property breaks the appearance of a custom skin][1]处的一个已知问题。

要解决此问题，请将RadEditor的RenderMode属性显式设置为“ 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>

Telerik RadEditor css / dialog类覆盖主皮肤

1 个答案: