{"id":286158,"date":"2026-03-18T03:57:18","date_gmt":"2026-03-18T03:57:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/recode-front-html-editor\/"},"modified":"2026-03-18T03:56:46","modified_gmt":"2026-03-18T03:56:46","slug":"recode-front-html-editor","status":"publish","type":"plugin","link":"https:\/\/tah.wordpress.org\/plugins\/recode-front-html-editor\/","author":23444801,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"3.6.9","stable_tag":"3.6.9","tested":"6.9.4","requires":"5.9","requires_php":"7.4","requires_plugins":null,"header_name":"Re{code} Front HTML Editor","header_author":"re{code}commerce","header_description":"Frontend HTML editor for WordPress \u2014 edit post_content directly on the page and preview changes instantly without a page reload.","assets_banners_color":"","last_updated":"2026-03-18 03:56:46","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/recodecommerce.com\/wordpress-plugins\/recode-front-html-editor","header_author_uri":"https:\/\/recodecommerce.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":161,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"3.6.9":{"tag":"3.6.9","author":"recodecommerce","date":"2026-03-18 03:56:46"}},"upgrade_notice":{"3.6.9":"<p>CodeMirror replaced with plain textarea \u2014 lighter, faster, no external dependencies. All other features preserved.<\/p>","3.5.1":"<p>Plugin Check fixes.<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["3.6.9"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Frontend toolbar in dark theme \u2014 preview mode","2":"Editor open with format toolbar","3":"Settings page with selector, theme and snippets options","4":"Element Picker with breadcrumb ancestor navigation"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[20802,4206,3075,29339,18863],"plugin_category":[],"plugin_contributors":[255121],"plugin_business_model":[],"class_list":["post-286158","plugin","type-plugin","status-publish","hentry","plugin_tags-content-editor","plugin_tags-frontend-editor","plugin_tags-html-editor","plugin_tags-inline-editor","plugin_tags-post-editor","plugin_contributors-recodecommerce","plugin_committers-recodecommerce"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/recode-front-html-editor.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>Re{code} Front HTML Editor<\/strong> adds a fixed toolbar to the frontend of your WordPress site (visible only to users who can edit the current post). Click <strong>Edit<\/strong>, modify the HTML directly in the editor, then hit <strong>Save &amp; Preview<\/strong> \u2014 the page updates in place with no reload required.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li><strong>Live on-page editing<\/strong> \u2014 no page reload, no switching to the backend<\/li>\n<li><strong>Lightweight plain textarea editor<\/strong> \u2014 no external dependencies, works everywhere<\/li>\n<li><strong>Format toolbar<\/strong> \u2014 Bold, Italic, Strikethrough, Highlight, Inline code, H2, H3, Paragraph, Blockquote, UL, OL, Insert link, Insert image<\/li>\n<li><strong>Keyboard shortcuts<\/strong> \u2014 Ctrl+E (open\/close), Ctrl+S (save), Escape (cancel), Ctrl+B\/I\/K<\/li>\n<li><strong>Custom Snippets<\/strong> \u2014 save any HTML block as a toolbar button; use {|} to mark where the cursor lands after inserting<\/li>\n<li><strong>Element Picker<\/strong> \u2014 click any element on the page to discover its CSS selector, navigate ancestor breadcrumbs, and copy it to Settings<\/li>\n<li><strong>Dark and Light themes<\/strong> configurable in Settings \u2192 Front HTML Editor<\/li>\n<li><strong>Configurable content selector<\/strong> \u2014 choose from popular theme defaults or enter any custom CSS selector<\/li>\n<li><strong>Secure<\/strong> \u2014 nonce-verified AJAX, <code>edit_post<\/code> capability check per-post, content sanitized with <code>wp_kses_post<\/code><\/li>\n<li>Works with Twenty* themes, Astra, GeneratePress, Kadence, Divi, OceanWP, Flatsome, and most other themes<\/li>\n<\/ul>\n\n<h4>How It Works<\/h4>\n\n<ol>\n<li>Visit any post or page on the frontend while logged in as an editor or administrator<\/li>\n<li>The <strong>\u270f\ufe0f HTML Editor<\/strong> toolbar appears at the top of the page<\/li>\n<li>Click <strong>Edit<\/strong> \u2014 the plugin loads the raw <code>post_content<\/code> from the database into the editor<\/li>\n<li>Edit the HTML, use the format toolbar or keyboard shortcuts<\/li>\n<li>Click <strong>\ud83d\udcbe Save &amp; Preview<\/strong> \u2014 your changes are saved and the page content updates instantly<\/li>\n<li>Use <strong>\ud83c\udfaf Pick element<\/strong> if the editor can't find the content area \u2014 click any block to get its CSS selector<\/li>\n<\/ol>\n\n<h4>Custom Snippets<\/h4>\n\n<p>Go to <strong>Settings \u2192 Front HTML Editor \u2192 Custom Snippets<\/strong> to add reusable HTML blocks.\nEach snippet gets its own button in the editor toolbar.\nUse <code>{|}<\/code> in the HTML code to control where the cursor appears after the snippet is inserted.<\/p>\n\n<p>Example:<\/p>\n\n<pre><code>&lt;div class=\"see-also-block\"&gt;&lt;div class=\"see-also-title\"&gt;See also:&lt;\/div&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\"{|}\"&gt;&lt;\/a&gt;&lt;\/li&gt;&lt;\/ul&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n<h4>Security<\/h4>\n\n<ul>\n<li>AJAX requests are nonce-verified<\/li>\n<li>Every action checks <code>current_user_can('edit_post', $post_id)<\/code> for the specific post<\/li>\n<li>Saved content passes through <code>wp_kses_post<\/code><\/li>\n<li>The toolbar is never rendered for unauthenticated users or users without edit rights for the current post<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>recode-front-html-editor<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> menu in WordPress \u2014 you will be redirected to Settings automatically<\/li>\n<li>Configure the content selector and editor theme<\/li>\n<li>Visit any post or page on the frontend \u2014 the toolbar will appear for users with edit rights<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"the%20editor%20doesn%27t%20find%20the%20content%20area%20on%20my%20theme.%20what%20do%20i%20do%3F\"><h3>The editor doesn't find the content area on my theme. What do I do?<\/h3><\/dt>\n<dd><p>Use the <strong>\ud83c\udfaf Pick element<\/strong> button in the toolbar, click on your content area, then copy the selector to <strong>Settings \u2192 Front HTML Editor \u2192 Custom selector<\/strong>.<\/p><\/dd>\n<dt id=\"which%20user%20roles%20can%20see%20the%20editor%20toolbar%3F\"><h3>Which user roles can see the editor toolbar?<\/h3><\/dt>\n<dd><p>Any user who has the <code>edit_post<\/code> capability for the currently viewed post. This typically includes Editors and Administrators, and Authors for their own posts.<\/p><\/dd>\n<dt id=\"can%20i%20use%20this%20with%20the%20block%20editor%20%28gutenberg%29%3F\"><h3>Can I use this with the block editor (Gutenberg)?<\/h3><\/dt>\n<dd><p>Yes. The plugin edits the raw <code>post_content<\/code> stored in the database. For classic posts this is regular HTML. For Gutenberg posts this is HTML with block comments \u2014 you can edit it, but be careful not to break block markup. For block-based themes, use <code>.wp-block-post-content<\/code> as the selector.<\/p><\/dd>\n<dt id=\"does%20this%20work%20on%20archive%20pages%2C%20home%20pages%2C%20or%20woocommerce%20pages%3F\"><h3>Does this work on archive pages, home pages, or WooCommerce pages?<\/h3><\/dt>\n<dd><p>No \u2014 the editor only activates on singular posts and pages (<code>is_singular()<\/code>).<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>3.6.9<\/h4>\n\n<ul>\n<li>Added: redirect to Settings page on plugin activation<\/li>\n<li>Added: Settings link in the Plugins list<\/li>\n<li>Fixed: Ctrl+S now prevents browser \"Save Page\" dialog when editor is focused<\/li>\n<\/ul>\n\n<h4>3.6.8<\/h4>\n\n<ul>\n<li>Changed: CodeMirror replaced with a plain textarea \u2014 no external dependencies, lighter and faster<\/li>\n<li>Removed: Code\/Plain toggle button \u2014 single editor mode only<\/li>\n<li>Improved: snippet cursor positioning now fully reliable<\/li>\n<\/ul>\n\n<h4>3.6.0<\/h4>\n\n<ul>\n<li>Changed: CodeMirror loaded from WordPress core instead of CDN \u2014 no remote files<\/li>\n<li>Added: Plain textarea toggle mode<\/li>\n<li>Added: Custom dark\/light color themes<\/li>\n<\/ul>\n\n<h4>3.5.2<\/h4>\n\n<ul>\n<li>Fixed: CodeMirror and snippet JS assets now loaded via proper wp_enqueue functions (WordPress.org requirement)<\/li>\n<\/ul>\n\n<h4>3.5.1<\/h4>\n\n<ul>\n<li>Fixed: removed load_plugin_textdomain() \u2014 WordPress 4.6+ loads translations automatically<\/li>\n<li>Fixed: escaped output in field_editor_theme() to satisfy Plugin Check requirements<\/li>\n<li>Updated: Tested up to WordPress 6.9<\/li>\n<\/ul>\n\n<h4>3.5.0<\/h4>\n\n<ul>\n<li>Added: Custom Snippets \u2014 add any HTML block as a toolbar button via Settings<\/li>\n<li>Added: {|} cursor marker \u2014 controls where the cursor lands after snippet insert<\/li>\n<li>Added: Snippet Tips card in Settings sidebar with usage example<\/li>\n<li>Added: Distinct visual style for snippet buttons in the editor toolbar (amber color)<\/li>\n<li>Changed: Format toolbar HTML now built dynamically to support variable number of snippet buttons<\/li>\n<\/ul>\n\n<h4>3.4.3<\/h4>\n\n<ul>\n<li>Changed: internal prefix renamed from <code>rfie<\/code> to <code>rfhe<\/code> (option key, nonce, AJAX actions, CSS\/JS identifiers, admin page slug)<\/li>\n<li>Changed: plugin description updated \u2014 more accurate wording<\/li>\n<li>Changed: Plugin URI and Author URI now point to the dedicated plugin page on recodecommerce.com<\/li>\n<li>Added: footer block on Settings page (Plugin Page \/ GitHub \/ Contact links)<\/li>\n<li>Added: <code>PLUGIN_URL<\/code> and <code>GITHUB_URL<\/code> constants for easy maintenance<\/li>\n<\/ul>\n\n<h4>3.4.2<\/h4>\n\n<ul>\n<li>Security: <code>ajax_get_content<\/code> now verifies <code>edit_post($post_id)<\/code> per-post<\/li>\n<li>Fixed: <code>body { padding-top }<\/code> no longer applies globally \u2014 only when toolbar is active<\/li>\n<li>Fixed: Pick button colors now respect dark\/light theme setting<\/li>\n<li>Improved: All output properly escaped with <code>esc_html_e()<\/code>, <code>esc_attr_e()<\/code>, <code>esc_url()<\/code><\/li>\n<li>Added: <code>uninstall.php<\/code> for clean removal<\/li>\n<\/ul>\n\n<h4>3.4.0<\/h4>\n\n<ul>\n<li>Added Element Picker with ancestor breadcrumb navigation<\/li>\n<li>Added format toolbar (Bold, Italic, Strikethrough, Highlight, code, headings, lists, link, image)<\/li>\n<li>Added keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+S, Escape)<\/li>\n<li>Added dark\/light theme support<\/li>\n<li>Added configurable content selector in Settings<\/li>\n<\/ul>\n\n<h4>3.0.0<\/h4>\n\n<ul>\n<li>Initial public release<\/li>\n<\/ul>","raw_excerpt":"Frontend HTML editor for WordPress \u2014 edit post_content directly on the page and preview changes instantly without a page reload.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/286158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=286158"}],"author":[{"embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/recodecommerce"}],"wp:attachment":[{"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=286158"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=286158"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=286158"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=286158"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=286158"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/tah.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=286158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}