javascript - 如何将多个css文件添加到CKEditor编辑区

标签 javascript html 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 block 的字符串,以将远程 css 文件应用到编辑器的内容。然而它们没有被正确应用

如果我设置 config.fullPage = true ,那么 html block 就会被放入 body 标记之间,因此如果用户按退格键足够多,则可以将其删除。

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

有没有办法让这个 html block 专门放在 head 部分,这样就无法编辑它?

最佳答案

我建议在 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了解更多信息。

愿消息来源与你同在。玩得开心。

关于javascript - 如何将多个css文件添加到CKEditor编辑区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29677049/

相关文章:

javascript - 为什么我的模态窗口在点击后没有关闭?

javascript - 聪明的 "add tag"需要 javascript 帮助

javascript - 如何从js到html的json响应中获取追加数据

javascript - 控制台响应 json

javascript - 为什么jQuery或诸如getElementById之类的DOM方法找不到元素?

jquery - 在线表格的模态高度

css - iframe 在固定定位元素内的位置 (android)

javascript - 为什么asp按钮的javascript click()函数在chrome浏览器中不起作用?

html - materializeCSS中的响应式移动导航如何

php - 从其标签中删除所有图像拍摄选项(alt、class、样式等)