如何将多个 css 文件添加到 CKEditor 编辑器区域



我使用 Ckeditor 创建了一个小型 mvc 应用程序,该应用程序应该使用存储在本地服务器上的一些 css 文件

<head>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/all.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/new/templates.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/colors.css?v=1" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/paged_test.css?v=2" media="paged" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1" media="all" rel="stylesheet" type="text/css" />
<link href="http://192.168.0.50/css/pre_review/main.css?v=1" rel="stylesheet" type="text/css" />
<style type="text/css">html { -ro-editable: true; }
</style>
</head>

在编辑器初始化时,我调用 setData 并传入一个带有该 html 块的字符串,以将远程 css 文件应用于编辑器的内容。但是,它们没有被正确应用

如果我设置 config.fullPage = true,那么 html 块被放在正文标签之间,因此如果用户足够按退格键,则可以删除。

我也尝试设置 config.fullPage =false,这可以很好地插入内容,但它会从块中剥离头部标签,因此如果用户按退格键,也可以将其删除。

有没有办法让这个 html 块专门放在头部分,以便它无法编辑?

我建议在 ckeditor 配置中使用 config.contentCss 属性来设置特定的 css 文件或 css 文件列表。请参阅 API 文档:http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

从版本 4.4 开始,还可以在运行时使用 editor.addContentCss() 向编辑器实例添加多个样式表,有关详细信息,请参阅 http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss。

愿源头与你同在。玩得愉快。

最新更新