Нужна помощь с проблемами Telerik RADEditor CSS

Question

<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>

Нужно ли создавать пользовательский файл скиначтобы изменения отражали?Я не хочу, потому что редактор использовался во многих файлах, и теперь связывание нового пользовательского файла CSS в каждом файле .aspx будет такой болью.Я просто хочу, чтобы это было добавлено в скин:

body
{
    background-image:none;
    background-color:White;
}

Это делает то, что он делает цвет фона области содержимого белым.Ранее область содержимого редактора наследовала свойство background-image тега body главной страницы.Еще одна забавная проблема заключается в том, что стили шрифта также наследуют только свойства мастер-страницы, например, заголовок 2 в раскрывающемся списке редактора получил цвет фона, когда я хочу, чтобы он был простым.

Так что создание CSS для собственного стиляподать единственное решение?Как получить изменения для отражения только через CSS-файл по умолчанию?Я не хочу создавать пользовательский класс.Почему изменения не отразились?

Answer 1

Если вы не хотите, чтобы редактор наследовал CSS от главной страницы, вы должны сообщить ему, какие классы CSS должны быть загружены в области содержимого (iframe).См. Справочную статью external CSS и, возможно, статью CSS .Наконец, есть отдельная страница для устранения неполадок CSS в области содержимого - проблемы с отображением области содержимого

Answer 2

Одним из решений, которое мне помогло, было установить эти свойства в редакторе:

ContentAreaMode="Div"
CssClass="wysiwygeditor"

, тогда в CSS вы можете переопределить то, что вам нужно

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

Было бы неплохо, если быTelerik предоставит свойство для установки класса в элементе body при использовании ContentAreaMode=Iframe вместо Div, и CKeditor, и TinyMCE поддерживают такое свойство, что позволяет легко удалять нежелательные стили тела, в то же время поддерживая большинствоСтраница CSS в редакторе.

Answer 3

Убедитесь, что ваше тело background-color не перезаписано в Window.Default.css.Всегда последняя запись в файле CSS или последующем файле имеет приоритет перед предыдущей.Попробуйте перейти к background-color:white !important;.
Добавление !important после того, как какое-либо правило CSS сделает это именно таким, и переопределит любой приоритет.

Что касается того, почему изменения не отразились: Проверьте, какие стили элемента управления Telerikна самом деле использует.Проверьте исходный код страницы и проверьте ссылки CSS-файлы, имеют ли они добавленные вами свойства - может быть, есть какие-то другие CSS-файлы, ползающие в некотором кеше?

Ваш инструмент выбора для проверки стилей для определенного элементаэто может быть панель инструментов разработчика Internet Explorer (если вы используете IE) - просто нажмите F12 и выберите редактор Telerik с маленькой стрелкой, и вы увидите все связанные стили и их происхождение.

Answer 4

Вы можете редактировать файл конфигурации xml (в моем случае он называется ConfigDefault.xml).

В узле <configuration/> вы можете добавить что-то вроде следующего, чтобы загрузить выбранный вами css для примененияк содержимому (HTML-документ), который загружается в iframe:

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

Так что если вам нужен one.css для обычного сайта CSS, то два.css может выполнить переопределение, чтобы удалить фоновое изображение / изменить цвет фона.