CODEWITHSUNDEEP
ckeditor
umezo
umezo

Reputation: 1579

How to customize individual buttons (not the overall toolbar) in CKEditor

I'm using CKEditor in my Rails app (via the 'ckeditor' gem). I've customized the toolbar as below. As you can see, I only want the minimum amount of features.

 [
    { name: 'basicstyles', items : [ 'Bold','Underline' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
    { name: 'links', items : [ 'Link' ] },
    { name: 'insert', items : [ 'Smiley','SpecialChar' ] },
    { name: 'colors', items : [ 'TextColor' ] },
 ];

This works fine, but the buttons provide much more functionality than I need.

For example, the Link button triggers a popup that allows the user to choose details like link type and target. I want to restrict my users to exactly one kind of link. (ie. when they click the link button, all they need to do is enter the link, and they see no options and have no decisions to make.)

For Text Color, I just want two or three colors, instead of the 50+ that are provided.

How can I make these changes?

Would appreciate it if you could provide input, or point me to some resources. Thanks!

Upvotes: 0

Views: 1429

Answers (2)

Reinmar
Reinmar

Reputation: 22023

You can try the Advanced Content Filter that we introduced in CKEditor 4.1. Based on content rules which you can define editor data is filtered and the same happens to UI - only "allowed" buttons and fields in dialogs are displayed. It all happens automatically, so the result may not be perfect, but we have really positive feedback about this feature.

Check the ACF sample and release note.

Upvotes: 1

Robyflc
Robyflc

Reputation: 1209

To make these changes, you'll need to rewrite the desired plugins in order to customize their funcionality.

You can find further info about it here: http://docs.ckeditor.com/#!/guide/plugin_sdk_intro

In order not to break compatibility with newer versions, I suggest you to create new plugins based in the ones you want to modify instead of doing that directly in their source code.

Upvotes: 1

Related Questions