Kanka Marketplace Toolbar for Summernote

Adds buttons to Summernote to insert HTML elements or classes required by Marketplace themes.

2021-12-05 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

بۇ قوليازمىنى قاچىلاش ؟

سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.

ئاپتورى

Salvatos

باھا نومۇرى

0 0 0

نەشرى

قۇرۇلغان ۋاقتى

2021-08-01

يېڭىلانغان ۋاقتى

2021-12-05

Size

16.9 KB

ئىجازەتنامىسى

يوق

قوللايدىغىنى

kanka.io

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.

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.

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, 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.

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:

This plugin supports the <a href="https://greatest.deepsurf.us/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.

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!