如何添加多个 css 文件到 CKEditor editorarea

Question

我使用 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，这样可以很好地插入内容，但是它会从块中去除 head 标签，因此如果用户按退格键也可以删除它。

有没有办法让这个 html 块专门放在头部部分，这样就无法对其进行编辑？

Answer 1

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

从 4.4 版开始，还可以在运行时使用 editor.addContentsCss() 将多个样式表添加到编辑器实例，请参阅 http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss 了解更多信息。

愿源与你同在。玩得开心。

如何添加多个 css 文件到 CKEditor editorarea

How to add multiple css files to CKEditor editorarea

html

javascript

css

ckeditor