CODEWITHSUNDEEP
javascripthtmlcssckeditor
andrewcalderwoodSAI
andrewcalderwoodSAI

Reputation: 33

How to add multiple css files to CKEditor editorarea

I have created a small mvc application using Ckeditor that should use some css files that are stored on a local server 

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

At the initialization of the editor i call setData and pass in a string with that html block to apply the remote css files to the content of the editor. However they are not being applied correctly

if i set config.fullPage = true then the html block gets put in between the body tags and thus can be deleted if the user presses the backspace key enough.

I have also tried setting config.fullPage =false, this inserts the content fine however it strips the head tags from the block so it can also be deleted by the user if they press backspace.

Is there anyway of getting this html block to go specifically in the head section so that it cannot be edited?

Upvotes: 2

Views: 4336

Answers (1)

mondjunge
mondjunge

Reputation: 1239

I recommend to use the config.contentsCss property in your ckeditor config, to set a specific css file or a list of css files. See API Docs: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

Since version 4.4 it is also possible to add more than one stylesheet during runtime to the editor instance with editor.addContentsCss(), see http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss for more info.

May the source be with you. Have Fun.

Upvotes: 4

Related Questions