Vanilla JS + Tailwind CSS で書かれた、組込み専用 WYSIWYG エディター。
React も Vue も不要。<script> 一行で動きます。
こだわって作り込んだ、組込み用 WYSIWYG エディターの中身。
React も Vue も jQuery も不要。Vanilla JS と Tailwind CSS だけで構成。単一ファイル kuro-editor.js を読み込むだけで動きます。
見出し H1〜H4、引用、コールアウト (4 色)、リスト、文字色、フォントサイズ、行間、整列、コードブロックなど、必要な装飾はすべて揃っています。コードブロックは行番号・コピー・削除・ドラッグ並び替えに対応。
セル結合・分割、罫線スタイル個別指定、列幅ドラッグリサイズ、セル背景色。Dropbox Paper のような操作性。縦方向配置（上・中央・下）の設定や、ワンクリックのテーブル削除にも対応。
画像／動画／音声／YouTube・Vimeo 埋め込み。ドラッグ&ドロップ、クリップボード貼り付けにも対応。
[[slug]]、[[[slug]]]、[[slug|表示]] で WiKi 風リンクをサポート。
常に統一感のあるダーク UI。記事の色設定だけが反映され、UI 色は変動しない設計。
任意の間隔で onSave コールバック発火。サーバー連携も自由自在。
WYSIWYG / HTML ソースのタブ切り替え。パワーユーザーは生 HTML で細かい調整もできます。
見出しから右側パネルに目次を自動生成。クリックでスムーススクロール。
2 ファイル読み込むだけで使えます。
kuro-editor.js と kuro-editor.css をサーバーに配置。
CSS を <head>、JS を <body> 末尾に。
new KuroEditor(element, options)。これだけ。
<!-- ① CSS を head に読み込み -->
<link rel="stylesheet" href="/assets/kuro-editor.css">
<!-- ② マウント先と JS -->
<div id="editor"></div>
<script src="/assets/kuro-editor.js"></script>
<!-- ③ 初期化 -->
<script>
new KuroEditor(
document.getElementById('editor'),
{
initialContent: '<p>Hello!</p>',
onSave(html) {
console.log('保存:', html)
},
}
)
</script>百聞は一見にしかず。動作を実際に確かめてください。
🎮 サンプルを開く