CKEditor问题:如何将自定义css应用于CKEditor

Question

我希望将所有样式应用于我的CKEditor内容.所以主要的想法是使编辑器看起来像实际的页面.

我已将此添加到我的config.js文件中

config.contentsCss = '/Home/GetCss';

我有一个服务器端操作,它从数据库获取css文件并将其返回给我.

public ActionResult GetCss()
{
  var settings = GetSettings();
  return File(settings.CssContent, "text/css", settings.CssFileName);
}

之后我可以看到我的css包含在ckeditor的head(ckeditor iframe内)中,但样式不适用于内容.

<link type="text/css" rel="stylesheet" href="/Home/GetCss">

什么可能导致这个问题？

编辑:(看到几个答案后)

只有当你知道什么是真正的问题时才能回答... GetCss正在返回正确的css,下一个css包括行是自动生成的config.contentsCss = '/Home/GetCss';.所以问题出在CKEditor设置的某个地方,而不是服务器端功能和生成的代码.

编辑2:

直接设置css文件后,问题仍然存在

config.contentsCss = '/Content/MyCssFile.css';

我仍然可以在iframe的HEAD部分看到正确的css文件,但对身体元素没有任何影响.

Answer 1

您是否考虑过使用内联编辑而不是使用 iframe 的经典版本？

内联版本的优点是，例如，如果您的 CSS 严重依赖于元素的层次结构，那么在没有 iframe 的情况下它肯定会工作得更好。看看这段代码：

<div id="main">
  <div id="content">
    (Here goes the content that is edited inside CKEditor)
  </div>
</div>

和

#main #container h2 {
  font-size:20px;
  color:#07c;
}

即使您尝试使用诸如config.bodyId之类的内容，标头的样式很可能在经典 CKEditor 中无法识别，因为这样您就可以通过将此类 ID 添加到“main”或“container”来伪造仅一个 ID：“main”或“container”身体元素。

内联版本不会有这个限制，因为内容不会封装在iframe内部。

还有一件事：如果“样式不适用于内容”的原因确实在于 CSS 内部元素的层次结构，并且您想使用“旧”经典版本，您可以简单地考虑为 CSS 提供一个专用的、简化的样式表。编辑。从最简单的 CSS 开始，看看您是否走在正确的道路上。