CKEditor问题：如何将自定义CSS应用于CKEditor

Question

CKEditor问题：如何将自定义CSS应用于CKEditor

9

我希望所有样式都应用于我的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元素没有影响。

- Chuck Norris

你的意思是想将你的 CSS 添加到 CKEditor 中吗？ - Karan Thakkar

是的，我想将CSS文件样式应用于ckeditor的内部HTML。 - Chuck Norris

CKEditor在切换到“查看源代码”模式时是否会从div或span中删除类？ - Karan Thakkar

一个建议：注释掉你注入 .css 文件的逻辑。尝试在 CKEditor 自带的默认 CSS 文件中进行更改，看看是否应用了这些更改？ - Arafat

我可以在运行Php的机器上重现您的问题（因此我只能帮助找出问题）。样式仅在正确的内容类型标头设置为(Content-Type: text/css)的css请求时应用。请在浏览器的开发人员工具中检查它。 - Zudwa

5个回答

0

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

如果home文件夹位于根目录中，则这将是您的href链接。

- ProllyGeek

这是由CKEditor自动生成的。 - Chuck Norris

我正在尝试同样的事情，但它不起作用。我正在将CK Editor生成的代码存储在MySQL的“blob”中，当我在页面上显示时，它显示与数据库中相同。我正在尝试应用自定义CSS样式，但它不起作用。有什么想法吗？ - Abdullah

@Abdullah，你有在你的文件中添加CSS扩展名yourfile.css吗？ - ProllyGeek

我已经链接 <link>。 - Abdullah

0

使用

   public string GetCss()
 {/*
     var settings = GetSettings();
    return Url.Content(settings.CssContent);*/
   return Url.Content("~/path_to_css");
  }

并且

 <link type="text/css" rel="stylesheet" href="@Url.Action("GetCss", "Home")">

- Bellash

不，第二行是自动生成的，并且CSS加载良好...我可以在控制台中看到。 - Chuck Norris

0

您可以创建一个自定义文件 "ckeditor_config.js" 并将您的样式放在其中。请参考以下文章： http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations

要导入 CSS 文件，请使用以下代码：

<link type="text/css" rel="stylesheet" href="@Url.Content("~/Home/GetCss")" />

因为 URL 内容获取应用程序的绝对路径。

- Daniel Melo

CSS行是由CKEditor自动生成的。 - Chuck Norris

0

尝试使用CKEDITOR.document.appendStyleSheet。我会使用类似于以下内容的东西：

<script>
    $(document).ready(function () {
        CKEDITOR.domReady(function () {
            CKEDITOR.replace('editorDiv', {
                docType: '<!DOCTYPE html>',
                on: {
                    instanceReady: function (ev) {
                        var editor = ev.editor;

                        // add editable content CSS
                        editor.document.appendStyleSheet(
                            '@Url.Content("~/Home/GetCss")');

                        // ... more editor instance initialization code
                    }
                }
            });
        });
    });
</script>

- noseratio - open to work

1

谢谢。有一个错别字，应该是两个doctype。 - latvian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wiktor Walc · Accepted Answer

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

内联版本的优点在于，如果您的CSS严重依赖元素的层次结构，则无iframes肯定会更好。看一下这段代码：

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

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