需要 Telerik RADEditor CSS 问题的帮助

Posted 2023-03-06

【中文标题】需要 Telerik RADEditor CSS 问题的帮助

【英文标题】：Need help with Telerik RADEditor CSS issues

【发布时间】：2011-05-01 19:25:30

【问题描述】：

<telerik:RadEditor ToolbarMode="Default"
ID="editor1" runat="server" EnableEmbeddedBaseStylesheet="true">
</telerik:RadEditor>

编辑器使用默认皮肤。当我对 Editor.Default.CSS 文件进行更改时，它们并没有反映在我的页面上，但是当我输入以下内容时，我可以看到更改：

<link href="Skins/Default/Editor.Default.css" rel="stylesheet" type="text/css" />
<link href="Skins/Default/Window.Default.css" rel="stylesheet" type="text/css" />

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadEditor ToolbarMode="Default"
ID="editor1" Skin="Default" runat="server" EnableEmbeddedSkins="true">
</telerik:RadEditor>

我必须创建自定义皮肤文件以反映更改吗？我不想这样做，因为该编辑器已在许多文件中使用，现在在每个 .aspx 文件中链接新的自定义 CSS 文件会很痛苦。我只想将它添加到皮肤中：

body

    background-image:none;
    background-color:White;

这样做的目的是使内容区域的背景颜色变为白色。早些时候，编辑器的内容区域继承了母版页正文标记的背景图像属性。另一个有趣的问题是，字体样式也仅继承母版页的属性，例如编辑器下拉列表中的标题 2 在我希望它简单时具有背景颜色。

那么制作自定义皮肤 CSS 文件是唯一的解决方案吗？如何让更改仅通过默认 CSS 文件反映出来？我不想创建自定义类。为什么这些变化没有反映出来？

【参考方案1】：

对我有用的一个解决方案是在编辑器上设置这些属性：

ContentAreaMode="Div"
CssClass="wysiwygeditor"

然后在 CSS 中你可以覆盖你需要的东西

.wysiwygeditor  background-color: white; background-image: none; 

如果 Telerik 在使用 ContentAreaMode=Iframe 而不是 Div 时公开一个属性以在 body 元素上设置一个类，那就太好了，CKeditor 和 TinyMCE 都支持这样的属性，并且可以轻松删除不需要的正文样式，同时仍支持编辑器中的大部分页面 CSS。

【讨论】：

有一个可以在 Iframe 模式下使用的属性，叫做 ContentAreaCssFile。将其设置为您网站中的 CSS 文件，它将被加载到 RadEditor 内容区域中。使用此属性，将不会使用默认的 RadEditor 样式，您可以在 CSS 文件中定义自己的样式。

【参考方案2】：

您可以编辑一个 xml 配置文件（在我的例子中，它被命名为 ConfigDefault.xml）。

在<configuration/> 节点中，您可以添加类似以下内容来加载您选择的css，以应用于加载的内容（html 文档） iframe：

<configuration>
    <property name="CssFiles">one.css,two.css</property>
      ...more items
</configuration>

因此，如果您的常规站点 css 需要 one.css，则 two.css 可以执行覆盖以删除背景图像/更改背景颜色。

【参考方案3】：

如果您不希望编辑器从主页面继承 CSS，您应该告诉它要在内容区域 (iframe) 中加载哪些 CSS 类。请参阅external CSS 帮助文章，可能还有CSS dropdown 文章。最后，还有一个单独的页面用于内容区域 CSS 故障排除 - content area appearance problems

【讨论】：

okk..所以如果我不希望我的母版页的 CSS 搞砸我的 RADEditor..我需要在每个嵌入了这个编辑器的文件中包含这个 telerik:EditorCssFile ......对吗？我不能在这个 Editor.Default.css 中做一些事情来使它正常工作？

是的，应该在 RadEditor 控件上设置 ContentAreaCssFile 属性或 CssFiles 集合。如果您想将更改保存在一个地方，您可以使用类似于 ASP.NET 主题 (telerik.com/help/aspnet-ajax/usingthemes.html) 或子类化 RadEditor 并在您的页面中使用派生类。

【参考方案4】：

确保您的正文 background-color 没有在 Window.Default.css 中被覆盖。 CSS 文件或后续文件中的最后一个条目总是优先于之前的条目。试试background-color:white !important;。 在任何 CSS 规则之后添加 !important 将使其成为该规则并覆盖任何优先级。

至于为什么这些变化没有反映出来：检查 Telerik 控件实际使用的样式。检查页面的来源并检查引用的 CSS 文件是否有您添加的属性 - 也许在某些缓存中还有其他一些 CSS 文件？

您选择的检查特定元素样式的工具可能是 Internet Explorer（如果您使用的是 IE）开发工具栏 - 只需按 F12 并使用小箭头选择 Telerik 编辑器，您将看到所有相关的样式以及他们来自哪里。