Share your CKeditor settings

[benbyf]

HELLO! I always struggle adding additional functionality, buttons and other settings to the CKeditor and I guess other people might have the same issue at times.

For those who are CKeditor aces would you share your settings in this post to help others with what I guess should be a simple task to extend the default settings.

 

Extra color select and text formating

toolbar

Format, Styles
Bold, Italic, Underline, -, RemoveFormat
TextColor, BGColor
JustifyLeft , JustifyCenter, JustifyRight, JustifyBlock
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor
PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord
Scayt, -, Sourcedialog

extra allowed content

small[*]
section
font[style]
span[style]{!color}
code[*]

custom config options

colorButton_colors: ec4626,ffde43,00aaeb,004a87,7b9320,ffffff

extra plugins

colorButton

 

[bernhard]

maybe it would be nice to have a screenshot attached to get an instant impression?

[benbyf]

2 minutes ago, bernhard said:

maybe it would be nice to have a screenshot attached to get an instant impression?

added above

[flydev 👊🏻]

 

Toolbar :

Quote

JustifyBlock, JustifyCenter, JustifyLeft, JustifyRight
Format
Styles
Bold, Italic, Underline, -, RemoveFormat
TransformTextToLowercase,TransformTextToUppercase,TransformTextCapitalize
TextColor,BGColor
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor
pbckcode
PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord
Scayt, -, Sourcedialog
facebookvideo

 

Extra plugins :

 

PS: A small suggestion @benbyf, you could include in the first post a) a small "howto customize" the ckeditor and/or b) a list of forum links where people can find useful information on "howto customize" the ckeditor (I remember that sometime I need to look at the javascript source-code of the plugin to find the right button-code to include in the ckeditor settings).

Edited November 27, 2017 by flydev
suggestion

[dragan]

Great forum thread idea

I don't have time right now for creating screenshots and copy-pasting settings, but from the top of my head here are a few things I like to use:

• maximize (open RTE in fullscreen, a.k.a. distraction-free writing mode)
• show blocks (puts visual border around the currently selected block
• accessibility checker
• embed media from external sites (Youtube etc.)

I'll follow up tomorrow with links, screenshots etc.

[Kiwi Chris]

I just had an issue with a site where end users were pasting content from Word. There is a Paste From Word plugin, but that still leaves a lot of formatting and overrides the paste as plain text. To resolve this I did the following:

Custom Config Options

forcePasteAsPlainText:  true

Remove Plugins

I added pastefromword to the end of the list already there.

 

[tpr]

Great topic idea. FYI, in AdminOnSteroids you can globally add plugins (with buttons, if available) to all ckeditors. Please feel free to suggest a plugin to add to aos.

Additionally you can selectively set, add or remove buttons per user role, template, etc with its FieldOverrides submodule.

[benbyf]

On 27/11/2017 at 1:59 PM, flydev said:

PS: A small suggestion @benbyf, you could include in the first post a) a small "howto customize" the ckeditor and/or b) a list of forum links where people can find useful information on "howto customize" the ckeditor (I remember that sometime I need to look at the javascript source-code of the plugin to find the right button-code to include in the ckeditor settings).

Hey @flydev would love someone to add this as im very much confused about how to edit the CKeditor well, I usaully hack it abit till it works

[benbyf]

Still finding it super difficult to edit the CKeditor.

Trying to add my own styles, to the styles panel. Added the file mystyle.js to /site/modules/InputCKEditor/ the styles button is present. and I added code to that file as well as the path (or name or both none worked for me) to the Custom editor Js styles field.

CKEDITOR.stylesSet.add( 'mystyles',
[
    // Block-level styles
    { name : 'Italic Aleo', element : 'p', styles : { 'class' : 'aleo' } },
]);

 

[Juergen]

Can you compare my settings to yours, because in my case it works well.

I have my JS custom file located in the folder "ckeditor".

Path to the JS-file entered in the input:

mystyles:/site/templates/ckeditor/mystyles.js

and in the mystyles.js I have fe UIKit styles like these:

CKEDITOR.stylesSet.add( 'mystyles', [ 
 { name: 'Inline Code', element: 'code' }, 
 { name: 'Inline Quotation', element: 'q' },
 { name: 'Bild links', element: 'img', attributes: { 'class': 'align_left' } },
 { name: 'Bild rechts', element: 'img', attributes: { 'class': 'align_right' } },
 { name: 'Bild zentriert', element: 'img', attributes: { 'class': 'align_center' } }, 
 { name: 'Small', element: 'small' },
 { name: 'Text durchstreichen', element: 'del' },
 { name: 'Inserted Text', element: 'ins' },
 { name: 'Cited Work', element: 'cite' },
 { name: 'Highlight', element: 'mark' },
 { name: 'Einfügen', element: 'ins' },
 { name: 'Sample', element: 'samp' },
 	/* Uikit headlines */
 { name: 'unterstrichen', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
 { name: 'Linie in der Mitte', element: 'h', attributes: { 'class': 'uk-heading-line' } },
 { name: 'Kugel am Anfang', element: 'h', attributes: { 'class': 'uk-heading-bullet' } },
 	/* Uikit paragraphs */
 { name: 'Kleine Schrift', element: 'p', attributes: { 'class': 'uk-text-small' } },
 { name: 'Große Schrift', element: 'p', attributes: { 'class': 'uk-text-large' } },
 { name: 'Nur Kleinbuchstaben', element: 'p', attributes: { 'class': 'uk-text-lowercase' } },
 { name: 'Nur Großbuchstaben', element: 'p', attributes: { 'class': 'uk-text-uppercase' } },
 { name: 'Erster Buchstabe groß', element: 'p', attributes: { 'class': 'uk-text-capitalize' } },
 { name: 'Farbe: gedämpft', element: 'p', attributes: { 'class': 'uk-text-muted' } },
 { name: 'Farbe: Primär', element: 'p', attributes: { 'class': 'uk-text-primary' } },
 { name: 'Farbe: Erfolg', element: 'p', attributes: { 'class': 'uk-text-success' } },
 { name: 'Farbe: Warnung', element: 'p', attributes: { 'class': 'uk-text-warning' } },
 { name: 'Farbe: Gefahr', element: 'p', attributes: { 'class': 'uk-text-danger' } },
  /* ul classes */
  { name: 'Liste mit Kugel', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
  { name: 'Liste mit Linie', element: 'ul', attributes: { 'class': 'uk-list uk-list-divide'}}
] );

Here is a screen shot of the custom styles dropdown:

So in my case I didnt find it difficult  to add styles

 

[benbyf]

Thanks @Juergen got it working finally, I had the file here:

mystyles:/site/modules/InputfieldCKEditor/mystyles.js

And turns out I had errors in that file too. But got it to working after finding the errors in the console when CKEditor wasnt loading properly.

[MilenKo]

@Juergen Thanks for the shared custom mystyles.js . I was wondering what else I could add to the editor to make the life of my friend easier when adding his content and found quite a few useful ideas even though my project is under Bootstrap but not uikit yet (the last one is in a process of learning )

[flydev 👊🏻]

For the faq reference :

 

Mathjax plugin :

 

 

CKEditor and pasting

 

[ceberlin]

This code in the ckeditor custom settings activates the browsers native spellchecker  (we use the languagetool plugin for Firefox/Chrome):

disableNativeSpellChecker:false

[Juergen]

Here is another snippet that I use to get rid of unwanted table properties:

// Remove unwanted attributes from tables
CKEDITOR.on('dialogDefinition', function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if (dialogName == 'table') {
    var info = dialogDefinition.getContents('info');
    info.remove('txtWidth');
    info.remove('txtHeight');
    info.remove('txtBorder');
    info.remove('txtCellPad');
    info.remove('txtSummary');
    info.remove('txtCellSpace');
    info.remove('cmbAlign');
    var advanced = dialogDefinition.getContents('advanced');
    advanced.remove('advStyles');
    advanced.remove('advId'); //Id attribute
    advanced.remove('advLangDir'); // writing direction
    advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
  }

Put this code inside your custom config.js

Best regards

[modifiedcontent]

I want to quickly remove the picture upload button from Ckeditor - it doesn't play nice with Processwire or does it? I appreciate this thread, because I am always very confused how to customize the editor, although I have done it several times before. 

Where are these settings? I have to edit directly in a Ckeditor js file somewhere, right? Or does Processwire have a built-in settings editor somewhere? 

I see there is some explanation here... That makes customizing the editor for PW fields not that difficult; settings are in the Input tab for the field that uses Ckeditor.

But I see I am using a second Ckeditor on the front-end, that I'll have to customize in the js file I guess. I should figure out how to use the editor that comes with PW instead...