Title: Jamie's Visual HTML Editor
Author: jamiemarsland
Published: 2026 年 6 月 23 日
Last modified: 2026 年 7 月 1 日
---
搜尋外掛
# Jamie's Visual HTML Editor
由 [jamiemarsland](https://profiles.wordpress.org/jamiemarsland/) 開發
[下載](https://downloads.wordpress.org/plugin/jamies-visual-html-editor.0.4.zip)
[即時預覽](https://tw.wordpress.org/plugins/jamies-visual-html-editor/?preview=1)
* [詳細資料](https://tw.wordpress.org/plugins/jamies-visual-html-editor/#description)
* [使用者評論](https://tw.wordpress.org/plugins/jamies-visual-html-editor/#reviews)
* [安裝方式](https://tw.wordpress.org/plugins/jamies-visual-html-editor/#installation)
* [開發資訊](https://tw.wordpress.org/plugins/jamies-visual-html-editor/#developers)
[技術支援](https://wordpress.org/support/plugin/jamies-visual-html-editor/)
## 外掛說明
Jamie’s Visual HTML Editor enhances the core Custom HTML block so you can paste
in any HTML and let editors change the copy and images without touching the markup.
* **Edit content** — render the HTML live and click any heading, paragraph, list
item, link, or button to edit its text in place. Click any `![]()
` to replace
it from the Media Library, change its URL, or edit its alt text. Add `data-vc-
bg` and an inline `background-image` on hero sections to make backgrounds editable
too.
* **Edit code** — the normal raw-HTML view for pasting or writing markup.
* **Wide and Full width** — adds Wide and Full alignment options to the Custom
HTML block. It does not change the block’s content width; it only lets you choose
Wide or Full alignment so full-bleed sections can break out of the theme’s content
area.
Content is stored as a native Custom HTML block, so revisions and saving work exactly
as they do in core. The plugin only changes how the block is edited and aligned.
This plugin is open source. See the Development section below for the full human-
readable source code and build instructions.
### Development
This plugin is open source (GPL-2.0-or-later). The complete, human-readable source
code — including the un-minified JavaScript in `src/` and the build configuration—
is publicly available at:
https://github.com/jamiemarsland/jamies-visual-html-editor
The compiled files in `build/` are generated with [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts):
```
npm install
npm run build
```
No third-party libraries are bundled; the plugin relies only on the WordPress-provided
editor packages (`@wordpress/*`).
## 螢幕擷圖
[⌊The block toolbar in "Edit content" mode — click any text or image to edit it
in place.⌉⌊The block toolbar in "Edit content" mode — click any text or image to
edit it in place.⌉[
The block toolbar in “Edit content” mode — click any text or image to edit it in
place.
[⌊Clicking an image opens the replace modal: choose from the Media Library, paste
a URL, or update alt text.⌉⌊Clicking an image opens the replace modal: choose from
the Media Library, paste a URL, or update alt text.⌉[
Clicking an image opens the replace modal: choose from the Media Library, paste
a URL, or update alt text.
[⌊Wide and Full width alignment options in the block toolbar for full-bleed sections.⌉⌊
Wide and Full width alignment options in the block toolbar for full-bleed sections
.⌉[
Wide and Full width alignment options in the block toolbar for full-bleed sections.
## 安裝方式
1. Upload the `jamies-visual-html-editor` folder to the `/wp-content/plugins/` directory,
or install the plugin through the Plugins screen in WordPress.
2. Activate the plugin through the Plugins screen.
3. Add or select a Custom HTML block in the block editor and use the “Edit content”/“
Edit code” toolbar buttons. Use the alignment control for Wide or Full width.
## 常見問題集
### Which blocks does this affect?
It enhances the core Custom HTML block (`core/html`). Other blocks are unchanged.
### Will it change my saved HTML?
The block is still stored as a standard Custom HTML block. Editing text updates
the words; editing an image updates its `src` and `alt` attributes. Structure, classes,
and styles stay unchanged. Switch to “Edit code” to see the raw markup.
### Can I replace images?
Yes. In “Edit content” mode, click an image to open a modal where you can choose
a replacement from the Media Library, paste an external URL, or edit the alt text.
### Can I replace hero background images?
Yes. In “Edit content” mode, hover a hero section whose background is set inline
or in a `