PHPackages broccoli-html-editor/kaleflower - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. broccoli-html-editor/kaleflower ActiveLibrary[Utility & Helpers](/categories/utility) broccoli-html-editor/kaleflower =============================== GUI HTML Editor Library. 0.2.1(9mo ago)06993MITJavaScriptPHP >=7.3.0 Since Mar 14Pushed 9mo ago1 watchersCompare [ Source](https://github.com/broccoli-html-editor/kaleflower)[ Packagist](https://packagist.org/packages/broccoli-html-editor/kaleflower)[ RSS](/packages/broccoli-html-editor-kaleflower/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (5)Versions (7)Used By (3) Kaleflower ========== [](#kaleflower) *Kaleflower* は、GUIベースでHTMLを編集するブロックエディタライブラリです。 断片化されたHTMLの部品(モジュール)をドラッグ＆ドロップ操作で組み合わせて、ウェブページを構成できます。 インストール - Install ---------------- [](#インストール---install) ``` $ composer require broccoli-html-editor/kaleflower ``` 使い方 - Usage ----------- [](#使い方---usage) ### バックエンド（PHP）での初期化 [](#バックエンドphpでの初期化) #### 基本的な使用方法 [](#基本的な使用方法) ``` Kaleflower Editor // Kaleflowerエディタを初期化 const container = document.getElementById('kaleflower-container'); const kaleflower = new Kaleflower(container, { // 任意の初期化オプションを設定 }); // kflowファイルを読み込み kaleflower.load('/path/to/your/file.kflow'); // 変更イベントの監視 kaleflower.on('change', function(event) { console.log('Content changed:', event); }); // 現在のデータを取得 function saveContent() { const data = kaleflower.get(); console.log('Current data:', data); // TODO: バックエンドへ送信して、kflowファイルを保存する処理 } ``` ### オプション設定 [](#オプション設定) #### バックエンド（PHP）のビルドオプション [](#バックエンドphpのビルドオプション) オプション名型デフォルト値説明`assetsPrefix`string`'./'`アセットファイルのパスプレフィックス`extra`object`{}`コンポーネントテンプレートに渡される追加データ#### フロントエンド（JavaScript）の初期化オプション [](#フロントエンドjavascriptの初期化オプション) オプション名型デフォルト値説明`lang`string`'en'`言語設定（'en', 'ja' など）`appearance`string`'auto'`外観テーマ（'light', 'dark', 'auto'）`extra`object`{}`コンポーネントテンプレートに渡される追加データ`finalize`function`(contents) => contents`最終的なコンテンツをカスタマイズする関数`previewWrapSelector`boolean/string`false`プレビューをラップするセレクタ`urlLayoutViewPage`string`'about:blank'`レイアウトビューのURL`scriptReceiverSelector`string`'[data-kaleflower-receive-message=yes]'`スクリプトメッセージ受信セレクタ`contentsAreaSelector`string`'[data-kaleflower-contents-bowl-name]'`コンテンツエリアセレクタ`contentsContainerNameBy`string`'data-kaleflower-contents-bowl-name'`コンテンツコンテナ名の属性### kflowファイルの構造 [](#kflowファイルの構造) kflowファイルはXML形式で、以下の要素で構成されます： ``` color: #333; background-color: #fff; メインコンテンツ 任意の追加コンテンツ {{ _ }} ]]> .test-field-text-editor{&__color-sample{height:5px;}textarea{width:100%;}}]]> .test-field-text-editor{&__color-sample{background-color:#666666;}}]]> .test-field-text-editor{&__color-sample{background-color:#f0f0f0;}}]]> function(dom, fieldHelper){ console.log('custom-field: onload function:', dom, fieldHelper); return; }]]> {{ attributes.title }} {{ innerHTML | raw }} ]]> ``` ### イベントハンドリング [](#イベントハンドリング) ``` // 変更イベントの監視 kaleflower.on('change', function(event) { console.log('Content changed:', event.data); }); // イベントハンドラの削除 kaleflower.off('change'); // カスタムイベントの発生 kaleflower.trigger('custom-event', { data: 'custom data' }); ``` ### データの保存と読み込み [](#データの保存と読み込み) ``` // 現在のデータを取得 const currentData = kaleflower.get(); // XMLデータを直接読み込み const xmlData = '...'; kaleflower.loadXml(xmlData); // ファイルから読み込み kaleflower.load('/path/to/file.kflow'); ``` 更新履歴 - Change log ----------------- [](#更新履歴---change-log) ### Kaleflower v0.2.1 (2025年7月29日) [](#kaleflower-v021-2025年7月29日) - imageフィールドに、「ウェブリソース」「なし」の選択を追加。 - フロントエンドの初期化オプションに `previewWrapSelector` を追加した。 - class名を与えたときに、元のスタイルが失われてしまう問題を修正した。 - カラーパレットから色選択できるようになった。 - `$kaleflower->getXml()` で、ブラウザとの互換性のため、LF改行コード ` ` を ` ` に変換するようになった。 - その他、いくつかの不具合の修正、UIの改善など。 ### Kaleflower v0.2.0 (2025年7月12日) [](#kaleflower-v020-2025年7月12日) - ドラッグ操作でインスタンスの幅と高さを編集できるようになった。 - データ構造変更: 各要素のスタイリング情報を、属性値ではなくCSSを直接操作するようになった。 - `layout`、 `contents-direction`、 `scrollable` を、`select` ボックスで選択できるようになった。 - `contents-direction` に `vertical` を追加。 - 要素の `onclick`, `onsubmit` 属性値を出力するようになった。 - クラス名を設定していない要素で、カスタムCSSを追加できるようになった。 - クラス名を設定していないスタイル要素を、CSS出力に含めるようになった。 - `module-name` が設定されている場合に、ルート要素にクラス名が出力されるようになった。 - オプション `finalize()` を追加。 - コンポーネントに `can-set-css` 属性を追加。 - フィールドに `format` を追加。デフォルトは `plain` とした。 - config: `break-point-query-type` を追加。 - 単位付きの入力項目について、入力支援機能を追加。単位を別で選択できるようになった。 - ビューポート幅の変更機能を追加した。 - 小さい画面での操作性を向上した。 - レイアウトビューが、横スクロール操作に追従しない問題を修正。 - メディアクエリのCSSが、ベースクラスのスタイルがない場合に出力されない不具合を修正。 - その他、いくつかの不具合の修正、UIの改善など。 ### Kaleflower v0.1.1 (2025年4月3日) [](#kaleflower-v011-2025年4月3日) - 出力時の calss 名が正しく与えられない場合がある不具合を修正。 - ビルドオプション `extra` を追加した。 - コンポーネントに `_ENV.mode`、 `_ENV.lang`、 `_ENV.extra` が送られるようになった。 - コンポーネントに `` を挿入できるようになった。 - インターフェイスの変更: `load()` と `build()` を分けた。 - `on()`, `off()`, `trigger()` を追加した。 - `onchange` イベントを追加した。 - その他の細かい不具合の修正など。 ### Kaleflower v0.1.0 (2025年3月15日) [](#kaleflower-v010-2025年3月15日) - Initial release. ライセンス - License --------------- [](#ライセンス---license) MIT License 作者 - Author ----------- [](#作者---author) - Tomoya Koyanagi - website: - Twitter: @tomk79 ### Health Score 29 — LowBetter than 59% of packages Maintenance56 Moderate activity, may be stable Popularity17 Limited adoption so far Community12 Small or concentrated contributor base Maturity27 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~34 days Total 5 Last Release 291d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/00ca3b0b7c69b5a8c25bbfb82b305ab94c4fc7458b38df445cbb97acc073875f?d=identicon)[tomk79](/maintainers/tomk79) --- Top Contributors [![tomk79](https://avatars.githubusercontent.com/u/584845?v=4)](https://github.com/tomk79 "tomk79 (335 commits)") --- Tags kaleflower ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/broccoli-html-editor-kaleflower/health.svg) ``` [![Health](https://phpackages.com/badges/broccoli-html-editor-kaleflower/health.svg)](https://phpackages.com/packages/broccoli-html-editor-kaleflower) ``` ### Alternatives [stfalcon/tinymce-bundle This Bundle integrates TinyMCE WYSIWYG editor into a Symfony2 project. 2692.9M24](/packages/stfalcon-tinymce-bundle)[codefog/contao-haste haste extension for Contao Open Source CMS 42650.8k139](/packages/codefog-contao-haste)[spomky-labs/pwa-bundle Progressive Web App Manifest Generator Bundle for Symfony. 6144.4k1](/packages/spomky-labs-pwa-bundle)[netgen/content-browser Netgen Content Browser is a Symfony bundle that provides an interface which selects items from any kind of backend and returns the IDs of selected items back to the calling code. 14112.1k8](/packages/netgen-content-browser)[leapt/core-bundle Symfony LeaptCoreBundle 2529.1k4](/packages/leapt-core-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)