How to disable H1 heading in CKeditor?

Question

I'd like to give some authors a better SEO experience. How can I disable Heading 1 in builtin CKeditor in Drupal 8?

Answer 1

1) Take a look at the editors you're using on your site at /admin/config/content/formats

2) For each editor, you'll need to update the allowed tags. Let's edit the FULL HTML format for this example, so click on the "Configure" button for "Full HTML" (/admin/config/content/formats/manage/full_html).

3) Under "Enabled Filters", click the checkbox labelled "Limit allowed HTML tags and correct faulty HTML". A filter settings form will appear below. Remove the h1 tag from the field labelled "Allowed HTML Tags".

4) Save

Test that it's removed from the drop down:

Answer 2

/**
 * Implements hook_editor_js_settings_alter().
 */
function YOURMODULE_editor_js_settings_alter(array &$settings) {

    // Set default CKEditor format tags
    $settings['editor']['formats']['html']['editorSettings']['format_tags'] = "p;h2;h3;h4;h5;h6";
}

['html'] may need to be replaced by the machine name of the text format you would like to change.

Answer 3

You can create a custom Plugin for that:

<?php

namespace Drupal\custom_module\Plugin\CKEditorPlugin;

use Drupal\editor\Entity\Editor;
use Drupal\ckeditor\Plugin\CKEditorPlugin\Internal as InternalCore;


/**
 * Defines the "internal" plugin (i.e. core plugins part of our CKEditor build).
 *
 * @CKEditorPlugin(
 *   id = "internal",
 *   label = @Translation("CKEditor core")
 * )
 */
class Internal extends InternalCore {

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    $config = parent::getConfig($editor);
    $config['format_tags'] = 'p;h2;h3;h4;h5;h6;pre';
    return $config;
  }

}

And

/**
 * Modify the list of available CKEditor plugins.
 *
 * This hook may be used to modify plugin properties after they have been
 * specified by other modules.
 *
 * @param $plugins
 *   An array of all the existing plugin definitions, passed by reference.
 *
 * @see CKEditorPluginManager
 */
function custom_module_ckeditor_plugin_info_alter(array &$plugins) {
  $plugins['internal']['class'] = 'Drupal\custom_module\Plugin\CKEditorPlugin\Internal';
}

Answer 4

From http://www.drupalthemer.org/blog/drupal-8-how-to-ckeditor-custom-styles:

Disable Unwanted Buttons

Visit /admin/config/content/formats/manage/text format name.

Under 'Toolbar Configuration', to disable a toolbar button, drag it from its place on the 'Active toolbar' up to 'Available buttons'. Repeat this process for each button you want to remove. To re-enable abutton just do the reverse and drag it back to the 'Active toolbar'. *Buttons must be assigned to a 'group' (the areas denoted by the faint, dotted borders).