KangLing

How to configure CKEditor(textarea field) to enable Color toolbar?

Recommended Posts

I download 'Color Button' plugin and its dependencies 'Floating Panel', 'Panel Button', ''Panel, 'Button' plugins.

unzip and upload them to the /site/modules/InputfieldCKEditor/plugins directory.

go to Setup -> Fields -> myfield -> Input, scroll down to the 'Plugins' section and check the box for these 5 plugins. Save.

but the Color Buttons are not automatically added to the toolbar.

Share this post


Link to post
Share on other sites

Did you add "TextColor, BGColor" to the CKEditor Toolbar? My first line looks like this:

Format, -, Bold, Italic, Underline, -, TextColor, BGColor, -, RemoveFormat

You can further customize what colors will be allowed, under Custom Config Options:

colorButton_enableMore: false 
colorButton_colors: F00,FFC609,FFF 
  • Like 5

Share this post


Link to post
Share on other sites

Did you add "TextColor, BGColor" to the CKEditor Toolbar? My first line looks like this:

Format, -, Bold, Italic, Underline, -, TextColor, BGColor, -, RemoveFormat

You can further customize what colors will be allowed, under Custom Config Options:

colorButton_enableMore: false 
colorButton_colors: F00,FFC609,FFF

Thank you, matjazp.It works!

Share this post


Link to post
Share on other sites

Is there a place for CKEditor and processwire implementation, always seem to have to hunt around the forums to create workable edits to CKeditor in PW.

  • Like 2

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 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
    • By Jonathan Lahijani
      Looks like CKEditor 5 is on the way:
      https://ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/
      https://news.ycombinator.com/item?id=15497972 (HackerNews comments of the above article)
      Home page:
      https://ckeditor.com/
      Demo:
      https://ckeditor5.github.io/
      Feature Video:
       
    • By euphoricrun
      I was wondering if there's a way to set an absolute path instead of relative when linking to a file in CKEditor? Any help would be appreciated.