How to add multiple css files to CKEditor editorarea

Question

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?

mondjunge · Accepted Answer · 2015-04-16 14:10:21Z

4

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.

answered Apr 16, 2015 at 14:10

mondjunge

1,25714 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mondjunge Over a year ago

Please update your question if my answer is not addressing your problem. I understood that you want the styles to style your editor content. But I see now, that you might want to achieve something else.

andrewcalderwoodSAI Over a year ago

No that seems to be along the right lines, i will try it and update my post.

mondjunge Over a year ago

just in case: Be aware that it is contentsCss, not contentCss. I can remember spending hours on that personal failure a few years ago. ;)

andrewcalderwoodSAI Over a year ago

Ah that could be it i think. i tried ContentCss already and it didnt work but i didnt realise there was a contentsCss property. thanks for the will let you know if it works.

andrewcalderwoodSAI Over a year ago

Yeah thanks that worked great. Cant believe i was only 1 character away from correct hours ago.

Collectives™ on Stack Overflow

How to add multiple css files to CKEditor editorarea

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related