Adds buttons to Kanka’s Summernote editor toolbar that can be used to insert HTML elements or classes required by various Marketplace themes with a simple click. You will no longer need to memorize or look up the code, nor to type it all in or copy-paste it into the editor. Just select the plugin (and variant, if applicable) to insert the appropriate code, and customize it further if needed. Most features are compatible with both the visual and code editors.
Setup
To appear in the dropdown options, a theme must be both:
- officially supported by the theme’s creator and this userscript’s maintainer;
- installed and enabled on the campaign.
Features and usage notes
General
- Separate dropdown buttons are added to the Summernote toolbar for HTML elements (puzzle piece icon) and CSS classes (HTML5 icon).
- Operations in the visual editor can be cancelled with Ctrl+Z. This is NOT the case in code view!
Element injector
- This dropdown contains one entry per plugin, sorted by name. For plugins that suggest various element structures or classes, additional presets may be offered, but in most cases optional classes can be toggled on and off via the class injector instead to customize their behaviour.
- Elements are inserted at the cursor position and can be customized further using the class injector or manual editing.
- If you have that theme installed, the "Extraordinary Tooltips Helper" option opens a modal where you can quickly choose settings and get the right markup for each use case. A visual example is provided in real time.
|
 |
Class injector
- This tool can be used both to add classes to elements, or remove them if already present.
- Classes are sorted by plugin name, each name linking to its Marketplace page in a new tab for ease of reference.
- Each class shows a tooltip on hover to remind you what it does exactly.
- Some out-of-the-box Bootstrap and Kanka classes are included by default. Feel free to suggest others that you like to use.
- You can also set up your own classes to add to the list in your campaign styles (instructions below).
- In the visual editor, changes are applied to the nearest parent node relative to cursor position (e.g. while the cursor is inside a paragraph, the class will toggle on the `p` tag, but if the text at that position is also in a `span`, that span will be targeted instead). A status message will briefly appear to confirm that a class was applied or removed and indicate the type of element affected.
- In the code editor, the affected HTML tag (opening tag only) must be selected before picking from the list, and will remain selected after applying changes so you can quickly see the changes and toggle additional classes.
|
 |
Caveats
- Since operations in code view cannot be cancelled, please exercise caution while using this tool.
- For the class injector, some elements may not be correctly targetable in the visual editor. For example, applying a table class while the cursor is inside a table cell will not intelligently seek the parent table, and there is no way to place the cursor just inside the table tag and ignore table sections, rows, etc. Such elements should be selected in the code editor.
Adding custom classes to the list
To add your own classes to the plugin’s class injector on a per-campaign basis, simply add the following rule to any style in your campaign’s Theming page, replacing "my-custom-class..." with a space-separated list of classes:
:root {
--summernote-insert-custom-classes: "my-custom-class1 my-custom-class2";
}
When the plugin sees that --summernote-insert-custom-classes exists, it will add a "Campaign classes" section to the dropdown, immediately after Bootstrap classes and before Marketplace theme classes, so you can add and remove each of the specified classes.
Theme makers looking to add your plugins to this tool:
For your theme to be considered for addition, it will need:
- to rely on adding HTML elements to the entry or applying classes to existing elements (or both);
- to contain a CSS custom property on the root element, which will act as a flag to let this script know that the plugin is enabled on a campaign. This flag will look like
:root { --summernote-insert-<plugin-name>: enabled; }.
Please contact me (@Salvatos) via Kanka’s Discord (#marketplace channel) to get your theme added to the script. While not mandatory, I would also appreciate if your plugin’s description mentioned and linked to this script. Here is an example you can use, though feel free to make it your own:
<p><i><b>This plugin supports the <a href="https://greasyfork.org/en/scripts/430213-kanka-marketplace-toolbar-for-summernote" target="_blank">Marketplace Toolbar for Summernote</a>! You can install this user script with a browser extension to insert the necessary HTML in your entities without memorizing or referencing this page.</i></p>
Also, let me know if you make substantial changes to your approved plugin that would require code or classes be added or removed from this script’s options!
If my scripts are making your life easier, feel free to tip me via Ko-fi (no account needed):
