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 7
  • Thanks 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 4

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

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 Krlos
      Hi,
      I'm having problems to insert images on a Ckeditor body field. The images are uploaded to a image field and the page is saved.
      When I do clic in Ckeditor Image button I get:
       
      Failed to init module: ProcessPageEditImageSelect - No page specified The requested process does not exist The process returned no content. I'm using the superuser account.
      Processwire version: 3.0.79
      This is the first time I get an error in Processwire...
      Thank you.

    • By EyeDentify
      Hello There fellow PW gurus.

      I am trying to make a field show as open only if the field is filled out with at string.
      for example: "my_styles.css" and stay hidden if the field is empty.

      The field in question is of type "text" if that helps.

      And i put in the "show this field only if"
      css_filename!=''

      because the field name is "css_filename"

      But no mather what the field is closed because i have choosen it as "closed" as default.

      What am i doing wrong?

      i am running PW 3.0.83 Dev.
       


    • By sebr
      Hi
      I'm working on my tempate to provide an AMP (Accelerated Mobile Page) template version.
      But there is a problem with CKEditor. AMP needs width AND height attributes to all images. Then when I instert an image in my body field from CKEditor the source code juste includes width attributes.
      How can I add automaticaly height width CKEditor ? Or if not possible width CKEditor, how can I dow from URL image to get height image ?
      Thanks in advance
    • By Jon
      Hello All,
      One of my clients is having problems with the alignment of images with captions within the body. The problem is once the image has been inserted into the body and we try and move it by drag and drop this only moves the image and leaves the caption behind.
      Anyone know of a fix for this so the whole figure is moved rather than just the image? 
      Cheers
      Jon
    • By Robin S
      Headings Case
      A plugin for CKEditor fields in ProcessWire CMS/CMF. Adds a toolbar button for changing the case of all headings or selected headings between sentence case and title case.
      This is useful when you are copy/pasting text from a document that has been supplied with an inconsistent or incorrect system of capitalisation.
      Installation
      The plugin folder must be named "headingscase" – if needed, rename the folder to remove the "-master" suffix added by GitHub. Copy the "headingscase" folder to /site/modules/InputfieldCKEditor/plugins/
      In the field settings for each CKEditor field that you want to activate the plugin for:
      Check the "headingscase" checkbox at Input > Plugins > Extra Plugins Add "HeadingsCase" at Input > CKEditor Settings > CKEditor Toolbar Usage
      To change the case of all headings, click the toolbar button with no text selected in CKEditor. The first click applies sentence case; the second click applies title case.
      To change the case of a single heading, select all or part of the heading in CKEditor before clicking the toolbar button.

      There can be situations where the results need manual correction: proper names, acronyms, etc.
      Exceptions for small words
      Certain short English prepositions and conjunctions (three letters or less) are excluded from capitalisation when title case is applied. Edit the exceptions array in the plugin source code if you want to customise this list of exceptions.
       
      https://github.com/Toutouwai/headingscase