內容簡介
Re{code} Front HTML Editor 是一款讓使用者能在 WordPress 前端直接編輯 HTML 的外掛，提供即時編輯功能，無需重新載入頁面，提升內容編輯的效率與便利性。
【主要功能】
• 即時頁面編輯，無需重新載入
• 輕量級純文字編輯器，無外部依賴
• 格式工具列，支援多種文本格式
• 鍵盤快捷鍵，快速操作編輯
• 自訂片段，儲存可重用的 HTML 區塊
• 安全性高，經過 nonce 驗證的 AJAX
外掛標籤
開發者團隊
原文外掛簡介
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
Visit any post or page on the frontend while logged in as an editor or administrator
The ✏️ HTML Editor toolbar appears at the top of the page
Click Edit — the plugin loads the raw post_content from the database into the editor
Edit the HTML, use the format toolbar or keyboard shortcuts
Click 💾 Save & Preview — your changes are saved and the page content updates instantly
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:
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
