5

The CKEditor in Drupal 8 has a Formats toolbar button containing different text formats: "Heading 1", "Heading 2" etc. How can I add and remove items from this list?

enter image description here

4

I would use Styles instead of Formats, because styles are fully controlled by you, from admin interface, no need for editing files.

When you add it to the toolbar you can configure it and add as many elements as you wish.

Here is an example config: enter image description here

  • 2
    "Styles" are meant to be site-specific styles, not formats. E.g. callouts, warnings, tips, those kinds of things. Things that don't exist in HTML. But of course you could use it in the way that you are. Note that styles don't get a live preview, but formats do. See my alternative answer that answers the actual question better: drupal.stackexchange.com/a/195350/7632. – Wim Leers Mar 20 '16 at 11:35
  • Glad it helped! :) – Wim Leers Apr 7 '16 at 16:28
  • For those lost trying to find the toolbar editor, go to /admin/config/content/formats/manage/{text_format}. Each different text format has its own toolbar. – user1359 Apr 9 '18 at 16:53
3

You modify the "Formats" dropdown by changing the list of allowed HTML tags. Any block-level HTML tags are shown in the "Formats" dropdown by CKEditor automatically.

For a tutorial/full explanation, see https://www.drupaleasy.com/quicktips/limiting-block-level-styles-drupal-8-ckeditor.

  • This only removes "unallowed" block formats, it does not add back formats that are missing (i.e. DIV) – sdmeyers Jan 5 '17 at 20:40
1

You need to hook_editor_js_settings_alter(), for adding DIV, like this:

function YOUR_MODULE_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['format_tags'] .= ';div';
    }
  }
}
  • How can I modify the ckeditor config in Drupal 8. I want to disallow html tags. I tried using js. and adding this config.disallowedContent= 'div span'; but it doesn't work. How can I add this in hook_editor_js_settings_alter – paulcap1 May 4 '18 at 13:34
  • This is a D8 hook which works! If you want to disallow all HTML create your own text format via Admin-UI. The disallowedContent can be set there too ! Otherwise in the hook, it should be changable like this: $settings['editor']['formats'][$text_format_id]['editorSettings']['disallowedContent'] .= ';div;span' – rémy May 7 '18 at 8:20
  • so - pls vote this answer up pls :D – rémy May 9 '18 at 15:37
  • It's not working for me. [code] Notice: Undefined index: format_tags in moduleName_editor_js_settings_alter() (line 65 of modules/custom/moduleName/moduleName.module). [/code] – Patryk Godowski Jun 25 at 13:17
0

I disable the formats, and define custom styles like explained in https://drupal.stackexchange.com/a/193528/71941. Then, to get a live preview in your editor, include your theme css in your editor with the snippet below. Concerning usability, this seems the best approach for a webmaster.

use Drupal\editor\Entity\Editor;

/**
 * Implements hook_ckeditor_css_alter().
 *
 * Injects our CSS sheets anytime CKEditor has loaded.
 *
 * @param array $css
 * @param Drupal\editor\Entity\Editor $editor
 */
function MY_MODULE_ckeditor_css_alter(array &$css, Editor $editor) {
  if (!$editor->hasAssociatedFilterFormat()) {
    return;
  }

  $known_formats = [
    'basic_html',
    'full_html',
  ];

  if (in_array($editor->getFilterFormat()->id(), $known_formats)) {
    $css[] = drupal_get_path('theme', 'MY_THEME_NAME') . '/css/main.css';
  }
}
  • The same can also be done by adding this to your theme.info.yml: ckeditor_stylesheets: - css/feldkirch800.css This need to be done in YAML formatting, comments at StackExchange can't be formatted :-( – Hudri Jan 8 '18 at 11:51
  • How can I modify the ckeditor config in Drupal 8. I want to disallow html tags. I tried using js. and adding this config.disallowedContent= 'div span'; but it doesn't work. How can I add this in hook_editor_js_settings_alter – paulcap1 May 4 '18 at 13:35
0

After many hours of researching I finally found full solution for this subject (I merged answer of rémy, information from this article, and of course ckeditor docs).

function MODULENAME_editor_js_settings_alter(array &$settings) {
    foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
        if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {

            //Reference just to code be shorter:
            $ck = &$settings['editor']['formats'][$text_format_id]['editorSettings'];

            //Check if index 'format_tags' exists, it means that format list is active
            if (isset($ck['format_tags'])) {

                //Add my custom format at the end of list of formats, it's possible to add as many formats as you wish. Of course it's possible to remove other formats or change theirs order, by overwrite all variable.

                $ck['format_tags'] .= ';MyCustomFormat';

                // And now is the most important thing to do - setting of added format:
                // Name it's name which will be shown at the list and it's possible to put there anything what you want. 
                // Element is html element - beware that this element should be allowed in back-office!
                // Attributes - it's an array where you can add class and other allowed attributes 
                $ck['format_MyCustomFormat'] = [
                    'name' => 'MyCustomFormat Name',
                    'element' => 'p',
                    'attributes' => [
                        'class' => 'MyCustomFormatClass',
                        'data' => 'SOME DATA',
                        'name' => 'SOME NAME'
                    ]
                ];
            }
        }
    }
}

Allowed attributes you can set here, separately for each format: http://localhost:8081/admin/config/content/formats/ (Click for configuration - list of attributes is at the bottom of page).

Good luck!

-3

After you install the ck-editor module, there is a file name ckeditor.styles.js in the root of the module folder.Copy that file and paste in your theme folder and edit that file per your need. For quick check you can edit the file directly there also but it is not recommended.

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.