我有一个带有自定义/未嵌入皮肤的 Telerik RadEditor (2017.3) 控件(使用 telerik 上的主题构建器创建),当我为 DialogsCssFile 属性输入一个值时,页面的标记发生变化,这意味着我的自定义皮肤是不再应用于编辑器。
为什么这是个问题?好吧,例如查找/替换对话框中的 css 显示不正确,并且做了一些研究后,我需要做一些 @imports 到 customDialog.css 文件并将其放入 DialogsCssFile 属性。
一旦我这样做,RadEditor 页面中生成的标记就会从
Radeditor RadEditor_MyCustomSkin 重包装器
到
Radeditor MyCustomSkin 重新包装器
意思是我的 radeditor 皮肤没有应用到编辑器,如果我删除 DialogCssFile 那么编辑器皮肤加载正确,但对话框看起来不对。在页面源代码中,Window 是页面中的一个 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" />
Main Radeditor Class(给出类名)
.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" />
最佳答案
这是一个已知问题,记录在 [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>
关于css - Telerik RadEditor css/对话框类覆盖主皮肤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48497461/