sunny-html-editor 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -125
- package/html-editor.js +2 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,136 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。Markdown変換にも対応。
|
|
4
4
|
|
|
5
|
-
## 特徴
|
|
6
|
-
|
|
7
|
-
- **自己完結型** - ツールバー・コンテキストメニューを自動生成
|
|
8
|
-
- **Markdown変換** - `data-markdown`属性でMDテキストを自動変換
|
|
9
|
-
- **遅延読み込み** - Excel/PDF出力用ライブラリは使用時に自動読み込み
|
|
10
|
-
- **WYSIWYG編集** - 見たまま編集、右クリックで要素追加
|
|
11
|
-
- **キーボード操作** - ↑↓で要素間移動、Shift/Ctrl+Enterで項目追加
|
|
12
|
-
- **多彩なエクスポート** - Markdown、HTML、Excel、PDF
|
|
13
|
-
- **サイドバーナビ** - 目次自動生成
|
|
14
|
-
|
|
15
|
-
## インストール
|
|
16
|
-
|
|
17
|
-
### CDN（推奨）
|
|
18
|
-
|
|
19
|
-
```html
|
|
20
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
|
|
21
|
-
<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
### npm
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
npm install sunny-html-editor
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## 使い方
|
|
31
|
-
|
|
32
|
-
### 基本（HTMLコンテンツ）
|
|
33
|
-
|
|
34
|
-
`id="editorContainer"` を持つコンテナを用意するだけ。ツールバーとコンテキストメニューは自動生成されます。
|
|
35
|
-
|
|
36
|
-
```html
|
|
37
|
-
<!DOCTYPE html>
|
|
38
|
-
<html lang="ja">
|
|
39
|
-
<head>
|
|
40
|
-
<meta charset="UTF-8">
|
|
41
|
-
<title>ドキュメントタイトル</title>
|
|
42
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
|
|
43
|
-
</head>
|
|
44
|
-
<body>
|
|
45
|
-
<div class="layout">
|
|
46
|
-
<main class="main">
|
|
47
|
-
<div class="container" id="editorContainer">
|
|
48
|
-
<h1>タイトル</h1>
|
|
49
|
-
<h2 id="section1">見出し</h2>
|
|
50
|
-
<p>本文...</p>
|
|
51
|
-
</div>
|
|
52
|
-
</main>
|
|
53
|
-
</div>
|
|
54
|
-
<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
|
|
55
|
-
</body>
|
|
56
|
-
</html>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### Markdown変換モード
|
|
60
|
-
|
|
61
|
-
`data-markdown`属性にURLエンコードしたMarkdownテキストを設定すると、自動でHTMLに変換されます。
|
|
62
|
-
|
|
63
|
-
```html
|
|
64
|
-
<div class="container" id="editorContainer" data-markdown="URLエンコードされたMDテキスト"></div>
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
JavaScript側で自動的に：
|
|
68
|
-
1. `data-markdown`属性をデコード
|
|
69
|
-
2. Markdown → HTML変換
|
|
70
|
-
3. コンテナ内にHTMLを生成
|
|
71
|
-
4. `data-markdown`属性を削除（HTML保存時に残らないように）
|
|
72
|
-
|
|
73
|
-
## 外部ライブラリ
|
|
74
|
-
|
|
75
|
-
Excel/PDF出力に必要なライブラリは**使用時に自動で読み込まれます**。事前の読み込みは不要です。
|
|
76
|
-
|
|
77
|
-
| ライブラリ | 用途 |
|
|
78
|
-
|-----------|------|
|
|
79
|
-
| ExcelJS | Excel出力 |
|
|
80
|
-
| jsPDF | PDF出力 |
|
|
81
|
-
| html2canvas | PDF出力（HTML→Canvas変換） |
|
|
82
|
-
|
|
83
|
-
## キーボードショートカット
|
|
84
|
-
|
|
85
|
-
| キー | 動作 |
|
|
86
|
-
|------|------|
|
|
87
|
-
| `Ctrl+E` | 編集モード切替 |
|
|
88
|
-
| `Ctrl+B` | サイドバー表示/非表示 |
|
|
89
|
-
| `Ctrl+M` | Markdownコピー |
|
|
90
|
-
| `Enter` | 編集確定 |
|
|
91
|
-
| `Shift+Enter` / `Ctrl+Enter` | li内: 新しい項目追加、その他: 改行 |
|
|
92
|
-
| `↓` | 次の要素へ移動（最終行の場合） |
|
|
93
|
-
| `↑` | 前の要素へ移動（先頭行の場合） |
|
|
94
|
-
| `Backspace` | 空のliで押すと削除して前へ |
|
|
95
|
-
| `Escape` | コンテキストメニューを閉じる |
|
|
96
|
-
|
|
97
|
-
## 右クリックメニュー
|
|
98
|
-
|
|
99
|
-
編集モード中に要素を右クリックすると、コンテキストメニューが表示されます。
|
|
100
|
-
|
|
101
|
-
- **見出し追加** - 大見出し / 中見出し / 小見出し
|
|
102
|
-
- **要素追加** - テーブル / 本文 / 箇条書き / 番号リスト / コードブロック / 引用
|
|
103
|
-
- **削除** - 各要素の削除
|
|
104
|
-
|
|
105
|
-
テーブル上では行/列の追加・削除も可能。
|
|
106
|
-
|
|
107
|
-
## ツールバーボタン
|
|
108
|
-
|
|
109
|
-
| ボタン | 機能 |
|
|
110
|
-
|--------|------|
|
|
111
|
-
| ↔️ | サイドバー表示/非表示 |
|
|
112
|
-
| 📝 | 編集モード切替 |
|
|
113
|
-
| Ⓜ️ | Markdownコピー |
|
|
114
|
-
| 🌐 | HTMLコピー |
|
|
115
|
-
| 💾 | HTML保存（ダウンロード） |
|
|
116
|
-
| 📊 | Excel出力 |
|
|
117
|
-
| 📕 | PDF出力 |
|
|
118
|
-
|
|
119
5
|
## バージョン履歴
|
|
120
6
|
|
|
7
|
+
- **1.2.3** - サイドバーh1の改行(br)維持を修正
|
|
8
|
+
- **1.2.2** - パッケージ修正
|
|
121
9
|
- **1.2.1** - h1の「_」区切り改行対応
|
|
122
10
|
- **1.2.0** - Markdown変換機能追加（`data-markdown`属性対応）
|
|
123
11
|
- **1.1.0** - ツールバー・コンテキストメニュー自動生成、外部ライブラリ遅延読み込み
|
|
124
|
-
- **1.0.3** - nullチェック強化
|
|
125
|
-
- **1.0.2** - DOMContentLoaded自動初期化
|
|
126
|
-
- **1.0.1** - メディアクエリ削除
|
|
127
|
-
- **1.0.0** - 初回リリース
|
|
128
|
-
|
|
129
|
-
## ブラウザ対応
|
|
130
|
-
|
|
131
|
-
- Chrome（推奨）
|
|
132
|
-
- Firefox
|
|
133
|
-
- Safari
|
|
134
|
-
- Edge
|
|
135
12
|
|
|
136
13
|
## ライセンス
|
|
137
14
|
|
package/html-editor.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Sunny HTML Editor - 軽量WYSIWYGエディタ
|
|
3
|
-
* @version 1.
|
|
3
|
+
* @version 1.2.3
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
// ========== HTML生成関数 ==========
|
|
@@ -832,8 +832,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
|
832
832
|
// サイドバーHTMLを動的に生成
|
|
833
833
|
function generateSidebarHtml() {
|
|
834
834
|
var h1 = container.querySelector('h1');
|
|
835
|
-
var
|
|
836
|
-
var h1Html = h1Text.replace(/\s*[-_]\s*/g, '<br>');
|
|
835
|
+
var h1Html = h1 ? h1.innerHTML : 'Document';
|
|
837
836
|
|
|
838
837
|
var navItems = '';
|
|
839
838
|
var headings = container.querySelectorAll('h2[id], h3[id]');
|