Added overridable stylesSet setting to CKEditor

- added usage instructions - moved (old) comment to the correct location
spookylukey · Nov 24, 2011 · 3d01902 · 3d01902
1 parent f323f0b
commit 3d01902
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/docs/advanced-usage.rst b/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
diff --git a/fiber/static/fiber/js/admin.js b/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);

diff --git a/fiber/static/fiber/js/fiber.ckeditor.js b/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
+	if (window.CKEDITOR_CONFIG_STYLES_SET) {
-	// - collapsible areas should work, etc.
+		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