=== Re{code} Front HTML Editor === Contributors: recodecommerce Tags: frontend editor, html editor, post editor, inline editor, content editor Requires at least: 5.9 Tested up to: 6.9 Stable tag: 3.6.9 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Frontend HTML editor for WordPress — edit post_content directly on the page and preview changes instantly without a page reload. == Description == **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: `
See also:
` = 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 == Installation == 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 == Frequently Asked Questions == = 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()`). == Screenshots == 1. Frontend toolbar in dark theme — preview mode 2. Editor open with format toolbar 3. Settings page with selector, theme and snippets options 4. Element Picker with breadcrumb ancestor navigation == Changelog == = 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 == Upgrade Notice == = 3.6.9 = CodeMirror replaced with plain textarea — lighter, faster, no external dependencies. All other features preserved. = 3.5.1 = Plugin Check fixes.