Jump to content
benbyf

Share your CKeditor settings

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 10
  • Thanks 2

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, bernhard said:

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

added above

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 2

Share this post


Link to post
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 5

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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 4
  • Thanks 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

disableNativeSpellChecker:false

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

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 7

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By iipa
      I have a CKEditor Textarea in a page template. Some users like to add text in them by pasting from Word document. This leads to internal server error when saving page. When using paste without formatting (cmd + shift + V), page is saved normally, so I assume error has something to do with Word's hidden characters that cause issues in many other programs as well. (I don't have Word myself, so I debugged this with video chat with user. I forgot to ask to check code view, so I'm not sure if they are visible there.)
      Is there a way in ProcessWire/PHP to sanitize Textarea input from these hidden characters, or can I prevent this by changing editor settings (listed below, if it helps)? I don't like leaving error handling rely to user action - somebody always forgets to do things specific way and it weakens user experience.
      Textarea formatting: none (htmlspecialchars off) field type: CKEditor content type: markup/html experimental markup/html settings: all on acf: on html purifier: on additional purify settings: all on extra allowed content: none add-ons: pwimage, pwlink, sourcedialog sourcedialog settings: none disabled add-ons: image, magicline  
    • By MateThemes
      Hello everyone!
      I have searched the forum for quite a long time and I tried some solutions for my topic but nothing seems to work.
      I need to create a Settings Page and for a native feeling I want to create it under the main navigation on top. The settings page should hold the Main Logo, some styling and other settings. As I said nothing seems to work for me. I tried to create a Page under Admin with Admin Template and ProcessPageEdit but then I can't assign an image field. 
      I don't want to write a module because it is to much work for only 3 settings.
      I hope someone of the forum could help me out!
      Have a nice day!
    • By Gadgetto
      Hello,
      is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too.
      I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field.
      Andy plugins to achieve this?
      Greetings,
      Martin
    • By Smirftsch
      I've got some odd problem adding additional styles to mystyles.js. After reading some and following the article here: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set
      I was able to add a custom style. So far so good 😉
      It is displayed in the Styles menu and can be selected there. Now the odd thing starts, if I add a custom style like this:
       
      ... { name: 'Box Top', element: 'span',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'span', attributes: { 'class': 'box_bottom' } }  
      it works and can be selected just fine.
      However, if I add this:
      { name: 'Box Top', element: 'div',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'div', attributes: { 'class': 'box_bottom' } } It is also displayed, can be selected - BUT - once the edit is saved, it is gone, won't be displayed in the page and won't be shown anymore in the editor as selected style, it goes back to "normal".
       
      Can anyone give me a hint what I missed?
    • By Guy Incognito
      I added some custom styles to the CKeditor menu bar using the example mystyles.js and the PW tutorial. This worked fine for fields when editing on the frontend. But none of our custom styles showed in the backend editor dropdown unless we edited the core copy of mystyles.js in wire/modules.
      Is this correct behaviour, a bug or a mistake on my part? Tried clearing cache, logging in/out etc but the backend ignores our custom styles in the site/modules path.
×
×
  • Create New...