Jump to content

Share your CKeditor settings


benbyf

Recommended Posts

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.

 

5a1c10e74d6e2_Screenshot2017-11-2713_19_09.thumb.png.ffa609ad40e5e975568d4c018ba74874.png

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

 

  • Like 12
  • Thanks 2
Link to comment
Share on other sites

ckeditor.thumb.png.072de30bc0920d677440e3a11d1e6427.png

 

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 :

extraplugins.png.a1d68deb330878099b0dc32af04b00dc.png

 

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 by flydev
suggestion
  • Like 7
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 6
Link to comment
Share on other sites

  • 1 month later...
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

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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' } },
]);

 

Link to comment
Share on other sites

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:

Screenshot(3).png.a99ec938bb284df63261e64fc8743f05.png

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

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

@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 ;) )

  • Like 1
Link to comment
Share on other sites

  • 9 months later...
  • 3 weeks later...
  • 5 months later...

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

  • Like 10
Link to comment
Share on other sites

  • 2 years later...

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...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...