javascript - CKEditor 问题 : How to apply custom css to CKEditor

<分区>

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 8 年前。

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

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

config.contentsCss = '/Home/GetCss';

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

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

之后我可以看到我的 css 包含在 ckeditor 的头部(在 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 文件，但对 body 元素没有影响。

最佳答案

您是否考虑过使用内联编辑而不是使用 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;
}

标题的样式很可能在经典的 CKEditor 中无法识别，即使您尝试使用类似 config.bodyId 的东西也是如此。，因为这样您就可以通过将这样的 ID 添加到 body 元素来伪造一个 ID:“main”或“container”。

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

还有一点:如果“styles doesn't apply to content”的原因确实是CSS内部元素的层次结构，而你想使用“旧的”经典版本，你可以简单地考虑提供一个专门的、简化的样式表给编辑器。从最简单的 CSS 开始，看看您是否走在正确的道路上。

关于javascript - CKEditor 问题 : How to apply custom css to CKEditor，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22934398/