[WordPress] 外掛分享: KayzArt Live Code Editor

首頁外掛目錄 › KayzArt Live Code Editor
全新外掛
安裝啟用
尚無評分
6 天前
最後更新
問題解決
WordPress 6.6+ PHP 8.2+ v1.3.6 上架:2026-04-06

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.3.6) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「KayzArt Live Code Editor」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

KayzArt Live Code Editor provides a dedicated editor for building HTML, CSS, and JavaScript snippets with a live preview. It adds a “KayzArt” custom post type, opens new KayzArt posts in the editor, and adds an “Edit with KayzArt” button to the standard editor.
Features:
* 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:
1. npm install
2. composer install
3. npm run build
4. npm run plugin-zip
Credits
This plugin bundles third-party libraries:
* CodeMirror – MIT License – https://github.com/codemirror
* Emmet CodeMirror 6 Plugin – MIT License – https://github.com/emmetio/codemirror6-plugin
* TailwindPHP (fork) – MIT License – https://github.com/ksartoffice/tailwindphp (upstream: https://github.com/dnnsjsk/tailwindphp)

延伸相關外掛

文章
Filter
Apply Filters
Mastodon