BsEditor (Bootstrap No-Code HTML Editor)

Bootstrap 5 のマークアップを、コードを書かずに組み立てられるブラウザベースのノーコードHTMLエディターです。単一のPythonファイル(app.py)がローカルサーバーとエディター本体(HTML/CSS/JS)を兼ねており、追加インストールなしで起動できます。

特徴

• セル単位の編集: 見出し・段落・リスト・テーブル・カード・グリッドなど、Bootstrapの各種要素を「セル」としてカタログから追加し、ドラッグ&ドロップで並び替え・入れ子構造を組み立てられます。
• 辞書駆動のクラス設定: Bootstrapの実クラス一覧から、意味の説明付きでクラスの付け外しができます(「高度なBootstrap設定」で検索も可能)。
• テーブル/グリッド編集: 表のセルごとにテキスト⇄子セルコンテナの切り替えや結合・分割、Grid 2/3テンプレートの列幅調整に対応。
• テキスト装飾: 選択範囲への装飾追加、装飾タグの入れ替え・入れ子・削除。
• Bootstrap Icons対応: 単独のアイコンセルの追加、および文中へのインラインアイコン挿入。
• HTMLインポート: 任意のHTMLを貼り付けて、エディターが扱えるセル構造へ変換します。
• プレビュー/HTML出力: プレビュー表示は最終的なエクスポートHTMLと完全に一致します(編集用のマークアップは一切残りません)。
• JSON保存/読み込み: 作業内容をJSONとして保存し、後で読み込んで再開できます。
• 元に戻す/やり直し: 主要な編集操作は履歴に記録され、undo/redoが可能です。

必要環境

• Python 3(標準ライブラリのみで動作。追加パッケージのインストールは不要です)
• インターネット接続(Bootstrap 5 / Bootstrap Icons / Googleフォントを CDN から読み込みます)

起動方法

python app.py

デフォルトではポート 18888 で起動し、自動的にブラウザで http://localhost:18888 が開きます。ポートを指定したい場合は引数で渡してください。

python app.py 8080

使い方の流れ

1. ワークスペース上のディバイダーやプラスボタンから「セルの追加」でテンプレートを選択して配置します。
2. セルをクリックすると右サイドバーに設定が表示され、クラスの付け外しやテキスト装飾、コンテンツ構造(テキスト⇄子セルコンテナ)の切り替えができます。
3. 右上の「編集」/「プレビュー」で表示を切り替え、最終的な見た目を確認します。
4. 「HTML出力」で完成したHTMLをエクスポート、「JSONセーブ」で作業状態を保存できます。既存のHTMLを取り込みたい場合は「HTMLインポート」を使用してください。

ライセンス

このプロジェクトは Unlicense の下で公開されています。パブリックドメインとして自由に利用・改変・再配布できます。