in Ckeditor how to add css to the to document which is created

Question

0.00/5 (No votes)

See more:

i am using ck editor to to create html document i want to add css from the style sheet can anyone tell me how do i achieve it

Posted 16-Jul-13 0:02am

surajemo

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dholakiya Ankit · Answer 1 · 2013-07-16T00:28:00

Solution 1

i thing you cant you have to do formatting or applycss before copying it to editor

Posted 16-Jul-13 0:28am

Dholakiya Ankit

Comments

surajemo 16-Jul-13 8:16am

i cant do that i want style sheet to be applied

Dholakiya Ankit 16-Jul-13 8:17am

ok then try by adding sourceview and add url

surajemo 16-Jul-13 8:51am

i didnt understood

Karthik J, Coimbatore · Answer 2 · 2013-07-16T00:29:00

Solution 2

To achieve this.. Switch to source view and add ur stylesheet

Posted 16-Jul-13 0:29am

Karthik J, Coimbatore

Comments

surajemo 16-Jul-13 8:17am

i tried that it does not work when i add the style sheet and then again switch to html view
link tag dissapears ckeditor ignores it

[no name] 17-Jul-13 0:45am

If u need static declaration, u can edit a line in config.js or ckeditor.js

from:
contentsCss : CKEDITOR.basePath + 'contents.css',
to:
contentsCss : 'http://www.Site.org/css/UseThisStylesheet.css',(provide full path)

If u want different stylesheet for different content u can add it in source view inside paragraph tag
Ex: <p><link rel="stylesheet" type="text/css" href="theme.css"></p>

surajemo 17-Jul-13 0:58am

hey karthik static declaration, works out pretty well style are getting applied

Can u tell me how do i get background color of html document i added a color picker
and when we select the color i have written jquery to set the background of the document of the html within ckeditor

<script type="text/javascript">

$(document).ready(function() {
// Events demo cp1 is texbox ans #title is h1 tag
$('#cp1').colorpicker({ color: '#8db3e2' })
.on('change.color', function(evt, color) {

$('#title').attr('style', 'background-color:' + color);

CKEDITOR.instances.editor1.document.getBody().setStyle('background-color', color);
//add this were i am adding the div to the document within the ckeditor to get color //background color within document
var oEditor = CKEDITOR.instances.editor1;
var dat = CKEDITOR.instances.editor1.getData(); //get the data from the editor
var tg = "<div style='background-color:" + color + "'>" + dat + "</div>";

oEditor.insertHtml(tg);
})
.on('mouseover.color', function(evt, color) {
//$('#title').attr('style', 'background-color:' + color);
// CKEDITOR.instances.editor1.document.getBody().setStyle('background-color', color);

})
});

</script>

but this one <p><link rel="stylesheet" type="text/css" href="theme.css"></p> does not work out