# Re{code} Front HTML Editor

> WordPress plugin — Lightweight frontend HTML editor.

![WordPress Plugin Version](https://recodecommerce.com/images/plugins/recode-front-html-editor/recode-front-html-editor-thumbnail.png)
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.

---

## Features

- **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

---

## Installation

```bash
# 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.

---

## 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 (highlighted in amber to distinguish from standard buttons).

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

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

---

## Repository Structure

```
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
```

---

## SVN / WordPress.org Deployment

```bash
# 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"
```

---

## Security

| Check                | Implementation                                         |
| -------------------- | ------------------------------------------------------ |
| AJAX nonce           | `check_ajax_referer('rfhe_nonce', 'nonce')`            |
| Per-post capability  | `current_user_can('edit_post', $post_id)`              |
| Content sanitization | `wp_kses_post()`                                       |
| Output escaping      | `esc_html()`, `esc_attr()`, `esc_url()`                |
| Snippet sanitization | label: `sanitize_text_field()`, code: `wp_kses_post()` |
| Visibility           | Toolbar only rendered for users with edit rights       |

---

## Changelog

### 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

### 3.6.8

- **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

### 3.6.0

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

### 3.5.2

- **Fixed:** JS assets loaded via proper `wp_enqueue` functions (WordPress.org requirement)

### 3.5.1

- **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

### 3.5.0

- **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

### 3.4.3

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

### 3.4.2

- **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

### 3.4.0

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

---

## License

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

© [re{code}commerce](https://recodecommerce.com/wordpress-plugins/recode-front-html-editor)