I want to populate the Styles drop-down list with style definitions from an external CSS stylesheet file.
This is how I proceeded:
1) I created my css file. Its name is ´mysitestyles.css´and its contents is this:
I placed this file in this directory:
2) I activate the stylesheetparser plugin for my CKEditor by editing the file
introducing this line:
3) I supplied the location of the CSS file that contains my style definitions by using the contentsCss configuration setting editing the file
by introducing this line:
And remolving this one
After all this I would expect to open CKEditor and see in the Styles drop-down list my stile hh3.
But I don't see the style hh3 in the Styles drop-down list of CKEditor.
Any idea?
This is how I proceeded:
1) I created my css file. Its name is ´mysitestyles.css´and its contents is this:
hh3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
}I placed this file in this directory:
sites/all/modules/ckeditor/ckeditor/mysitestyles.css
2) I activate the stylesheetparser plugin for my CKEditor by editing the file
sites/all/modules/ckeditor/ckeditor/_source/core/config.js
introducing this line:
config.extraPlugins = 'stylesheetparser';
3) I supplied the location of the CSS file that contains my style definitions by using the contentsCss configuration setting editing the file
sites/all/modules/ckeditor/ckeditor/_source/core/config.js
by introducing this line:
config.contentsCss = 'mysitestyles.css';
And remolving this one
/* contentsCss : CKEDITOR.basePath + 'contents.css',*/
After all this I would expect to open CKEditor and see in the Styles drop-down list my stile hh3.
But I don't see the style hh3 in the Styles drop-down list of CKEditor.
Any idea?
Re: CSS stylesheet file
First of all, what is your environment? Drupal version, CKEditor for Drupal module? Are you using the commercial module, or the Open Source one?
Documentation Manager, CKSource
See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!
Re: CSS stylesheet file
I want to populate the Styles drop-down list with style definitions added from an external CSS stylesheet file.
According to the Developers Guide (http://docs.cksource.com/CKEditor_3.x/D ... ide/Styles) the first step is to activate the stylesheetparser plugin for the CKEditor instances by using the extraPlugins configuration setting:
config.extraPlugins = 'stylesheetparser';
This line appears in two different files:
_source/core/editor.js
_source/core/config.js
My question is: In which of these two files do I have to activate the stylesheetparser plugin ?
********************************
My CMS is Drupal-7.12
My theme is danland-7.x-1.0
My Drupal ckeditor is ckeditor-7.x-1.8
My ckeditor is ckeditor_3.6.2 (not the commercial)
Re: CSS stylesheet file
As I explained recently (viewtopic.php?p=63687#p63687) the stylesheet parser finds only the rules specified based on both a tag name and a class.
Your "hh3" refers only to an (inexistent) "hh3" element and lacks a class name, so the stylesheet parser can't use it.
Re: CSS stylesheet file
Thanks alfonsoml:
That will be extremely useful if I decide to use External Styles Definition File without using Stylesheet Parser Plugin.
However that is not what I am trying to achieve now, I want to use External Styles Definition File using Stylesheet Parser Plugin.
My purpose is to populate the Styles drop-down list with style definitions added from an external CSS stylesheet file using the Stylesheet Parser Plugin.
In order to do that, according to the documentation, I must activate the stylesheetparser plugin by adding this line:
config.extraPlugins = 'stylesheetparser';
in some file.
My question is: In which of these two files (editor.js or config.js) do I have to activate the stylesheetparser plugin ?
Re: CSS stylesheet file
As explained here, you can add your custom configuration either in the Drupal Administration panel (Configuration > Content Authoring > CKEditor, adjust the profile that you want to use in the Advanced options -> Custom JavaScript configuration section) or by adding your configuration settings to the "sites/all/modules/ckeditor/ckeditor.config.js" configuration file:
There is no need to change anything in the source files of CKEditor.
Please note that Alfonso's remarks are still valid -- the Stylesheet Parser will only display the style definitions that contain both an element and a class in the Styles drop-down menu.
Documentation Manager, CKSource
See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!
Re: CSS stylesheet file
OK, Thank you.
Taking into account all your remarks I proceed like this:
1./ Creation of a .css
I have created a file called mycss.css
With this content:
p.error_msg {
color: purple;
}
2./ Upload the file mycss.css to the Server
I have placed the file in the directory /themes
Hence the file mycss.css is at the same level as directories /bartic, /engines, /Garland, /seven and /stark
3./ Activate the Stylesheetparser
I want to add my custom configuration in the Drupal Administration panel.
I go to Configuration >>> CONTENT AUTHORING CKEditor
Here a see two Profiles, Advanced and Full, each of them allows 3 operations: edit clone delete
I choose to edit the Profile Full
I go to Advance Options and there I find a box labelled "Custom JavaScript configuration"
In this box I introduce the line:
config.extraPlugins = 'stylesheetparser';
and I save
4./ Register the path to mycss.css
Again I go to Configuration >>> CONTENT AUTHORING CKEditor
Here a see two Profiles, Advanced and Full,
I choose to edit the Profile Full
I go to CSS where I see a box labelled "CSS file path"
Given that my css file is called mycss.css and that it exist already in the /themes subdirectory
I introduce the following
%h/themes/mycss.css
Bellow this textbox I read this warting: "Make sure you select the Define CSS option above.
So I go to the drop-down box labelled Editor CSS and I choose the option Define CSS
AND THE STYLE error_msg IS NOT IN THE CKEDITOR STYLES DROP-DOWN LIST
What did I miss this time ?