Javascript CKEditor问题：如何将自定义css应用于CKEditor_Javascript_Css_Asp.net Mvc_Ckeditor

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

javascript css asp.net-mvc ckeditor

Javascript CKEditor问题：如何将自定义css应用于CKEditor,javascript,css,asp.net-mvc,ckeditor,Javascript,Css,Asp.net Mvc,Ckeditor,我想将所有样式应用于我的CKEditor内容。所以主要的想法是使编辑器看起来像实际的页面我已经将其添加到我的config.js文件中 config.contentsCss = '/Home/GetCss'; 我有一个服务器端操作，从数据库获取css文件并返回给我 public ActionResult GetCss() { var settings = GetSettings(); return File(settings.CssContent, "text/css", settin

我想将所有样式应用于我的

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

尽管如此，我仍然可以在iframe的头部部分看到正确的css文件，但不影响身体元素。


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

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

使用

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

及

您可以创建一个自定义文件“ckeditor_config.js”，并将您的样式放入其中。看看这篇文章：

要导入css文件，请使用以下命令：

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

<> > URL内容获得TE应用程序的路径绝对值。

，您是否考虑使用内联编辑代替使用IFRAMS的经典版本？< /P> 内联版本的优点是，例如，如果您的CSS严重依赖于元素的层次结构，那么在没有iFrame的情况下，它肯定会工作得更好。请查看以下代码：

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

在classic CKEditor中，标题的样式很可能无法识别，即使您尝试使用以下内容，因为这样您可以通过将此类ID添加到body元素中来伪造一个ID：“main”或“container”

内联版本不会有此限制，因为内容不会封装在iframe中

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

试试

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>


$（文档）.ready（函数（）{
CKEDITOR.domReady（函数（）{
CKEDITOR.replace（'editorDiv'{
docType:“”，
关于：{
InstanceRady：功能（ev）{
var-editor=ev.editor；
//添加可编辑内容CSS
editor.document.appendStyleSheet(
@Url.Content（“~/Home/GetCss”）；
//…更多编辑器实例初始化代码
}
}
});
});
});

你的意思是想将css添加到ckeditor？是的，我想将css文件样式应用到ckeditor的内部html。切换

查看源代码时，ckeditor是否正在将类从div或span中剥离？建议：注释掉注入.css文件的逻辑。尝试在CKEditor附带的默认CSS文件中进行更改，看看更改是否得到应用？我可以用运行Php的机器重现您的问题（因此我只能帮助您解决问题）。仅当为css请求设置了正确的内容类型标题（content-type:text/css）时，才会应用样式。在浏览器的开发者工具中检查它。不，第二行是自动生成并加载css的。。。我可以在控制台中看到。这是由CKEditorI自动生成的。我正在尝试相同的方法，但它不起作用。我将CK编辑器生成的代码存储在MySQL“blob”中，当我在页面上显示它时，它显示的和数据库中的一样。我正在尝试应用自定义CSS样式，但它不起作用。有什么想法吗？@Abdullah你添加了css扩展名yourfile.css了吗？有。我链接它Css行是由CKEDITOR自动生成的，实际上，问题是在真实文档中的头类中。。。谢谢你的建议：）谢谢。存在错误类型2x docType
<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;
}

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