KangLing

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

6 posts in this topic

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 
5 people like this

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.

2 people like this

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 rsi
      Hi everyone!
      I have to say that i am so happy that i have found Processwire. It is great to work with, although I'm just starting and am probably doing many things more complicated than necessary

      I am at a point now where I would like to automatically add a certain class (img-responsive) to images that are added to a page via CKEditor.

      I tried to find information on how to customize CKEditor and i found 61 pages here on this forum, but i had a hard time figuring out where to put a config.js file or how to call it!
      Writing a plugin for CKE is what came up most, but it seemed a bit too much...

      Maybe there is a basic introduction to CKE in processwire that i missed?

      Please someone point me in the right direction

      thank you all!



       
    • By Cody Connor
      I installed the InputfieldCKEditor module and am using the ck editor in all of the fields on my processwire website.  I need to be able to drag images into the CKEditor field so I downloaded a CKEditor plugin called simpleuploads put it into /site/modules/InputfieldCKEditor/plugins/ and added the plugin to the field I am working on.  I have tried doing it many different ways and the plugins still are not working and I have no idea where to go from here.
      I am working with processwire version 3.0.61.
      I am using CKEditor version 4.4.2.


    • By billjoseph
      Weirdest thing just happened to me.  I updated blank site from 3.0.42 to 3.0.61 then started adding fields.  I have two instances of FieldsetOpen areas in the template, and a few CKEditor textareas (both inside those fieldsets and outside). 
      I added an image field to the template and placed it near the top of the template fields.  Once I did that I was unable to toggle either Fieldset, and the CKEditor stopped working.
      When I moved the image field to the bottom of the template fields, the CKEditor loaded, but the fieldsets still wouldn't toggle.  When I deleted the image field, the editor and toggle return to normal.  (Adding a new image field re-introduces the issues.)
      I've tried adjusting the settings on the image field but the result is the same - even with all default settings.  I tried adding an image field to a different template - same result.
      What am I missing here?
    • By holmescreek
      This question has probably been beaten to death - think I'm approaching this wrong. 
      Anyway, I've got a textarea input field that uses ckeditor.
      Under the fields Input section I managed to add my custom style sheet in the 'Custom Editor CSS File (regular mode) section for instance:
      /site/templates/css/ckeditor.css

      This seems to work fine.
      What I'm trying to do now is add a custom style to the ckeditor styles menu, for instance, called .green_button
      (p.s. in the ckeditor styles.js I added this to the inline section : { name: 'Green Button', element: 'a', attributes: { 'class': 'button' } },
       
      Ok, onto the problem...
      I notice that PW, by default, is using  /wire/modules/inputfield/inputfieldCKEditor/ckeditor-4.5.10/styles.js
      So, I copied this into /site/templates/js/mystyles.js
      Next, I added the above to the 'Custom Editor JS Styles Set' field, however, it doesn't seem to load myckeditorstyles.js -- rather continues to load the one from the /wire/modules... folder.
      I cleared all history and caching in Safari (also tried Chrome, etc).

      I'm wondering if there is something else I need to do to have PW load my /site/templates/js/myckeditorstyles.js instead of the one in /wire/modules.../ckeditor-4.5.10/styles.js ?

      Thanks!
       
       

    • By zota
      Hi,
      installing a CKEditor plugin seems easy:
      - download,
      - extract to /site/modules/InputfieldCKEditor/plugins/[folder with the plugin name will sit here/]
      - on admin setup > fields > any field that works with CKEditor > tab Input > scroll down and you will see the new plugin waiting activation:

      Ooops, only shows the default extra plugins...
      What am I missing?
      Thanks
      EDIT: it was a simple permission problem. One should check and change the permissions of downloaded stuff...