Remove dropdown on certain buttons

[trymeouteh]

For the following buttons, it has a dropdown option to select more options. Is there a way to remove or change these dropdown options?

• OL
• UL
• Paste
• Align
• Font
• Font Size
• Paragraph
• Line Spacing
• Class Span

[mrothauer]

I wanted to ged rid of the options in UL completely. The only solution I found was reducing the options to the default option

Jodit.make('#editor', {
  controls: {
      ul: {
          list: Jodit.atom({
              default: 'Default',
          })
      },
  }, 
 buttons: ['bold', 'italic', 'ul'],
});

Details
https://github.com/foodcoopshop/foodcoopshop/blob/231c47b2f3d8d017b8010b0407514c64a76a7d8b/plugins/Admin/webroot/js/editor.js#L20

[trymeouteh]

I am unable to find an way to modify the following dropdown options...

• ordered lists (cannot change options)
• classSpan (add class names with dash in them "text-center", "text-left")
• align (change display name/icon, change options)
• find

However I was able to figure out how to edit the other dropdown options using the code you provided.

[kahunacoder]

I used css to remove the redundant arrows I didn't want like so. Notice the * match any ^ match beginning and the i at the end to ignore case.

<style>
	[aria-label*="Align" i] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label^="Font"] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label*="Insert" i] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label="Line height"] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label*="split" i] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label="Background"] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label^="Fill"] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
	[aria-label^="Paste"] .jodit-toolbar-button__trigger{
		display: none  !important;
	}
</style>

You can do this in the controls to change options

Jodit.make('#editor', {
  controls: {
		paragraph: {
			list: Jodit.atom({
					p: 'Normal',
					h2: 'Heading 2',
					h3: 'Heading 3',
			}),
  }, 

[trymeouteh]

That CSS does help out, it does work as a solution but I hope a setting gets added into Jodit for each dropdown button.

I modified the CSS and made my own version

/* Use these attributes to unhide the dropdown options on buttons that support dropdown options */

/* Unordered List */
.jodit-container:not([jodit-button-dropdown*="unorderedlist"]) [aria-label="Insert Unordered List" i] .jodit-toolbar-button__trigger {
    display: none;
}

/* Ordered List */
.jodit-container:not([jodit-button-dropdown*="orderedlist"]) [aria-label="Insert Ordered List" i] .jodit-toolbar-button__trigger {
    display: none;
}

/* Fonts */
.jodit-container:not([jodit-button-dropdown*="fontfamily"]) [aria-label="Font family"] .jodit-toolbar-button__trigger {
    display: none;
}

/* Font Size */
.jodit-container:not([jodit-button-dropdown*="fontsize"]) [aria-label="Font size"] .jodit-toolbar-button__trigger {
    display: none;
}

/* Format (Heading Size) */
.jodit-container:not([jodit-button-dropdown*="format"]) [aria-label="Insert format block" i] .jodit-toolbar-button__trigger {
    display: none;
}

/* Line Height */
.jodit-container:not([jodit-button-dropdown*="lineheight"]) [aria-label="Line height" i] .jodit-toolbar-button__trigger {
    display: none;
}

/* Insert className */
.jodit-container:not([jodit-button-dropdown*="insertclassname"]) [aria-label="Insert className" i] .jodit-toolbar-button__trigger {
    display: none;
}

/* Paste */
.jodit-container:not([jodit-button-dropdown*="paste"]) [aria-label="Paste from clipboard"] .jodit-toolbar-button__trigger {
    display: none;
}

/* Align */
.jodit-container:not([jodit-button-dropdown*="align"]) [aria-label="Align"] .jodit-toolbar-button__trigger {
    display: none;
}

/* Color */
.jodit-container:not([jodit-button-dropdown*="color"]) [aria-label="Fill color or set the text color"] .jodit-toolbar-button__trigger {
    display: none;
}

/* Find/Replace */
.jodit-container:not([jodit-button-dropdown*="find"]) [aria-label="Find"] .jodit-toolbar-button__trigger {
    display: none;
}

Here is a demo using the CSS above on how to have the dropdown arrows on the buttons disabled by default unless you add an attribute with certain values to enable the dropdown buttons.

<textarea id="myEditorA"></textarea>
<textarea id="myEditorB"></textarea>

<script>
    Jodit.make('#myEditorA');

    Jodit.make('#myEditorB');
    document.querySelector('#myEditorB').previousElementSibling.setAttribute('jodit-button-dropdown', 'unorderedlist orderedlist fontfamily fontsize format lineheight insertclassname paste align color find');
</script>

[xdan]

Two ways depending on what you want. To change or trim the options in a dropdown, override that control's list with Jodit.atom, e.g. controls: { ul: { list: Jodit.atom({ default: 'Default' }) } } — Jodit.atom stops it merging back into the defaults. To drop the little arrow entirely and keep just the main action, hide the trigger in CSS: [aria-label*="Align" i] .jodit-toolbar-button__trigger { display: none }.

(Both approaches are already in the thread — credit to the folks above.)