Title: Re{code} Front HTML Editor
Author: re{code}commerce
Published: <strong>18 сакавіка, 2026</strong>
Last modified: 18 сакавіка, 2026

---

Пошук плагінаў

![](https://s.w.org/plugins/geopattern-icon/recode-front-html-editor.svg)

# Re{code} Front HTML Editor

 Аўтар: [re{code}commerce](https://profiles.wordpress.org/recodecommerce/)

[Спампаваць](https://downloads.wordpress.org/plugin/recode-front-html-editor.3.6.9.zip)

 * [Падрабязнасці](https://bel.wordpress.org/plugins/recode-front-html-editor/#description)
 * [Водгукі](https://bel.wordpress.org/plugins/recode-front-html-editor/#reviews)
 *  [Ўсталёўка](https://bel.wordpress.org/plugins/recode-front-html-editor/#installation)
 * [Распрацоўка](https://bel.wordpress.org/plugins/recode-front-html-editor/#developers)

 [Падтрымка](https://wordpress.org/support/plugin/recode-front-html-editor/)

## Апісанне

**Re{code} Front HTML Editor** adds a fixed toolbar to the frontend of your WordPress
site (visible only to users who can edit the current post). Click **Edit**, modify
the HTML directly in the editor, then hit **Save & Preview** — the page updates 
in place with no reload required.

#### Features

 * **Live on-page editing** — no page reload, no switching to the backend
 * **Lightweight plain textarea editor** — no external dependencies, works everywhere
 * **Format toolbar** — Bold, Italic, Strikethrough, Highlight, Inline code, H2,
   H3, Paragraph, Blockquote, UL, OL, Insert link, Insert image
 * **Keyboard shortcuts** — Ctrl+E (open/close), Ctrl+S (save), Escape (cancel),
   Ctrl+B/I/K
 * **Custom Snippets** — save any HTML block as a toolbar button; use {|} to mark
   where the cursor lands after inserting
 * **Element Picker** — click any element on the page to discover its CSS selector,
   navigate ancestor breadcrumbs, and copy it to Settings
 * **Dark and Light themes** configurable in Settings  Front HTML Editor
 * **Configurable content selector** — choose from popular theme defaults or enter
   any custom CSS selector
 * **Secure** — nonce-verified AJAX, `edit_post` capability check per-post, content
   sanitized with `wp_kses_post`
 * Works with Twenty* themes, Astra, GeneratePress, Kadence, Divi, OceanWP, Flatsome,
   and most other themes

#### How It Works

 1. Visit any post or page on the frontend while logged in as an editor or administrator
 2. The **✏️ HTML Editor** toolbar appears at the top of the page
 3. Click **Edit** — the plugin loads the raw `post_content` from the database into
    the editor
 4. Edit the HTML, use the format toolbar or keyboard shortcuts
 5. Click **💾 Save & Preview** — your changes are saved and the page content updates
    instantly
 6. Use **🎯 Pick element** if the editor can’t find the content area — click any block
    to get its CSS selector

#### Custom Snippets

Go to **Settings  Front HTML Editor  Custom Snippets** to add reusable HTML blocks.

Each snippet gets its own button in the editor toolbar. Use `{|}` in the HTML code
to control where the cursor appears after the snippet is inserted.

Example:

    ```
    <div class="see-also-block"><div class="see-also-title">See also:</div><ul><li><a href="{|}"></a></li></ul></div>
    ```

#### Security

 * AJAX requests are nonce-verified
 * Every action checks `current_user_can('edit_post', $post_id)` for the specific
   post
 * Saved content passes through `wp_kses_post`
 * The toolbar is never rendered for unauthenticated users or users without edit
   rights for the current post

## Ўсталёўка

 1. Upload the `recode-front-html-editor` folder to the `/wp-content/plugins/` directory
 2. Activate the plugin through the **Plugins** menu in WordPress — you will be redirected
    to Settings automatically
 3. Configure the content selector and editor theme
 4. Visit any post or page on the frontend — the toolbar will appear for users with
    edit rights

## Часта задаваныя пытанні

### The editor doesn’t find the content area on my theme. What do I do?

Use the **🎯 Pick element** button in the toolbar, click on your content area, then
copy the selector to **Settings  Front HTML Editor  Custom selector**.

### Which user roles can see the editor toolbar?

Any user who has the `edit_post` capability for the currently viewed post. This 
typically includes Editors and Administrators, and Authors for their own posts.

### Can I use this with the block editor (Gutenberg)?

Yes. The plugin edits the raw `post_content` stored in the database. For classic
posts this is regular HTML. For Gutenberg posts this is HTML with block comments—
you can edit it, but be careful not to break block markup. For block-based themes,
use `.wp-block-post-content` as the selector.

### Does this work on archive pages, home pages, or WooCommerce pages?

No — the editor only activates on singular posts and pages (`is_singular()`).

## Водгукі

На гэты плагін няма водгукаў.

## Удзельнікі і распрацоўшчыкі

“Re{code} Front HTML Editor” is open source software. The following people have 
contributed to this plugin.

Удзельнікі

 *   [ re{code}commerce ](https://profiles.wordpress.org/recodecommerce/)

[Перакласці “Re{code} Front HTML Editor” на вашу мову.](https://translate.wordpress.org/projects/wp-plugins/recode-front-html-editor)

### Зацікаўлены ў распрацоўцы?

[Праглядзіце код](https://plugins.trac.wordpress.org/browser/recode-front-html-editor/),
праверце [SVN рэпазітарый](https://plugins.svn.wordpress.org/recode-front-html-editor/),
або падпішыцеся на [журнал распрацоўкі](https://plugins.trac.wordpress.org/log/recode-front-html-editor/)
па [RSS](https://plugins.trac.wordpress.org/log/recode-front-html-editor/?limit=100&mode=stop_on_copy&format=rss).

## Журнал змяненняў

#### 3.6.9

 * Added: redirect to Settings page on plugin activation
 * Added: Settings link in the Plugins list
 * Fixed: Ctrl+S now prevents browser “Save Page” dialog when editor is focused

#### 3.6.8

 * Changed: CodeMirror replaced with a plain textarea — no external dependencies,
   lighter and faster
 * Removed: Code/Plain toggle button — single editor mode only
 * Improved: snippet cursor positioning now fully reliable

#### 3.6.0

 * Changed: CodeMirror loaded from WordPress core instead of CDN — no remote files
 * Added: Plain textarea toggle mode
 * Added: Custom dark/light color themes

#### 3.5.2

 * Fixed: CodeMirror and snippet JS assets now loaded via proper wp_enqueue functions(
   WordPress.org requirement)

#### 3.5.1

 * Fixed: removed load_plugin_textdomain() — WordPress 4.6+ loads translations automatically
 * Fixed: escaped output in field_editor_theme() to satisfy Plugin Check requirements
 * Updated: Tested up to WordPress 6.9

#### 3.5.0

 * Added: Custom Snippets — add any HTML block as a toolbar button via Settings
 * Added: {|} cursor marker — controls where the cursor lands after snippet insert
 * Added: Snippet Tips card in Settings sidebar with usage example
 * Added: Distinct visual style for snippet buttons in the editor toolbar (amber
   color)
 * Changed: Format toolbar HTML now built dynamically to support variable number
   of snippet buttons

#### 3.4.3

 * Changed: internal prefix renamed from `rfie` to `rfhe` (option key, nonce, AJAX
   actions, CSS/JS identifiers, admin page slug)
 * Changed: plugin description updated — more accurate wording
 * Changed: Plugin URI and Author URI now point to the dedicated plugin page on 
   recodecommerce.com
 * Added: footer block on Settings page (Plugin Page / GitHub / Contact links)
 * Added: `PLUGIN_URL` and `GITHUB_URL` constants for easy maintenance

#### 3.4.2

 * Security: `ajax_get_content` now verifies `edit_post($post_id)` per-post
 * Fixed: `body { padding-top }` no longer applies globally — only when toolbar 
   is active
 * Fixed: Pick button colors now respect dark/light theme setting
 * Improved: All output properly escaped with `esc_html_e()`, `esc_attr_e()`, `esc_url()`
 * Added: `uninstall.php` for clean removal

#### 3.4.0

 * Added Element Picker with ancestor breadcrumb navigation
 * Added format toolbar (Bold, Italic, Strikethrough, Highlight, code, headings,
   lists, link, image)
 * Added keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+S, Escape)
 * Added dark/light theme support
 * Added configurable content selector in Settings

#### 3.0.0

 * Initial public release

## Мета

 *  Версія **3.6.9**
 *  Апошняе абнаўленне **2 тыдні таму**
 *  Актыўных установак **Менш за 10**
 *  Версія WordPress ** 5.9 або вышэй **
 *  Правераны да версіі **6.9.4**
 *  Версія PHP ** 7.4 або вышэй **
 *  Мова
 * [English (US)](https://wordpress.org/plugins/recode-front-html-editor/)
 * Тэгі
 * [Content editor](https://bel.wordpress.org/plugins/tags/content-editor/)[frontend editor](https://bel.wordpress.org/plugins/tags/frontend-editor/)
   [html-editor](https://bel.wordpress.org/plugins/tags/html-editor/)[inline editor](https://bel.wordpress.org/plugins/tags/inline-editor/)
   [post editor](https://bel.wordpress.org/plugins/tags/post-editor/)
 *  [Пашыраны прагляд](https://bel.wordpress.org/plugins/recode-front-html-editor/advanced/)

## Ацэнкі

Пакуль яшчэ няма водгукаў.

[Add my review](https://wordpress.org/support/plugin/recode-front-html-editor/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/recode-front-html-editor/reviews/)

## Удзельнікі

 *   [ re{code}commerce ](https://profiles.wordpress.org/recodecommerce/)

## Падтрымка

Ёсць што сказаць? Патрэбна дапамога?

 [Перайсці да форуму падтрымкі](https://wordpress.org/support/plugin/recode-front-html-editor/)