3 * CKEditor StylesCombo admin behavior.
6 (function($, Drupal, drupalSettings, _) {
8 * Ensures that the "stylescombo" button's metadata remains up-to-date.
10 * Triggers the CKEditorPluginSettingsChanged event whenever the "stylescombo"
11 * plugin settings change, to ensure that the corresponding feature metadata
12 * is immediately updated — i.e. ensure that HTML tags and classes entered
13 * here are known to be "required", which may affect filter settings.
15 * @type {Drupal~behavior}
17 * @prop {Drupal~behaviorAttach} attach
18 * Attaches admin behaviour to the "stylescombo" button.
20 Drupal.behaviors.ckeditorStylesComboSettings = {
22 const $context = $(context);
24 // React to changes in the list of user-defined styles: calculate the new
25 // stylesSet setting up to 2 times per second, and if it is different,
26 // fire the CKEditorPluginSettingsChanged event with the updated parts of
27 // the CKEditor configuration. (This will, in turn, cause the hidden
28 // CKEditor instance to be updated and a drupalEditorFeatureModified event
30 const $ckeditorActiveToolbar = $context
31 .find('.ckeditor-toolbar-configuration')
32 .find('.ckeditor-toolbar-active');
33 let previousStylesSet =
34 drupalSettings.ckeditor.hiddenCKEditorConfig.stylesSet;
37 .find('[name="editor[settings][plugins][stylescombo][styles]"]')
38 .on('blur.ckeditorStylesComboSettings', function() {
39 const styles = $.trim($(this).val());
40 const stylesSet = that._generateStylesSetSetting(styles);
41 if (!_.isEqual(previousStylesSet, stylesSet)) {
42 previousStylesSet = stylesSet;
43 $ckeditorActiveToolbar.trigger('CKEditorPluginSettingsChanged', [
51 * Builds the "stylesSet" configuration part of the CKEditor JS settings.
53 * @see \Drupal\ckeditor\Plugin\ckeditor\plugin\StylesCombo::generateStylesSetSetting()
55 * Note that this is a more forgiving implementation than the PHP version:
56 * the parsing works identically, but instead of failing on invalid styles,
57 * we just ignore those.
59 * @param {string} styles
60 * The "styles" setting.
63 * An array containing the "stylesSet" configuration.
65 _generateStylesSetSetting(styles) {
68 styles = styles.replace(/\r/g, '\n');
69 const lines = styles.split('\n');
70 for (let i = 0; i < lines.length; i++) {
71 const style = $.trim(lines[i]);
73 // Ignore empty lines in between non-empty lines.
74 if (style.length === 0) {
78 // Validate syntax: element[.class...]|label pattern expected.
80 style.match(/^ *[a-zA-Z0-9]+ *(\.[a-zA-Z0-9_-]+ *)*\| *.+ *$/) ===
83 // Instead of failing, we just ignore any invalid styles.
88 const parts = style.split('|');
89 const selector = parts[0];
90 const label = parts[1];
91 const classes = selector.split('.');
92 const element = classes.shift();
94 // Build the data structure CKEditor's stylescombo plugin expects.
95 // @see http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles
97 attributes: { class: classes.join(' ') },
108 * Provides the summary for the "stylescombo" plugin settings vertical tab.
110 * @type {Drupal~behavior}
112 * @prop {Drupal~behaviorAttach} attach
113 * Attaches summary behaviour to the plugin settings vertical tab.
115 Drupal.behaviors.ckeditorStylesComboSettingsSummary = {
117 $('[data-ckeditor-plugin-id="stylescombo"]').drupalSetSummary(context => {
118 const styles = $.trim(
120 '[data-drupal-selector="edit-editor-settings-plugins-stylescombo-styles"]',
123 if (styles.length === 0) {
124 return Drupal.t('No styles configured');
127 const count = $.trim(styles).split('\n').length;
128 return Drupal.t('@count styles configured', { '@count': count });
132 })(jQuery, Drupal, drupalSettings, _);