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:
- officially supported by the theme’s creator and this userscript’s maintainer;
- installed and enabled on the campaign.
(For the initial release, a few themes are enabled by default whether or not you have installed them. This will be cleaned up as plugin makers start to officially support this script.)
Features and usage notes
General
- A separate dropdown button is added to the Summernote toolbar for HTML elements and CSS classes.
- 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 to customize their behaviour.
- Elements are inserted at the cursor position and can be customized further using the class injector or manual editing.
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.
- In the visual editor, a status message will briefly appear to confirm that a class was applied or removed.
- 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 as it is still being tested.
- 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. Such elements should be targeted in the code editor.
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:
<p><i><b>This plugin supports the </b><a href="https://greasyfork.org/en/scripts/430213-kanka-marketplace-toolbar-for-summernote" target="_blank">Marketplace Toolbar for Summernote</a><b>!</b> 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>
