KayzArt Live Code Editor
| 开发者 | ksartoffice |
|---|---|
| 更新时间 | 2026年4月7日 13:38 |
| PHP版本: | 8.2 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
详情介绍:
- Custom KayzArt post type and dedicated editor
- CodeMirror 6 editor with HTML/CSS/JS tabs and live iframe preview
- JavaScript ES Module support with execution type switch (Classic / Module)
- Setup wizard (Normal/Tailwind/Import JSON) with per-post mode lock
- Tailwind mode with on-demand Tailwind CSS v4 compilation
- Import/export JSON projects
- Per-post template mode control: Default/Standalone/Theme
- External scripts/styles (https only), live edit highlight, real-time DOM selection, and optional Shadow DOM isolation
- External embedding (enable in settings): [kayzart post_id="123"]
- Allowlist for shortcode execution inside external embeds (one shortcode tag per line)
- Optional single-page disable for external-embed output External connections and privacy:
- By default, KayzArt does not load external scripts or styles and does not send telemetry.
- External requests happen only when an authorized user explicitly adds external HTTPS URLs in KayzArt settings.
- Added external resources are requested both in preview and on front-end output where the KayzArt content is rendered.
- Add only trusted URLs. Development repository and build:
- Source repository: https://github.com/ksartoffice/kayzart-live-code-editor
- Generated files used by WordPress: assets/dist/main.js and assets/dist/style.css
- Source files for generated assets: src/admin/main.ts, src/admin/style.css, and related files under src/admin/
- Build configuration files: package.json, package-lock.json, vite.config.ts, tsconfig.json
- Build steps:
- npm install
- composer install
- npm run build
- npm run plugin-zip
安装:
- Upload the plugin folder to /wp-content/plugins/kayzart-live-code-editor/.
- Activate KayzArt Live Code Editor through the Plugins screen.
- Go to KayzArt in the admin menu and create a new KayzArt item.
屏幕截图:
常见问题:
Who can edit KayzArt posts?
Users who can edit the post can use the editor. JavaScript, external scripts/styles, shadow DOM, external embedding, and single-page settings require the unfiltered_html capability.
Does KayzArt contact external servers by default?
No. External requests are disabled by default. Requests are made only when you explicitly configure external HTTPS script/style URLs in KayzArt settings.
How do I embed a page created with KayzArt?
Enable external embedding in KayzArt settings, then use [kayzart post_id="123"] with the post ID of the page you created in KayzArt. For shortcode execution inside the embedded content, add allowed tags in KayzArt settings (one tag per line). Non-allowlisted tags remain plain text.
Can I disable the single page view?
Yes. Enable external embedding and turn on "Do not publish as single page." Disabled single pages are marked noindex and excluded from search/archives, and the single-page request is redirected (or can be forced to 404 via the kayzart_single_page_redirect filter).
Can I switch between Normal and Tailwind modes?
The setup wizard lets you choose Normal or Tailwind. The choice is locked per KayzArt post.
Which Tailwind CSS version is supported?
Tailwind mode supports Tailwind CSS v4.
How does template mode work?
Each KayzArt post can use Default, Standalone, or Theme template mode. Default follows KayzArt > Settings > Default template mode. If Theme mode does not expose the_content in your theme, KayzArt preview prompts to switch to Standalone.
Can I change the KayzArt URL slug?
Yes. Go to KayzArt > Settings and update the KayzArt slug.
Can I set a default template mode for new previews?
Yes. Go to KayzArt > Settings and set the Default template mode (Standalone/Theme).
Does the plugin delete data on uninstall?
By default, KayzArt posts are kept when the plugin is uninstalled. You can enable data removal from the KayzArt > Settings screen.
Where is the code stored?
HTML is stored in the post content. CSS/JS and other settings are stored in post meta.
Where is the development repository and how do I build the plugin?
Development repository: https://github.com/ksartoffice/kayzart-live-code-editor Generated files in the distributed plugin:
- assets/dist/main.js
- assets/dist/style.css Source files and build configuration in this repository:
- src/admin/main.ts and src/admin/style.css (plus related source files under src/admin/)
- package.json, package-lock.json, vite.config.ts, tsconfig.json Build commands:
- npm install
- composer install
- npm run build
- npm run plugin-zip
更新日志:
- Update: Minor changes.
- Docs: Add screenshots section.
- Update: Bump TailwindPHP fork dependency to v1.3.0.2.
- Improve: Add resizable settings panel with width persistence.
- Add: Introduce preview override action events.
- Security: Security update and hardening improvements.
- Fix: Bug fixes and stability improvements.
- Introduce CodeMirror 6 editor runtime and remove legacy bundled loader assets.
- Fix: Minor internal code cleanup
- Add JavaScript execution mode selector (Classic script / Module) in the JavaScript tab.
- Add ES Module runtime contract support with context injection (
root,document,host,onCleanup).
- Fix: Bug fixes and stability improvements.
- Security: Security update and hardening improvements.
- Security: Implemented security-related improvements and hardening updates.
- Add allowlist settings for shortcode execution in external embeds.
- Other: Internal improvements and maintenance updates.
- Initial release.