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 8
  • 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 1

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 5

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 1

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 1
  • 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

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mustafa-Online
      CKEditor 5 v10.0.0 – the future of rich text editing looks stable
      .
       
    • By Rudy
      https://ckeditor.com/blog/CKEditor-5-v1.0.0-beta-released/
      Looks very clean. Hopefully we get to test it on PW soon.
       
    • By manuel1981
      Hey guys,
      I want to disable the crop and align features when placing an image into the CKEditor.
      The image should simply placed in a predefined width without any additional options.
      Can anybody help me with that?
      Thanks, Manuel
    • By MilenKo
      Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup.
      In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again?
       
       
       
       
    • By Robin S
      I got tired of having to open the link dialog in CKEditor in order to check where a link is pointing to, so made this simple plugin.
      Link Hover
      A plugin for CKEditor. Shows the href attribute of a link in a tooltip when the link is hovered. This saves you from having to open the link dialog in order to check where a link points to.

      Installation
      This readme assumes installation in ProcessWire CMS.
      The plugin folder must be named "linkhover" – if necessary, rename the folder to remove the "-master" suffix added by GitHub. Copy the "linkhover" folder to /site/modules/InputfieldCKEditor/plugins/
      In the field settings for each CKEditor field that you want to activate the plugin for, check the "linkhover" checkbox at Input > Plugins > Extra Plugins
       
      https://github.com/Toutouwai/linkhover