Permalink
Browse files

Added overridable stylesSet setting to CKEditor

- added usage instructions
- moved (old) comment to the correct location
  • Loading branch information...
1 parent f323f0b commit 3d01902b7e3ed193b8fdf7054c8a66e9c31e6355 @dbunskoek dbunskoek committed Nov 24, 2011
Showing with 42 additions and 5 deletions.
  1. +30 −0 docs/advanced-usage.rst
  2. +3 −0 fiber/static/fiber/js/admin.js
  3. +9 −5 fiber/static/fiber/js/fiber.ckeditor.js
View
30 docs/advanced-usage.rst
@@ -45,3 +45,33 @@ In this example, the news_item_detail view looks up the Page of the news_item_li
'news_item': news_item
})
return HttpResponse(t.render(c))
+
+
+CKEditor config settings
+========================
+
+Some default CKEditor config settings can be altered by creating a file called admin-extra.js, which should be placed in a folder structure like this:
+
+::
+
+ appname/static/fiber/js/admin-extra.js
+
+Make sure 'appname' is placed _before_ 'fiber' in settings.INSTALLED_APPS, otherwise the admin-extra.js file won't override the default admin-extra.js provided by Django Fiber.
+
+Something like this should be placed in admin-extra.js:
+
+::
+
+ window.CKEDITOR_CONFIG_FORMAT_TAGS = 'p;h1;h2;h3;h4';
+ window.CKEDITOR_CONFIG_STYLES_SET = [
+ { name: 'intro paragraph', element: 'p', attributes: { 'class': 'intro' } }
+ ];
+
+You can also override the entire CKEditor toolbar, by setting the variable:
+
+::
+
+ window.CKEDITOR_CONFIG_TOOLBAR
+
+To see how this works, check the fiber.ckeditor.js file in the Django Fiber source:
+https://github.com/ridethepony/django-fiber/blob/master/fiber/static/fiber/js/fiber.ckeditor.js
View
3 fiber/static/fiber/js/admin.js
@@ -582,6 +582,9 @@ var ChangeForm = AdminForm.extend({
},
set_interaction: function() {
+ // TODO: add Django-like behavior:
+ // - fieldsets should be split into tabs
+ // - collapsible areas should work, etc.
enhance_textareas(this.form);
enhance_comboboxes(this.form);
enhance_jsontextareas(this.form);
View
14 fiber/static/fiber/js/fiber.ckeditor.js
@@ -1,12 +1,16 @@
(function($) {
Fiber.enhance_textarea = function(textarea) {
- // TODO: add Django-like behavior:
- // - fieldsets should be split into tabs
- // - collapsible areas should work, etc.
+
+ if (window.CKEDITOR_CONFIG_STYLES_SET) {
+ if (!CKEDITOR.stylesSet.get('config_styles_set')) {
+ CKEDITOR.stylesSet.add('config_styles_set', window.CKEDITOR_CONFIG_STYLES_SET);
+ }
+ }
window.CKEDITOR_CONFIG_TOOLBAR = window.CKEDITOR_CONFIG_TOOLBAR || [
['Format'],
+ window.CKEDITOR_CONFIG_STYLES_SET ? ['Styles'] : null,
['Bold','Italic'],
['NumberedList','BulletedList','Outdent','Indent'],
['fPageLink','fFileLink','fImageLink','fCustomLink','fUnlink'],
@@ -15,14 +19,14 @@ Fiber.enhance_textarea = function(textarea) {
['Maximize'],
['Source']
];
- window.CKEDITOR_CONFIG_FORMAT_TAGS = window.CKEDITOR_CONFIG_FORMAT_TAGS || 'p;h2;h3;h4';
CKEDITOR.replace(textarea, {
language: LANGUAGE_CODE,
extraPlugins: 'fpagelink,ffilelink,fimagelink,fcustomlink,funlink,fimage,ftable,tabletools',
removePlugins: 'scayt,menubutton,forms,image,link',
toolbar: window.CKEDITOR_CONFIG_TOOLBAR,
- format_tags: window.CKEDITOR_CONFIG_FORMAT_TAGS,
+ format_tags: window.CKEDITOR_CONFIG_FORMAT_TAGS || 'p;h2;h3;h4',
+ stylesSet: window.CKEDITOR_CONFIG_STYLES_SET || null,
toolbarCanCollapse: false,
resize_maxWidth: 610,
baseFloatZIndex: 1100

0 comments on commit 3d01902

Please sign in to comment.