This plugin adds a popup menu for block-level elements, allowing users to quickly modify, move, align, or change the tag of selected blocks. The popup appears when a user clicks on a block element, providing contextual options for that specific element type.
If you are using a fat build of the editor, then the plugin is already included in it. If you are using the slim build, then you need to enable it manually:
CopyJodit.make('#editor', { extraPlugins: ['tune-block'] });
IDictionary<Array<IControlType | string>>
This option allows you to specify which buttons should appear in the popup menu for each HTML tag. You can use predefined buttons, buttons from other plugins, or create custom buttons.
Default configuration:
Copy{ p: ['tune.up', 'tune.remove', 'tune.down'], table: ['tune.up', 'tune.remove', 'tune.down'], img: ['tune.up', 'tune.remove', 'tune.down'], blockquote: ['tune.up', 'tune.remove', 'tune.down'], div: ['tune.up', 'tune.remove', 'tune.down'], pre: ['tune.editPre', 'tune.up', 'tune.remove', 'tune.down'], h1: ['tune.h1', 'tune.h2', 'tune.h3', '\n', 'tune.h4', 'tune.h5', 'tune.h6', '\n', 'tune.up', 'tune.remove', 'tune.down'], h2: ['tune.h1', 'tune.h2', 'tune.h3', '\n', 'tune.h4', 'tune.h5', 'tune.h6', '\n', 'tune.up', 'tune.remove', 'tune.down'], h3: ['tune.h1', 'tune.h2', 'tune.h3', '\n', 'tune.h4', 'tune.h5', 'tune.h6', '\n', 'tune.up', 'tune.remove', 'tune.down'], h4: ['tune.h1', 'tune.h2', 'tune.h3', '\n', 'tune.h4', 'tune.h5', 'tune.h6', '\n', 'tune.up', 'tune.remove', 'tune.down'], h5: ['tune.h1', 'tune.h2', 'tune.h3', '\n', 'tune.h4', 'tune.h5', 'tune.h6', '\n', 'tune.up', 'tune.remove', 'tune.down'], h6: ['tune.h1', 'tune.h2', 'tune.h3', '\n', 'tune.h4', 'tune.h5', 'tune.h6', '\n', 'tune.up', 'tune.remove', 'tune.down'] }
The plugin provides several built-in buttons that can be used in the popup menu:
tune.up
- Move block uptune.remove
- Delete blocktune.down
- Move block downtune.h1
- Convert block to Heading 1tune.h2
- Convert block to Heading 2tune.h3
- Convert block to Heading 3tune.h4
- Convert block to Heading 4tune.h5
- Convert block to Heading 5tune.h6
- Convert block to Heading 6tune.editPre
- Edit pre block (works with the paste-code plugin)CopyJodit.make('#editor', { tuneBlock: { popup: { p: Jodit.atom(['align', 'tune.up', 'tune.remove', 'tune.down']) } } });
You can include buttons from other plugins in the tune block popup:
CopyJodit.make('#editor', { tuneBlock: { popup: { table: Jodit.atom(['brush', 'image', 'align']) } } });
You can add your own custom buttons to the popup menu:
CopyJodit.make('#editor', { tuneBlock: { popup: { table: [ { icon: 'brush', name: 'Brush table in red', exec(editor, tableElm) { tableElm.querySelectorAll('td').forEach((td) => { td.style.backgroundColor = 'red'; }); editor.e.fire('afterExecTune.tune'); // close the tuner } } ] } } });
To disable the tune block popup for a specific tag, set its value to null:
CopyJodit.make('#editor', { tuneBlock: { popup: { h3: null // No tune-block will be shown for H3 tag } } });
To disable the plugin for all tags:
CopyJodit.make('#editor', { tuneBlock: { popup: Jodit.atom({}) // We erase all default values } });
Alternatively, you can disable the plugin using the disablePlugins
option:
Copyimport JoditEditor from 'jodit-react'; <JoditEditor config={{ disablePlugins: ['tune-block'] }} />;
You can combine default buttons with your custom buttons:
CopyJodit.make('#editor', { tuneBlock: { popup: { p: [ 'tune.up', { icon: 'pencil', name: 'Add Comment', exec(editor, element) { const comment = prompt('Enter your comment:'); if (comment) { element.dataset.comment = comment; } editor.e.fire('afterExecTune.tune'); } }, 'tune.down' ] } } });
You can use the string '\n'
to create line breaks in the popup menu:
CopyJodit.make('#editor', { tuneBlock: { popup: { p: [ 'tune.h1', 'tune.h2', 'tune.h3', '\n', 'align', '\n', 'tune.up', 'tune.remove', 'tune.down' ] } } });
This plugin enhances the editing experience by providing quick access to common block-level operations without requiring users to navigate through menus or use keyboard shortcuts.