WordPress plugin — Lightweight frontend HTML editor.

Edit post_content directly on the frontend of your WordPress site — with a plain HTML editor, format toolbar, custom snippets, keyboard shortcuts, and live preview. No page reload. No backend switching. No external dependencies.

• Live on-page editing — click Edit, change HTML, hit Save → page updates in place
• Lightweight plain textarea — no external libraries, works in every browser
• Format toolbar — Bold, Italic, Strike, Highlight, Code, H2, H3, P, Blockquote, UL, OL, Link, Image
• Custom Snippets — save any HTML block as a toolbar button; use {|} to mark cursor position after insert
• Keyboard shortcuts — Ctrl+E (open/close), Ctrl+S (save), Escape (cancel), Ctrl+B/I/K
• Element Picker — click any DOM element to get its CSS selector with ancestor breadcrumb navigation
• Dark & Light themes — configurable in Settings
• Configurable selector — choose from theme presets or enter any custom CSS selector
• Secure — nonce, per-post edit_post capability check, wp_kses_post sanitization

# Via WP-CLI
wp plugin install recode-front-html-editor --activate

# Or manually
cd /path/to/wp-content/plugins
git clone https://github.com/recodecommerce/recode-front-html-editor.git

After activation you will be redirected to Settings → Front HTML Editor automatically.

Go to Settings → Front HTML Editor → Custom Snippets to add reusable HTML blocks. Each snippet gets its own button in the editor toolbar (highlighted in amber to distinguish from standard buttons).

Use {|} in the code to mark where the cursor should land after inserting:

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

recode-front-html-editor/
├── recode-front-html-editor.php   # Main plugin file
├── uninstall.php                  # Clean removal
├── readme.txt                     # WordPress.org readme
├── README.md                      # This file
├── index.php                      # Directory listing protection
├── assets/
│   ├── editor.js                  # Frontend JS (jQuery)
│   ├── editor.css                 # Frontend CSS
│   └── index.php
└── languages/
    └── index.php

# First time: check out the SVN repository
svn co https://plugins.svn.wordpress.org/recode-front-html-editor svn

# Copy src to trunk
xcopy /E /Y src\* svn\trunk\

# Create tag
xcopy /E /Y svn\trunk\* svn\tags\3.6.9\

# Commit
cd svn
svn add --force .
svn ci -m "Release 3.6.9"

• Added: Redirect to Settings page on plugin activation
• Added: Settings link in the Plugins list
• Fixed: Ctrl+S prevents browser "Save Page" dialog when editor textarea is focused

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

• Changed: CodeMirror loaded from WordPress core instead of CDN
• Added: Plain textarea toggle mode
• Added: Custom dark/light color themes via CSS

• Fixed: JS assets loaded via proper wp_enqueue functions (WordPress.org requirement)

• Fixed: Removed load_plugin_textdomain() — WP 4.6+ handles this automatically
• Fixed: Escaped output in field_editor_theme() to satisfy Plugin Check
• Updated: Tested up to WordPress 6.9

• Added: Custom Snippets — add any HTML block as a toolbar button via Settings
• Added: {|} cursor marker for snippet insertion point
• Added: Snippet Tips card in Settings sidebar

• Changed: Internal prefix renamed from rfie to rfhe everywhere
• Added: Footer block on Settings page (Plugin Page / GitHub / Contact)

• Security: ajax_get_content checks edit_post($post_id) per-post
• Fixed: Body padding-top scoped to body.rfhe-active only
• Added: uninstall.php, index.php security files

• Element Picker with ancestor breadcrumb navigation
• Format toolbar and keyboard shortcuts
• Dark/light theme support and configurable content selector

GPL v2 or later — https://www.gnu.org/licenses/gpl-2.0.html

© re{code}commerce