sunny-html-editor 1.0.0
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/LICENSE +21 -0
- package/README.md +176 -0
- package/html-editor.css +400 -0
- package/html-editor.js +2042 -0
- package/package.json +33 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 OnMax Group
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
# Sunny HTML Editor
|
|
2
|
+
|
|
3
|
+
軽量WYSIWYGエディタ。既存のHTMLに編集機能を後付けで追加できます。
|
|
4
|
+
|
|
5
|
+
## 特徴
|
|
6
|
+
|
|
7
|
+
- **自己完結型** - 基本機能は外部依存なし
|
|
8
|
+
- **WYSIWYG編集** - 見たまま編集、右クリックで要素追加
|
|
9
|
+
- **キーボード操作** - ↑↓で要素間移動、Shift/Ctrl+Enterで項目追加
|
|
10
|
+
- **多彩なエクスポート** - Markdown、HTML、Excel、PDF
|
|
11
|
+
- **サイドバーナビ** - 目次自動生成
|
|
12
|
+
|
|
13
|
+
## 外部ライブラリ依存
|
|
14
|
+
|
|
15
|
+
### 必須
|
|
16
|
+
|
|
17
|
+
なし（基本機能のみ使用する場合）
|
|
18
|
+
|
|
19
|
+
### オプション（Excel/PDF出力に必要）
|
|
20
|
+
|
|
21
|
+
| ライブラリ | バージョン | 用途 | CDN |
|
|
22
|
+
|-----------|----------|------|-----|
|
|
23
|
+
| ExcelJS | 4.3.0+ | Excel出力 | https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js |
|
|
24
|
+
| jsPDF | 2.5.1+ | PDF出力 | https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js |
|
|
25
|
+
| html2canvas | 1.4.1+ | PDF出力（HTML→Canvas変換） | https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js |
|
|
26
|
+
|
|
27
|
+
Excel/PDF出力を使う場合は、html-editor.jsより**前に**読み込んでください：
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<!-- 外部ライブラリ（Excel/PDF出力に必要） -->
|
|
31
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
|
|
32
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
33
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
34
|
+
|
|
35
|
+
<!-- HTML Editor -->
|
|
36
|
+
<link rel="stylesheet" href="html-editor.css">
|
|
37
|
+
<script src="html-editor.js"></script>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## インストール
|
|
41
|
+
|
|
42
|
+
### npm
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npm install sunny-html-editor
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### CDN
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<link rel="stylesheet" href="https://unpkg.com/sunny-html-editor/html-editor.css">
|
|
52
|
+
<script src="https://unpkg.com/sunny-html-editor/html-editor.js"></script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### ダウンロード
|
|
56
|
+
|
|
57
|
+
`html-editor.css` と `html-editor.js` をダウンロードして読み込み。
|
|
58
|
+
|
|
59
|
+
## 使い方
|
|
60
|
+
|
|
61
|
+
### 基本
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<!DOCTYPE html>
|
|
65
|
+
<html>
|
|
66
|
+
<head>
|
|
67
|
+
<link rel="stylesheet" href="html-editor.css">
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<div id="content">
|
|
71
|
+
<h1>タイトル</h1>
|
|
72
|
+
<p>既存のHTMLコンテンツ</p>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<script src="html-editor.js"></script>
|
|
76
|
+
<script>
|
|
77
|
+
HtmlEditor.init('#content');
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### オプション
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
HtmlEditor.init('#content', {
|
|
87
|
+
sidebar: true, // サイドバー表示（デフォルト: true）
|
|
88
|
+
toolbar: true // ツールバー表示（デフォルト: true）
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## キーボードショートカット
|
|
93
|
+
|
|
94
|
+
| キー | 動作 |
|
|
95
|
+
|------|------|
|
|
96
|
+
| `Ctrl+E` | 編集モード切替 |
|
|
97
|
+
| `Ctrl+B` | サイドバー表示/非表示 |
|
|
98
|
+
| `Ctrl+M` | Markdownコピー |
|
|
99
|
+
| `Enter` | 編集確定 |
|
|
100
|
+
| `Shift+Enter` / `Ctrl+Enter` | li内: 新しい項目追加、その他: 改行 |
|
|
101
|
+
| `↓` | 次の要素へ移動（最終行の場合） |
|
|
102
|
+
| `↑` | 前の要素へ移動（先頭行の場合） |
|
|
103
|
+
| `Backspace` | 空のliで押すと削除して前へ |
|
|
104
|
+
| `Escape` | コンテキストメニューを閉じる |
|
|
105
|
+
|
|
106
|
+
## 右クリックメニュー
|
|
107
|
+
|
|
108
|
+
編集モード中に要素を右クリックすると、コンテキストメニューが表示されます。
|
|
109
|
+
|
|
110
|
+
- **見出し追加** - 大見出し / 中見出し / 小見出し
|
|
111
|
+
- **要素追加** - テーブル / 本文 / 箇条書き / 番号リスト / コードブロック / 引用
|
|
112
|
+
- **削除** - 各要素の削除
|
|
113
|
+
|
|
114
|
+
テーブル上では行/列の追加・削除も可能。
|
|
115
|
+
|
|
116
|
+
## エクスポート
|
|
117
|
+
|
|
118
|
+
### Markdown
|
|
119
|
+
|
|
120
|
+
```javascript
|
|
121
|
+
// ツールバーのⓂ️ボタン、または Ctrl+M
|
|
122
|
+
// クリップボードにコピーされます
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### HTML
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
// ツールバーの🌐ボタン
|
|
129
|
+
// クリップボードにコピーされます
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### HTML保存
|
|
133
|
+
|
|
134
|
+
```javascript
|
|
135
|
+
// ツールバーの💾ボタン
|
|
136
|
+
// HTMLファイルとしてダウンロード
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Excel / PDF
|
|
140
|
+
|
|
141
|
+
上記の外部ライブラリが読み込まれている必要があります。
|
|
142
|
+
読み込まれていない場合、ボタンを押すとアラートが表示されます。
|
|
143
|
+
|
|
144
|
+
## API
|
|
145
|
+
|
|
146
|
+
### HtmlEditor.init(selector, options)
|
|
147
|
+
|
|
148
|
+
エディタを初期化します。
|
|
149
|
+
|
|
150
|
+
- `selector` - コンテナ要素のセレクタまたはDOM要素
|
|
151
|
+
- `options` - オプションオブジェクト
|
|
152
|
+
|
|
153
|
+
### 返り値
|
|
154
|
+
|
|
155
|
+
HtmlEditorインスタンスを返します。
|
|
156
|
+
|
|
157
|
+
```javascript
|
|
158
|
+
var editor = HtmlEditor.init('#content');
|
|
159
|
+
|
|
160
|
+
// 編集モード切替
|
|
161
|
+
editor._action_editMode();
|
|
162
|
+
|
|
163
|
+
// サイドバー更新
|
|
164
|
+
editor._updateSidebar();
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## ブラウザ対応
|
|
168
|
+
|
|
169
|
+
- Chrome (推奨)
|
|
170
|
+
- Firefox
|
|
171
|
+
- Safari
|
|
172
|
+
- Edge
|
|
173
|
+
|
|
174
|
+
## ライセンス
|
|
175
|
+
|
|
176
|
+
MIT
|
package/html-editor.css
ADDED
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sunny HTML Editor - スタイルシート
|
|
3
|
+
* @version 1.0.0
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
* {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
body {
|
|
10
|
+
font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
background-color: #f5f5f5;
|
|
14
|
+
line-height: 1.6;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.layout {
|
|
18
|
+
display: flex;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sidebar {
|
|
23
|
+
width: 280px;
|
|
24
|
+
min-width: 200px;
|
|
25
|
+
max-width: 400px;
|
|
26
|
+
background: linear-gradient(180deg, #0f2733 0%, #1a3442 100%);
|
|
27
|
+
color: white;
|
|
28
|
+
position: fixed;
|
|
29
|
+
top: 0;
|
|
30
|
+
left: 0;
|
|
31
|
+
height: 100vh;
|
|
32
|
+
overflow-y: auto;
|
|
33
|
+
overflow-x: hidden;
|
|
34
|
+
padding: 0;
|
|
35
|
+
box-shadow: 2px 0 8px rgba(0,0,0,0.15);
|
|
36
|
+
}
|
|
37
|
+
.resizer {
|
|
38
|
+
width: 6px;
|
|
39
|
+
position: fixed;
|
|
40
|
+
top: 0;
|
|
41
|
+
height: 100vh;
|
|
42
|
+
background: transparent;
|
|
43
|
+
cursor: ew-resize;
|
|
44
|
+
z-index: 100;
|
|
45
|
+
}
|
|
46
|
+
.resizer:hover {
|
|
47
|
+
background: rgba(74, 144, 164, 0.5);
|
|
48
|
+
}
|
|
49
|
+
.sidebar h1 {
|
|
50
|
+
font-size: 1em;
|
|
51
|
+
font-weight: 700;
|
|
52
|
+
padding: 15px 20px 15px 20px;
|
|
53
|
+
margin: 0;
|
|
54
|
+
background: rgba(0,0,0,0.2);
|
|
55
|
+
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
56
|
+
text-align: center;
|
|
57
|
+
}
|
|
58
|
+
.sidebar nav {
|
|
59
|
+
padding: 10px 0;
|
|
60
|
+
}
|
|
61
|
+
.sidebar nav ul {
|
|
62
|
+
list-style: none;
|
|
63
|
+
margin: 0;
|
|
64
|
+
padding: 0;
|
|
65
|
+
}
|
|
66
|
+
.sidebar nav li {
|
|
67
|
+
margin: 0;
|
|
68
|
+
}
|
|
69
|
+
.sidebar nav a {
|
|
70
|
+
display: block;
|
|
71
|
+
padding: 10px 20px;
|
|
72
|
+
color: rgba(255,255,255,0.85);
|
|
73
|
+
text-decoration: none;
|
|
74
|
+
font-size: 0.95em;
|
|
75
|
+
border-left: 3px solid transparent;
|
|
76
|
+
transition: all 0.2s;
|
|
77
|
+
}
|
|
78
|
+
.sidebar nav a:hover {
|
|
79
|
+
background: rgba(255,255,255,0.1);
|
|
80
|
+
color: white;
|
|
81
|
+
border-left-color: #4a90a4;
|
|
82
|
+
}
|
|
83
|
+
.sidebar nav a.active {
|
|
84
|
+
background: rgba(255,255,255,0.15);
|
|
85
|
+
color: white;
|
|
86
|
+
border-left-color: #4a90a4;
|
|
87
|
+
}
|
|
88
|
+
.sidebar nav .nav-h2 {
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
padding-left: 20px;
|
|
91
|
+
}
|
|
92
|
+
.sidebar nav .nav-h3 {
|
|
93
|
+
font-size: 0.9em;
|
|
94
|
+
padding: 6px 20px 6px 35px;
|
|
95
|
+
color: rgba(255,255,255,0.95);
|
|
96
|
+
}
|
|
97
|
+
.sidebar nav .nav-h3:hover {
|
|
98
|
+
color: white;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.main {
|
|
102
|
+
flex: 1;
|
|
103
|
+
margin-left: 0;
|
|
104
|
+
padding: 30px 40px;
|
|
105
|
+
}
|
|
106
|
+
.container {
|
|
107
|
+
max-width: 1400px;
|
|
108
|
+
margin: 0 auto;
|
|
109
|
+
background: white;
|
|
110
|
+
padding: 30px 40px;
|
|
111
|
+
border-radius: 8px;
|
|
112
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
113
|
+
position: relative;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.main h1 {
|
|
117
|
+
color: #1a2332;
|
|
118
|
+
font-size: 2.2em;
|
|
119
|
+
font-weight: 700;
|
|
120
|
+
margin: 20px 0 30px 0;
|
|
121
|
+
text-align: center;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
h2 {
|
|
125
|
+
color: #1a2332;
|
|
126
|
+
font-size: 1.8em;
|
|
127
|
+
font-weight: 700;
|
|
128
|
+
border-bottom: 4px solid #0f2733;
|
|
129
|
+
padding-bottom: 12px;
|
|
130
|
+
margin: 40px 0 25px 5px;
|
|
131
|
+
scroll-margin-top: 20px;
|
|
132
|
+
}
|
|
133
|
+
h2:first-of-type {
|
|
134
|
+
margin-top: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
h3 {
|
|
138
|
+
background: linear-gradient(135deg, #0f2733 0%, #1a3442 100%);
|
|
139
|
+
color: white;
|
|
140
|
+
font-size: 1.3em;
|
|
141
|
+
font-weight: 600;
|
|
142
|
+
padding: 10px 18px 10px 7px;
|
|
143
|
+
margin: 30px -10px 18px 5px;
|
|
144
|
+
border-radius: 4px;
|
|
145
|
+
scroll-margin-top: 20px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
h4 {
|
|
149
|
+
color: #1a3442;
|
|
150
|
+
font-size: 1.1em;
|
|
151
|
+
font-weight: 600;
|
|
152
|
+
padding: 8px 12px;
|
|
153
|
+
margin: 22px 0 12px 7px;
|
|
154
|
+
background: linear-gradient(90deg, #e8f4f8 0%, #f8fbfc 100%);
|
|
155
|
+
border-radius: 4px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
h5 {
|
|
159
|
+
color: #2c5364;
|
|
160
|
+
font-size: 1em;
|
|
161
|
+
font-weight: 600;
|
|
162
|
+
padding: 5px 0 5px 10px;
|
|
163
|
+
margin: 18px 0 8px 0;
|
|
164
|
+
border-left: 3px solid #4a90a4;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
p {
|
|
168
|
+
margin: 10px 0 10px 20px;
|
|
169
|
+
color: #333;
|
|
170
|
+
}
|
|
171
|
+
h1 + p {
|
|
172
|
+
text-align: center;
|
|
173
|
+
}
|
|
174
|
+
ul, ol {
|
|
175
|
+
margin: 10px 0 10px 20px;
|
|
176
|
+
padding-left: 25px;
|
|
177
|
+
}
|
|
178
|
+
li {
|
|
179
|
+
margin: 5px 0;
|
|
180
|
+
}
|
|
181
|
+
table {
|
|
182
|
+
width: calc(100% - 20px);
|
|
183
|
+
border-collapse: collapse;
|
|
184
|
+
margin: 15px 0 15px 20px;
|
|
185
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
186
|
+
}
|
|
187
|
+
th, td {
|
|
188
|
+
border: 1px solid #ddd;
|
|
189
|
+
padding: 10px;
|
|
190
|
+
text-align: left;
|
|
191
|
+
vertical-align: top;
|
|
192
|
+
}
|
|
193
|
+
th {
|
|
194
|
+
background: linear-gradient(180deg, #f8f8f8 0%, #efefef 100%);
|
|
195
|
+
font-weight: 600;
|
|
196
|
+
font-size: 0.95em;
|
|
197
|
+
color: #333;
|
|
198
|
+
white-space: nowrap;
|
|
199
|
+
}
|
|
200
|
+
tr:hover {
|
|
201
|
+
background-color: #f9f9f9;
|
|
202
|
+
}
|
|
203
|
+
/* 2列テーブル */
|
|
204
|
+
.table-2col th:first-child, .table-2col td:first-child { width: 30%; }
|
|
205
|
+
.table-2col th:last-child, .table-2col td:last-child { width: 70%; }
|
|
206
|
+
/* 3列テーブル */
|
|
207
|
+
.table-3col th:first-child, .table-3col td:first-child { width: 30%; }
|
|
208
|
+
.table-3col th:nth-child(2), .table-3col td:nth-child(2) { width: 35%; }
|
|
209
|
+
.table-3col th:last-child, .table-3col td:last-child { width: 35%; }
|
|
210
|
+
/* 4列以上テーブル */
|
|
211
|
+
.table-multi th:first-child, .table-multi td:first-child { width: 15%; }
|
|
212
|
+
.table-multi th:not(:first-child), .table-multi td:not(:first-child) { min-width: 80px; max-width: 150px; }
|
|
213
|
+
pre {
|
|
214
|
+
background: #f4f4f4;
|
|
215
|
+
padding: 15px;
|
|
216
|
+
border-radius: 4px;
|
|
217
|
+
overflow-x: auto;
|
|
218
|
+
font-size: 0.9em;
|
|
219
|
+
line-height: 1.4;
|
|
220
|
+
border: 1px solid #ddd;
|
|
221
|
+
margin: 10px 0 10px 20px;
|
|
222
|
+
}
|
|
223
|
+
pre code {
|
|
224
|
+
background: none;
|
|
225
|
+
padding: 0;
|
|
226
|
+
border: none;
|
|
227
|
+
font-size: inherit;
|
|
228
|
+
color: inherit;
|
|
229
|
+
}
|
|
230
|
+
code {
|
|
231
|
+
background: #f0f0f0;
|
|
232
|
+
padding: 2px 6px;
|
|
233
|
+
border-radius: 3px;
|
|
234
|
+
font-family: "Consolas", "Monaco", monospace;
|
|
235
|
+
font-size: 0.9em;
|
|
236
|
+
color: #c7254e;
|
|
237
|
+
}
|
|
238
|
+
blockquote {
|
|
239
|
+
border-left: 4px solid #4a90a4;
|
|
240
|
+
margin: 15px 0 15px 20px;
|
|
241
|
+
padding: 10px 20px;
|
|
242
|
+
background: #f9f9f9;
|
|
243
|
+
color: #555;
|
|
244
|
+
font-style: italic;
|
|
245
|
+
}
|
|
246
|
+
hr {
|
|
247
|
+
border: none;
|
|
248
|
+
border-top: 2px solid #ddd;
|
|
249
|
+
margin: 30px 0;
|
|
250
|
+
}
|
|
251
|
+
a {
|
|
252
|
+
color: #4a90a4;
|
|
253
|
+
text-decoration: none;
|
|
254
|
+
}
|
|
255
|
+
a:hover {
|
|
256
|
+
text-decoration: underline;
|
|
257
|
+
}
|
|
258
|
+
img {
|
|
259
|
+
max-width: 100%;
|
|
260
|
+
height: auto;
|
|
261
|
+
border-radius: 4px;
|
|
262
|
+
}
|
|
263
|
+
strong {
|
|
264
|
+
font-weight: 700;
|
|
265
|
+
color: #1a2332;
|
|
266
|
+
}
|
|
267
|
+
em {
|
|
268
|
+
font-style: italic;
|
|
269
|
+
}
|
|
270
|
+
del {
|
|
271
|
+
text-decoration: line-through;
|
|
272
|
+
color: #999;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.toolbar {
|
|
276
|
+
position: absolute;
|
|
277
|
+
top: 10px;
|
|
278
|
+
right: 10px;
|
|
279
|
+
display: flex;
|
|
280
|
+
gap: 8px;
|
|
281
|
+
user-select: none;
|
|
282
|
+
}
|
|
283
|
+
.toolbar button {
|
|
284
|
+
width: 36px;
|
|
285
|
+
height: 36px;
|
|
286
|
+
border: 1px solid #ddd;
|
|
287
|
+
border-radius: 6px;
|
|
288
|
+
background: white;
|
|
289
|
+
cursor: pointer;
|
|
290
|
+
font-size: 18px;
|
|
291
|
+
display: flex;
|
|
292
|
+
align-items: center;
|
|
293
|
+
justify-content: center;
|
|
294
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
295
|
+
transition: all 0.2s;
|
|
296
|
+
}
|
|
297
|
+
.toolbar button:hover {
|
|
298
|
+
background: #f5f5f5;
|
|
299
|
+
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
|
300
|
+
}
|
|
301
|
+
.toolbar button.active {
|
|
302
|
+
background: #e3f2fd;
|
|
303
|
+
border-color: #4a90a4;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* 右クリックメニュー */
|
|
307
|
+
.context-menu {
|
|
308
|
+
position: fixed;
|
|
309
|
+
background: white;
|
|
310
|
+
border: 1px solid #ddd;
|
|
311
|
+
border-radius: 6px;
|
|
312
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
313
|
+
padding: 6px 0;
|
|
314
|
+
min-width: 160px;
|
|
315
|
+
z-index: 1000;
|
|
316
|
+
display: none;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.context-menu.show {
|
|
320
|
+
display: block;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.context-menu-item {
|
|
324
|
+
padding: 8px 16px;
|
|
325
|
+
cursor: pointer;
|
|
326
|
+
font-size: 14px;
|
|
327
|
+
color: #333;
|
|
328
|
+
display: flex;
|
|
329
|
+
align-items: center;
|
|
330
|
+
gap: 8px;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.context-menu-item:hover {
|
|
334
|
+
background: #f5f5f5;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.context-menu-item.delete {
|
|
338
|
+
color: #f44336;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.context-menu-divider {
|
|
342
|
+
height: 1px;
|
|
343
|
+
background: #eee;
|
|
344
|
+
margin: 6px 0;
|
|
345
|
+
}
|
|
346
|
+
.context-menu-divider.thick {
|
|
347
|
+
height: 2px;
|
|
348
|
+
background: #999;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.edit-mode {
|
|
352
|
+
background-color: #fffdf5;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.edit-mode h1[contenteditable="true"],
|
|
356
|
+
.edit-mode h2[contenteditable="true"],
|
|
357
|
+
.edit-mode h3[contenteditable="true"],
|
|
358
|
+
.edit-mode h4[contenteditable="true"],
|
|
359
|
+
.edit-mode td[contenteditable="true"],
|
|
360
|
+
.edit-mode th[contenteditable="true"],
|
|
361
|
+
.edit-mode p[contenteditable="true"],
|
|
362
|
+
.edit-mode li[contenteditable="true"],
|
|
363
|
+
.edit-mode pre[contenteditable="true"],
|
|
364
|
+
.edit-mode code[contenteditable="true"],
|
|
365
|
+
.edit-mode blockquote[contenteditable="true"] {
|
|
366
|
+
cursor: text;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.edit-mode h1[contenteditable="true"]:focus,
|
|
370
|
+
.edit-mode h2[contenteditable="true"]:focus,
|
|
371
|
+
.edit-mode h3[contenteditable="true"]:focus,
|
|
372
|
+
.edit-mode h4[contenteditable="true"]:focus,
|
|
373
|
+
.edit-mode td[contenteditable="true"]:focus,
|
|
374
|
+
.edit-mode th[contenteditable="true"]:focus,
|
|
375
|
+
.edit-mode p[contenteditable="true"]:focus,
|
|
376
|
+
.edit-mode li[contenteditable="true"]:focus,
|
|
377
|
+
.edit-mode pre[contenteditable="true"]:focus,
|
|
378
|
+
.edit-mode code[contenteditable="true"]:focus,
|
|
379
|
+
.edit-mode blockquote[contenteditable="true"]:focus {
|
|
380
|
+
outline: 2px solid #4a90a4;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
/* サイドバー非表示時 */
|
|
384
|
+
.sidebar.hidden {
|
|
385
|
+
transform: translateX(-100%);
|
|
386
|
+
transition: transform 0.3s ease;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.sidebar {
|
|
390
|
+
transition: transform 0.3s ease;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
@media (max-width: 900px) {
|
|
394
|
+
.sidebar {
|
|
395
|
+
width: 220px;
|
|
396
|
+
}
|
|
397
|
+
.main {
|
|
398
|
+
margin-left: 220px;
|
|
399
|
+
}
|
|
400
|
+
}
|