The forum operates in read-only mode. Please head to StackOverflow for support.

Wed, 07/24/2013 - 20:34

tsidel

Joined: 18/12/2012

Posts: 4

Stylesheetparser plugin & Custom Style sheets

Based on my understanding, I have taken the following steps to enable department.css file to populate the dropdown style options in ckeditor:

in my /custom/department_config.js file I added

config.extraPlugins = 'stylesheetparser';

and I made sure that the plugin was installed in /ckeditor/plugins/stylesheetparser

To the page that calls the ckeditor, I added this line

contentsCss : 'department.css',

After I clear all of my caches the CKEditor does not display on the webpage at all. If I remove

config.extraPlugins = 'stylesheetparser';

the page loads as I expect, but the only thing department.css affects are 'default' stylings within the ckeditor (p, a, div, etc). It does not load classes into the style dropdrown. (I do have other styles listed under CKEDITOR.stylesSet.add('dept_styles',[ ... ]); in the department_config.js file and those do appear in the drop down)

Does this make sense? What am I doing wrong?

Thanks,

-j

---

edited:

It looks like according to this: http://docs.ckeditor.com/#!/guide/dev_styles (for v4) I don't need to add config.extraplugins. But I'm still not able to load the external stylesheet.

Wed, 07/24/2013 - 22:23

alfonsoml

Joined: 31/12/2006

Posts: 3735

Maybe your stylesheet doesn't

Maybe your stylesheet doesn't has the info that the parser expects (it's basically a selector built with an element and a class name, based on the Style features of CKEditor)

Or maybe you're facing an old bug in that plugin that still hasn't been fixed. At least I haven't tried to use that one with 4.x so I don't know if it has some new problems; it's just another in the steps to verify that everything works like it used to do in 3.6 and as I always find some problem I put the upgrade aside until 4.x is feature compatible with 3.6

Wed, 07/24/2013 - 22:26

tsidel

Joined: 18/12/2012

Posts: 4

Thanks alfonsoml. I think my

Thanks alfonsoml. I think my stylesheet is formatted correctly:

body, table, td, p {
	color: #5e5e5e; 
	font-family: Georgia, serif; 
	font-size: 14px;
	line-height:17px;
	align:left;
	background-color:#dcdcdc;
}

p.superclass {
	font-weight:bold;
	color:green;
	font-size:43px;
	}

for the body, table, td, p those styles are applied within the ckeditor window and I'm happy about that. However, I would expect that p.superclass would show up as a style option, and it does not. Am I missing something?

Wed, 07/24/2013 - 22:29

alfonsoml

Joined: 31/12/2006

Posts: 3735

yes, that's the correct

yes, that's the correct syntax.

I don't know what's your problem. It could be a bug in the plugin with your browser or CKEditor 4.2, but I'm only guessing. I know that I had to patch that plugin long ago, but in that case you get a javascript error while loading the editor.

Fri, 07/26/2013 - 18:40

tsidel

Joined: 18/12/2012

Posts: 4

Current Set-up

Here is a current simple setup I'm trying to implement:

/ckeditortest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MBA Administration Tools</title>

<script src="/ckeditor/ckeditor.js"></script>
</head>

<body>

<p class="PageHeader">Create a New Newsletter Email Template</p>



    <form method="post">
        <p>
            <textarea name="mbaNewsEditor"></textarea>
            <script>
                CKEDITOR.replace( 'mbaNewsEditor', {
    				customConfig : '/ckeditor/custom/mbaNews_config.js',
                } );
            </script>
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
    

</body>
</html>

/ckeditor/custom/mbaNews_config.js

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For the complete reference:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config
	config.uiColor = '#1a5cb3';
	config.contentsCss = '/ckeditor/ckeditor_mba.css';
	config.stylesSet = [];




	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'styles' },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons, provided by the standard plugins, which we don't
	// need to have in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Se the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Make dialogs simpler.
	config.removeDialogTabs = 'image:advanced;link:advanced';
};

/ckeditor/ckeditor_mba.css

body, table, td, p {
	color: #5e5e5e; 
	font-family:'Calibri', Arial, sans-serif; 
	font-size: 14px;
	line-height:17px;
	align:left;
	background-color:#dcdcdc;
}

p.superclass {
	font-weight:bold;
	color:green;
	font-size:43px;
	}

I would expect that "Superclass" would show up in the dropdown. It does appear to be reading some of the stylesheet though, as it has given everything I told it to a background color of #dcdcdc

But what have I done wrong? Why does "Superclass" not show up in the dropdown? This is in chrome, but I've tried multiple computers, multiple browsers, and I have the same result... so I don't think it's a browser issue.

Thanks.

Attachments:

Attachment	Size
Screen shot	84.63 KB

Sat, 07/27/2013 - 18:13

tsidel

Joined: 18/12/2012

Posts: 4

[ SOLVED ]

Finally solved my problem!

http://rev.ckeditor.com/ckeditor/trunk/7679/_samples/stylesheetparser.html

My final html page now reads as such:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MBA Administration Tools</title>

<script src="/ckeditor/ckeditor.js"></script>
</head>

<body>

<p class="PageHeader">Create a New Newsletter Email Template</p>



    <form method="post">
        <p>
            My Editor:<br>
            <textarea name="mbaNewsEditor"></textarea>
            <script>
                CKEDITOR.replace( 'mbaNewsEditor', {
    				customConfig : '/ckeditor/custom/mbaNews_config.js',

    				extraPlugins : 'stylesheetparser'

                } );
            </script>
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
    

</body>
</html>

Hopefully this trail of thought will be helpful to someone.

To the admins, it might be helpful to include a link to: http://rev.ckeditor.com/ckeditor/trunk/7679/_samples/stylesheetparser.html on the setup page here: http://docs.ckeditor.com/#!/guide/dev_styles

Mon, 07/29/2013 - 12:19

sebstefanov

Joined: 03/02/2012

Posts: 1329

Thanks for letting us know!

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!