Skip to content

Instantly share code, notes, and snippets.

@eric1234
Created June 18, 2010 13:37
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save eric1234/443640 to your computer and use it in GitHub Desktop.
Save eric1234/443640 to your computer and use it in GitHub Desktop.
Basecamp theming for CKEditor
CKEDITOR.lang.load('en', 'en', function() {
CKEDITOR.lang['en']['numberedlist'] = 'Numbers';
CKEDITOR.lang['en']['bulletedlist'] = 'Bullets';
CKEDITOR.replace('project_description', {
toolbar: [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList']],
toolbarCanCollapse: false,
resize_enabled: false,
customConfig: '',
removePlugins: 'elementspath'
});
});
.cke_skin_kama .cke_focus {outline: none !important}
.cke_skin_kama {padding: 0 !important}
.cke_skin_kama .cke_wrapper {
background-image: none !important;
background-color: transparent !important;
padding: 0 !important
}
.cke_skin_kama .cke_contents {border: 1px solid #737373}
.cke_skin_kama {border-width: 0 !important}
.cke_skin_kama .cke_button a,
.cke_skin_kama .cke_button a.cke_off {
background-color: #eee !important;
border: 1px solid #eee;
}
.cke_skin_kama .cke_button a:hover,
.cke_skin_kama .cke_button a:focus,
.cke_skin_kama .cke_button a:active /* IE */
{
background-color: #eee !important;
border-color: #777;
}
.cke_skin_kama .cke_button a.cke_on,
.cke_skin_kama .cke_button a.cke_on,
.cke_skin_kama .cke_button a.cke_on /* IE */
{
background-color: #999 !important;
border: 1px solid #999;
}
.cke_skin_kama .cke_button a:hover.cke_on,
.cke_skin_kama .cke_button a:focus.cke_on,
.cke_skin_kama .cke_button a:active.cke_on /* IE */
{
background-color: #999 !important;
}
.cke_skin_kama .cke_button_bold span.cke_icon,
.cke_skin_kama .cke_button_italic span.cke_icon {
display:none !important;
}
.cke_skin_kama .cke_button_bold span.cke_label,
.cke_skin_kama .cke_button_italic span.cke_label,
.cke_skin_kama .cke_button_numberedlist span.cke_label,
.cke_skin_kama .cke_button_bulletedlist span.cke_label {
display:inline
}
.cke_skin_kama .cke_button_bold span.cke_label {font-weight: bold}
.cke_skin_kama .cke_button_italic span.cke_label {font-style: italic}
@eric1234
Copy link
Author

The above CSS and Javascript code will make the CKEditor look like the rich text editor on basecamp.

For style I have built on the kama theme. It would probably be best to create a custom "37Signals" theme but this gives the the look I want for less work.

On the JavaScript side it is mostly about removing some default decoration.

There is a slight bit of trickery where I rename the language info for bulleted and numbered lists to the shorter more concise name that 37Signals uses. Obviously if you need to support internationalization then you probably want to just edit the actual source files.

@FredrikWendt
Copy link

A screenshot would be nice - a picture says more than a thousand words :-]

@eric1234
Copy link
Author

I don't think I can upload a screenshot with the Gist comment section but you can see the 37 Signals version at http://productblog.37signals.com/products/2010/05/basecamp-gets-new-messages-and-comments-editor.html

@PabloC
Copy link

PabloC commented Jul 28, 2010

Thanks! I

@eric1234
Copy link
Author

One more thing on this. If you use this you want to replace where it says 'project_description' with the ID of your field. Of course if you want to enable all text areas then you will need to read to CKEditor docs on how to do that.

@QasimQureshi
Copy link

This doesn't seem to work with the newer versions of CKEditor. Anyone have any idea bout what changes would need to be made(OR alternatively, which version of CKEditor this did target).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment