The standard center button only applies a in-line style to the HTML. But how can I add a class 'text-center' to a paragraph or selection by clicking the following icon? I went ahead and created a custom button on CkEditor.

(function($) {
CKEDITOR.plugins.add( 'center', {
    icons: 'center',
    init: function( editor ) {
        editor.addCommand( 'center', genCommand());
        editor.ui.addButton( 'center', {
            label: 'Align text on center',
            command: 'center',
            toolbar: 'center'

        if ( editor.contextMenu ) {
            editor.addMenuGroup( 'centerGroup' );
            editor.addMenuItem( 'centerItem', {
                label: 'Change link',
                icon: this.path + 'icons/center.png',
                command: 'center',
                group: 'centerGroup'
            editor.contextMenu.addListener( function( element ) {
                if ( element.getAscendant( 'center', true ) ) {
                    return { abbrItem: CKEDITOR.TRISTATE_OFF };
        CKEDITOR.dialog.add( 'centerDialog', this.path + 'dialogs/center.js' );
function genCommand( name ) {
    return {
            exec: function( editor ) {
                editor.insertHtml('<p class="text-center>' + editor.getSelection().getNative() + '</p>');

What it is doing is nothing. In the case there is a selection, it deletes the selection and markup.

What I need:

  1. If there is a line saying "text", I need <p class="text-center">text</p>
  2. In the case there is a selection, make 1 out of the selection
  • Why not just add the styles to the Styles bar of CKEditor?
    – Kevin
    Dec 5 '18 at 14:27
  • The styles in the bar are inline css.
    – staminna
    Dec 5 '18 at 16:37
  • ? Mine adds the classes.
    – Kevin
    Dec 5 '18 at 16:57
  • The "center" button uses the inline "style" attribute, but I want the "class" attribute. If you think you can help achieving this in a function, or provide a answer how to do it with screenshots, I will accept your answer.
    – staminna
    Dec 6 '18 at 8:01

Using WYSIWYG/CKEditor in Drupal, you can add classes in the UI and they will show up in the Style drop down.

In the CSS tab of the WYSIWYG Profile you are editing:

enter image description here

You need to have the "Font style" plugin checked off in the config.

enter image description here

Now any element you add here can have it applied, so you would add:

Center P Tag=p.text-center

line to this config.

Then, add some text in the editor, and highlight the text (CKEditor should automatically wrap regular text with a p tag). You should then see the option in the drop down as "Center P Text". You will only see these options available when you've highlighted elements that are applicable. It will then apply the class to the highlighted element, the p tag.

I use this all the time to add classes to various elements just as you are trying to do.

  • I added the CSS instructions but I cannot find the drop down button option.
    – staminna
    Dec 17 '18 at 16:13
  • Added a picture of the WYSIWYG config.
    – Kevin
    Dec 17 '18 at 18:41
  • Thanks a lot. Is there a way to make a top level menu of this out of Styles?
    – staminna
    Dec 18 '18 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.