ckeditor-settings-toolbar.html.twig

Same filename in this branch
  1. 9 core/themes/stable9/templates/admin/ckeditor-settings-toolbar.html.twig
  2. 9 core/themes/stable/templates/admin/ckeditor-settings-toolbar.html.twig
Same filename in other branches
  1. 8.9.x core/themes/stable/templates/admin/ckeditor-settings-toolbar.html.twig
  2. 8.9.x core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig

Default theme implementation for the CKEditor settings toolbar.

Available variables:

  • multiple_buttons: A list of buttons that may be added multiple times.
  • disabled_buttons: A list of disabled buttons.
  • active_buttons: A list of active button rows.

See also

template_preprocess_ckeditor_settings_toolbar()

2 theme calls to ckeditor-settings-toolbar.html.twig
CKEditor::buildConfigurationForm in core/modules/ckeditor/src/Plugin/Editor/CKEditor.php
Form constructor.
CKEditorAdminTest::testExistingFormat in core/modules/ckeditor/tests/src/Functional/CKEditorAdminTest.php
Tests configuring a text editor for an existing text format.

File

core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for the CKEditor settings toolbar.
  5. *
  6. * Available variables:
  7. * - multiple_buttons: A list of buttons that may be added multiple times.
  8. * - disabled_buttons: A list of disabled buttons.
  9. * - active_buttons: A list of active button rows.
  10. *
  11. * @see template_preprocess_ckeditor_settings_toolbar()
  12. *
  13. * @ingroup themeable
  14. */
  15. #}
  16. {% apply spaceless %}
  17. <fieldset role="form" aria-labelledby="ckeditor-button-configuration ckeditor-button-description">
  18. <legend id="ckeditor-button-configuration">{{ 'Toolbar configuration'|t }}</legend>
  19. <div class="fieldset-wrapper">
  20. <div id="ckeditor-button-description" class="fieldset-description">
  21. {%- trans -%}
  22. Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Toolbar group names are provided to support screen reader users. Empty toolbar groups will be removed upon save.
  23. {%- endtrans -%}
  24. </div>
  25. <div class="ckeditor-toolbar-disabled clearfix">
  26. {# Available buttons. #}
  27. <div class="ckeditor-toolbar-available">
  28. <label for="ckeditor-available-buttons">{{ 'Available buttons'|t }}</label>
  29. <ul id="ckeditor-available-buttons" class="ckeditor-buttons clearfix" role="form" data-drupal-ckeditor-button-sorting="source">
  30. {% for disabled_button in disabled_buttons %}
  31. <li{{ disabled_button.attributes.addClass('ckeditor-button') }}>{{ disabled_button.value }}</li>
  32. {% endfor %}
  33. </ul>
  34. </div>
  35. {# Dividers. #}
  36. <div class="ckeditor-toolbar-dividers">
  37. <label for="ckeditor-multiple-buttons">{{ 'Button divider'|t }}</label>
  38. <ul id="ckeditor-multiple-buttons" class="ckeditor-multiple-buttons" role="form" data-drupal-ckeditor-button-sorting="dividers">
  39. {% for multiple_button in multiple_buttons %}
  40. <li{{ multiple_button.attributes.addClass('ckeditor-multiple-button') }}>{{ multiple_button.value }}</li>
  41. {% endfor %}
  42. </ul>
  43. </div>
  44. </div>
  45. {# Active toolbar. #}
  46. <div class="clearfix">
  47. <label id="ckeditor-active-toolbar">{{ 'Active toolbar'|t }}</label>
  48. </div>
  49. <div data-toolbar="active" role="form" class="ckeditor-toolbar ckeditor-toolbar-active clearfix">
  50. <ul class="ckeditor-active-toolbar-configuration" role="presentation" aria-label="{{ 'CKEditor toolbar and button configuration.'|t }}">
  51. {% for button_row in active_buttons %}
  52. <li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar">
  53. <ul class="ckeditor-toolbar-groups clearfix">
  54. {% for group_name, button_group in button_row %}
  55. <li class="ckeditor-toolbar-group" role="presentation" data-drupal-ckeditor-type="group" data-drupal-ckeditor-toolbar-group-name="{{ group_name }}" tabindex="0">
  56. <h3 class="ckeditor-toolbar-group-name" id="ckeditor-toolbar-group-aria-label-for-{{ button_group.group_name_class }}">{{ group_name }}</h3>
  57. <ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target" aria-labelledby="ckeditor-toolbar-group-aria-label-for-{{ button_group.group_name_class }}">
  58. {% for active_button in button_group.buttons %}
  59. <li{{ active_button.attributes.addClass(active_button.multiple ? 'ckeditor-multiple-button' : 'ckeditor-button') }}>{{ active_button.value }}</li>
  60. {% endfor %}
  61. </ul>
  62. </li>
  63. {% endfor %}
  64. </ul>
  65. </li>
  66. {% else %}
  67. <li>
  68. <ul class="ckeditor-buttons"></ul>
  69. </li>
  70. {% endfor %}
  71. </ul>
  72. </div>
  73. </div>
  74. </fieldset>
  75. {% endapply %}

Related topics


Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.