KDA Custom Editor Buttons

Description

KDA Custom Editor Buttons lets you define your own Classic Editor controls:

  • Wrap selection in any tag / CSS class
  • Insert HTML templates (e.g. definition lists)
  • Add a class to the current block (optionally with a tag)
  • Open a code snippet dialog (language, line numbers, edit in place)
  • Show each control on the toolbar, in Formats, or both
  • Limit buttons to selected post types (including custom types such as articles)

Front-end CSS still belongs to your theme if you want a custom look; the plugin ships a neutral snippet window, Copy, line numbers, and token colors. Prism.js and Highlight.js are bundled, so nothing is loaded from a CDN. The admin UI is English and can be translated through translate.wordpress.org.

Installation

  1. Upload the plugin folder to /wp-content/plugins/kda-custom-editor-buttons
  2. Activate the plugin through the Plugins menu
  3. Go to Settings KDA Editor Buttons
  4. Use Classic Editor when editing content

FAQ

Does it work with the block editor (Gutenberg)?

Version 1 targets Classic Editor / TinyMCE. A soft admin notice appears if the block editor is the default.

Will my theme styles apply?

Yes on the front end, if the theme defines the classes you insert. The plugin also ships a default snippet window and token colors (light/dark). You can replace those stylesheets with the kda_ceb_snippet_css and kda_ceb_highlight_css filters.

How do I style the editor preview?

Use the standard WordPress mce_css filter in your theme, or the plugin filters kda_ceb_snippet_css / kda_ceb_highlight_css. The plugin does not store custom CSS.

Can I use my own Prism.js / Highlight.js files?

Yes, with the PHP filter kda_ceb_asset_base in your theme (it works for built-in, Prism.js and Highlight.js). The earlier kda_ceb_prism_base and kda_ceb_highlightjs_base filters still work and run on top of the universal one. See the Documentation tab in the settings screen or docs/adding-a-button.en.md / .ru.md.

Is there a Russian translation?

English is the source language. Translations are managed on translate.wordpress.org. The full user guide is in docs/adding-a-button.en.md and docs/adding-a-button.ru.md, and is also rendered inside the plugin under Settings KDA Editor Buttons Documentation in the admin language.

Can I copy the plugin’s JS/CSS into my theme?

Yes. Open Settings KDA Editor Buttons Customization, set a folder path (must start and end with /, relative to the site root). Use the Copy select to pick Built-in, Prism.js, Highlight.js, or All libraries, then add one of these snippets to wp-config.php:

`php

// short form: path comes from the setting above
define( ‘KDA_CEB_CUSTOM_ASSETS’, true );

// detailed form: path is also defined in wp-config (the form’s path
// field becomes read-only when KDA_CEB_CUSTOM_PATH is set)
define( ‘KDA_CEB_CUSTOM_ASSETS’, true );
define( ‘KDA_CEB_CUSTOM_PATH’, ‘/wp-content/themes/your-child/kda-ceb/’ );
`

The tab shows a green “Custom assets: active” badge when the constant is on. The plugin creates the destination folder if it doesn’t exist, and surfaces a clear error when the web server can’t write there. The tab reminds you to re-copy after a plugin update.

Can I lock the highlight engine and theme from wp-config?

Yes. Define KDA_CEB_HIGHLIGHT_ENGINE (builtin | prism | highlightjs) and KDA_CEB_HIGHLIGHT_THEME (light | dark) in wp-config.php. When set, they override the settings screen and the corresponding fields become read-only. Use this together with KDA_CEB_CUSTOM_ASSETS to pin the entire asset configuration in code:

`php

define( ‘KDA_CEB_CUSTOM_ASSETS’, true );
define( ‘KDA_CEB_CUSTOM_PATH’, ‘/wp-content/themes/your-child/kda-ceb/’ );
define( ‘KDA_CEB_HIGHLIGHT_ENGINE’, ‘prism’ );
define( ‘KDA_CEB_HIGHLIGHT_THEME’, ‘dark’ );
`

Reviews

There are no reviews for this plugin.

Contributors & Developers

“KDA Custom Editor Buttons” is open source software. The following people have contributed to this plugin.

Contributors

“KDA Custom Editor Buttons” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “KDA Custom Editor Buttons” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.3

  • Bug fix: Show language checkbox now correctly toggles disabled state when changing the language in the code dialog (was stuck disabled after the first selection)

1.6.2

  • Enhancement: code selector is now configurable in Main tab settings
  • Enhancement: when using custom folder, config is injected directly into frontend.js (no inline script needed)
  • Enhancement: KDA_CEB_SCRIPT_VERSION can be set to ” or false to omit version parameter entirely
  • Bug fix: Show language checkbox is now disabled for auto-detect and plain text languages
  • Bug fix: fixed duplicate line numbers when re-editing a code block
  • Bug fix: replaced entire code block wrapper on edit (no stray paragraph added)
  • Bug fix: padding for code blocks without line numbers

1.6.1

  • Bug fix: prevented duplicate line numbers when re-editing a code block
  • Bug fix: replaced entire code block wrapper on edit (no stray paragraph added)
  • Enhancement: code block line numbers use new Variant 3 structure (kda-ceb-nums + kda-ceb-code)
  • Enhancement: added confirmation dialog before deleting a code block

1.5.9

  • Customization: new KDA_CEB_LIBRARY_MODE constant (bundled | individual) forces library loading mode. When set, the corresponding UI option becomes read-only and shows a lock message.
  • Frontend: fixed 404 error on frontend-config.js when KDA_CEB_LIBRARY_MODE is set to bundled — config is now embedded directly into library .min.js files instead of loading separately.
  • Customization: path-aware copy tracking. The plugin now remembers which folder each library was copied to, so the “Custom folder is empty” notice no longer fires when copies exist in a different (older) folder. If copies are found elsewhere, the notice lists the previous paths and explains how to recover.
  • New wp-config constants KDA_CEB_HIGHLIGHT_ENGINE (builtin | prism | highlightjs) and KDA_CEB_HIGHLIGHT_THEME (light | dark) override the admin settings. When defined, the corresponding fields in the settings screen become read-only.
  • Public-label example changed to English ('Copy' / 'Copied!') in the admin UI and both user guides.

1.5.8

  • Customization: the path can now be set in wp-config.php via the new KDA_CEB_CUSTOM_PATH constant. When it’s defined, the form’s path field is read-only and the wp-config snippet in the tab shows the value. Two wp-config examples are shown side by side (short form and detailed form).
  • “Copy” action: dropped the separate “Copy everything” button; the library select now includes an “All libraries” option.
  • Copy action: destination folder is created if missing, and a clear error is shown when it’s not writable (instead of a generic failure).

1.5.7

  • Settings screen split into four tabs: Main, Customization, Import / Export, Documentation.
  • Customization tab: custom-folder loading is enabled by the KDA_CEB_CUSTOM_ASSETS constant in wp-config.php; the tab shows a green “active” / gray “inactive” badge. Path is any subfolder under the site root, must start and end with a forward slash.
  • Documentation tab: removed the locale-switch hint and added a clickable table of contents with smooth scroll.
  • New universal filter kda_ceb_asset_base for built-in, Prism.js and Highlight.js; the previous per-library filters still work and run on top of it.
  • docs/ is shipped to the WordPress.org plugin so the Documentation tab works there too.

1.5.6

  • Internal: tabs and copy flow scaffolding (replaced by 1.5.7).
  • Remove the Editor preview CSS field — no arbitrary CSS is stored or served any more (use mce_css or the plugin stylesheet filters)
  • Remove the Prism.js / Highlight.js folder settings; libraries load from the plugin folder, with the kda_ceb_prism_base / kda_ceb_highlightjs_base filters for theme developers
  • Delete values saved by those fields in earlier versions on update
  • Update bundled Highlight.js to 11.12.0 and Prism.js to 1.30.0
  • Translations move to translate.wordpress.org (bundled .po/.mo files removed)

1.5.5

  • Bug fix: copy files to custom folder with correct paths (fixed duplicate folder nesting)
  • Bug fix: missing frontend-config.js in copied files

1.5.4

  • Escape live HTML/script tags inside snippets on output so mixed PHP+HTML cannot break the page
  • Strip leftover highlighter artifacts (tok-kw) before highlighting

1.5.3

  • Auto-detect language in the code dialog (mixed PHP/HTML included); language label is never shown for auto

1.5.2

  • Always remove plugin options on uninstall; remove optional Uninstall checkbox from settings

1.5.1

  • Load Prism.js / Highlight.js from a theme folder or URL (settings fields + filters)
  • Settings links to download pages and docs

1.5.0

  • Front-end highlight engine setting: Built-in, Prism.js, or Highlight.js (vendored, no CDN)
  • Code dialog beautify uses js-beautify for JS/JSON/CSS/HTML/XML; built-in fallback for PHP/SQL/Bash

1.4.6

  • Reliable XML/HTML beautify on OK (tokenizer; no external library)

1.4.5

  • Code dialog always beautifies on OK (checkbox removed; TinyMCE was not submitting it)

1.4.4

  • Remove truncated exit hint from the code dialog (hint stays in the visual editor only)

1.4.3

  • Complete Russian translation (admin, editor dialogs, exit hint, Copy)
  • Full EN/RU user guides

1.4.2

  • Visible exit hint in the visual editor and the code dialog

1.4.1

  • Reliable leave-block keys (Ctrl+Enter, Escape, empty last line); strip leftover BR

1.4.0

  • Neutral snippet window + kda_ceb_snippet_css
  • Only plugin <pre> blocks are enhanced
  • Quicktags (Text mode), editor token preview, dark palette, languages in settings

1.3.2

  • Unwrap leftover theme code-wrap chrome so a plugin-only update can restyle snippets

1.3.1

  • Snippet chrome: no empty language bar; Copy overlays the block unless Show language is on

1.3.0

  • Front-end highlight, Copy, and line numbers ship with the plugin (theme-independent)
  • Filter kda_ceb_highlight_css to use a theme stylesheet for token colors
  • Leave a code block in the editor: empty last line + Enter, or Ctrl+Enter

1.2.2

  • Code dialog: Show language is optional and off by default
  • Line numbers sit on each code line (no overlay mismatch)

1.2.1

  • Code dialog: Beautify code option (on by default) cleans extra spaces and indentation

1.2.0

  • New action: Code snippet dialog (language, line numbers, edit-in-place)
  • Demo: CODE wraps a short pre.dk-code line; BLOCK opens a large snippet window

1.1.0

  • Dashicons picker, live toolbar preview, fields shown by action
  • Toggle wrap / add class (second click removes the format)
  • Toolbar row 1–3 and grouped menu buttons
  • Optional delete data on uninstall
  • Docs: adding a button (EN/RU)

1.0.0

  • Initial release: configurable buttons, Formats, kses whitelist, import, export/copy