npm - sunny-html-editor - Versions diffs - 1.0.3 → 1.1.0 - Mend

sunny-html-editor 1.0.3 → 1.1.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.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -4,90 +4,64 @@
 ## 特徴
-- **自己完結型** - 基本機能は外部依存なし
+- **自己完結型** - ツールバー・コンテキストメニューを自動生成
+- **遅延読み込み** - Excel/PDF出力用ライブラリは使用時に自動読み込み
 - **WYSIWYG編集** - 見たまま編集、右クリックで要素追加
 - **キーボード操作** - ↑↓で要素間移動、Shift/Ctrl+Enterで項目追加
 - **多彩なエクスポート** - Markdown、HTML、Excel、PDF
 - **サイドバーナビ** - 目次自動生成
-## 外部ライブラリ依存
-### 必須
-なし（基本機能のみ使用する場合）
-### オプション（Excel/PDF出力に必要）
-| ライブラリ | バージョン | 用途 | CDN |
-|-----------|----------|------|-----|
-| ExcelJS | 4.3.0+ | Excel出力 | https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js |
-| jsPDF | 2.5.1+ | PDF出力 | https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js |
-| html2canvas | 1.4.1+ | PDF出力（HTML→Canvas変換） | https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js |
+## インストール
-Excel/PDF出力を使う場合は、html-editor.jsより**前に**読み込んでください：
+### CDN（推奨）
 ```html
-<!-- 外部ライブラリ（Excel/PDF出力に必要） -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-<!-- HTML Editor -->
-<link rel="stylesheet" href="html-editor.css">
-<script src="html-editor.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
+<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
 ```
-## インストール
 ### npm
 ```bash
 npm install sunny-html-editor
 ```
-### CDN
-```html
-<link rel="stylesheet" href="https://unpkg.com/sunny-html-editor/html-editor.css">
-<script src="https://unpkg.com/sunny-html-editor/html-editor.js"></script>
-```
-### ダウンロード
-`html-editor.css` と `html-editor.js` をダウンロードして読み込み。
 ## 使い方
-### 基本
+`id="editorContainer"` を持つコンテナを用意するだけ。ツールバーとコンテキストメニューは自動生成されます。
 ```html
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
-    <link rel="stylesheet" href="html-editor.css">
+<meta charset="UTF-8">
+<title>ドキュメントタイトル</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">
 </head>
 <body>
-    <div id="content">
-        <h1>タイトル</h1>
-        <p>既存のHTMLコンテンツ</p>
-    </div>
-    <script src="html-editor.js"></script>
-    <script>
-        HtmlEditor.init('#content');
-    </script>
+<div class="layout">
+    <main class="main">
+        <div class="container" id="editorContainer">
+            <h1>タイトル</h1>
+            <h2 id="section1">見出し</h2>
+            <p>本文...</p>
+        </div>
+    </main>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"></script>
 </body>
 </html>
 ```
-### オプション
+## 外部ライブラリ
-```javascript
-HtmlEditor.init('#content', {
-    sidebar: true,   // サイドバー表示（デフォルト: true）
-    toolbar: true    // ツールバー表示（デフォルト: true）
-});
-```
+Excel/PDF出力に必要なライブラリは**使用時に自動で読み込まれます**。事前の読み込みは不要です。
+| ライブラリ | 用途 |
+|-----------|------|
+| ExcelJS | Excel出力 |
+| jsPDF | PDF出力 |
+| html2canvas | PDF出力（HTML→Canvas変換） |
 ## キーボードショートカット
@@ -113,64 +87,33 @@ HtmlEditor.init('#content', {
 テーブル上では行/列の追加・削除も可能。
-## エクスポート
+## ツールバーボタン
-### Markdown
-```javascript
-// ツールバーのⓂ️ボタン、または Ctrl+M
-// クリップボードにコピーされます
-```
+| ボタン | 機能 |
+|--------|------|
+| ↔️ | サイドバー表示/非表示 |
+| 📝 | 編集モード切替 |
+| Ⓜ️ | Markdownコピー |
+| 🌐 | HTMLコピー |
+| 💾 | HTML保存（ダウンロード） |
+| 📊 | Excel出力 |
+| 📕 | PDF出力 |
-### HTML
+## バージョン履歴
-```javascript
-// ツールバーの🌐ボタン
-// クリップボードにコピーされます
-```
-### HTML保存
-```javascript
-// ツールバーの💾ボタン
-// HTMLファイルとしてダウンロード
-```
-### Excel / PDF
-上記の外部ライブラリが読み込まれている必要があります。
-読み込まれていない場合、ボタンを押すとアラートが表示されます。
-## API
-### HtmlEditor.init(selector, options)
-エディタを初期化します。
-- `selector` - コンテナ要素のセレクタまたはDOM要素
-- `options` - オプションオブジェクト
-### 返り値
-HtmlEditorインスタンスを返します。
-```javascript
-var editor = HtmlEditor.init('#content');
-// 編集モード切替
-editor._action_editMode();
-// サイドバー更新
-editor._updateSidebar();
-```
+- **1.1.0** - ツールバー・コンテキストメニュー自動生成、外部ライブラリ遅延読み込み
+- **1.0.3** - nullチェック強化
+- **1.0.2** - DOMContentLoaded自動初期化
+- **1.0.1** - メディアクエリ削除
+- **1.0.0** - 初回リリース
 ## ブラウザ対応
-- Chrome (推奨)
+- Chrome（推奨）
 - Firefox
 - Safari
 - Edge
 ## ライセンス
-MIT
+MIT License - OnMax Group

package/html-editor.js CHANGED Viewed

@@ -1,11 +1,142 @@
 /**
  * Sunny HTML Editor - 軽量WYSIWYGエディタ
- * @version 1.0.3
+ * @version 1.1.0
  */
+// ========== HTML生成関数 ==========
+function getToolbarHtml() {
+    return '<div class="toolbar">' +
+        '<button id="toggleSidebar" title="サイドメニュー表示/非表示 (Ctrl+B)">↔️</button>' +
+        '<button id="editMode" title="編集モード (Ctrl+E)">📝</button>' +
+        '<button id="exportMd" title="Markdownコピー (Ctrl+M)">Ⓜ️</button>' +
+        '<button id="exportHtml" title="HTMLコピー">🌐</button>' +
+        '<button id="saveHtml" title="HTML保存">💾</button>' +
+        '<button id="exportExcel" title="Excel出力">📊</button>' +
+        '<button id="exportPdf" title="PDF出力">📕</button>' +
+    '</div>';
+}
+function getContextMenusHtml() {
+    // テーブル用
+    var tableMenu = '<div class="context-menu" id="contextMenu">' +
+        '<div class="context-menu-item" data-action="addRowBelow">＋ 行を追加</div>' +
+        '<div class="context-menu-item" data-action="addColRight">＋ 列を追加</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteRow">🗑 行を削除</div>' +
+        '<div class="context-menu-item delete" data-action="deleteCol">🗑 列を削除</div>' +
+        '<div class="context-menu-item delete" data-action="deleteTable">🗑 テーブルを削除</div>' +
+        '<div class="context-menu-divider thick"></div>' +
+        '<div class="context-menu-item" data-action="addH2">＋ 大見出し</div>' +
+        '<div class="context-menu-item" data-action="addH3">＋ 中見出し</div>' +
+        '<div class="context-menu-item" data-action="addH4">＋ 小見出し</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addTableBelow">＋ テーブル</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addParagraph">＋ 本文</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addUl">＋ 箇条書き</div>' +
+        '<div class="context-menu-item" data-action="addOl">＋ 番号リスト</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addPre">＋ コードブロック</div>' +
+        '<div class="context-menu-item" data-action="addBlockquote">＋ 引用</div>' +
+    '</div>';
+    // 共通メニュー項目
+    var commonItems =
+        '<div class="context-menu-item" data-action="addH2">＋ 大見出し</div>' +
+        '<div class="context-menu-item" data-action="addH3">＋ 中見出し</div>' +
+        '<div class="context-menu-item" data-action="addH4">＋ 小見出し</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addTable">＋ テーブル</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addParagraph">＋ 本文</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addUl">＋ 箇条書き</div>' +
+        '<div class="context-menu-item" data-action="addOl">＋ 番号リスト</div>' +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item" data-action="addPre">＋ コードブロック</div>' +
+        '<div class="context-menu-item" data-action="addBlockquote">＋ 引用</div>';
+    // h1用
+    var h1Menu = '<div class="context-menu" id="h1ContextMenu">' + commonItems + '</div>';
+    // 見出し用
+    var headingMenu = '<div class="context-menu" id="headingContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteSection">🗑 セクションを削除</div>' +
+    '</div>';
+    // 段落用
+    var paragraphMenu = '<div class="context-menu" id="paragraphContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteParagraph">🗑 本文を削除</div>' +
+    '</div>';
+    // リスト用
+    var listMenu = '<div class="context-menu" id="listContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteList">🗑 リストを削除</div>' +
+    '</div>';
+    // コードブロック用
+    var preMenu = '<div class="context-menu" id="preContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deletePre">🗑 コードブロックを削除</div>' +
+    '</div>';
+    // 引用用
+    var blockquoteMenu = '<div class="context-menu" id="blockquoteContextMenu">' + commonItems +
+        '<div class="context-menu-divider"></div>' +
+        '<div class="context-menu-item delete" data-action="deleteBlockquote">🗑 引用を削除</div>' +
+    '</div>';
+    return tableMenu + h1Menu + headingMenu + paragraphMenu + listMenu + preMenu + blockquoteMenu;
+}
+// ========== 外部ライブラリ遅延読み込み ==========
+var libraryPromises = {};
+function loadScript(src) {
+    if (libraryPromises[src]) return libraryPromises[src];
+    libraryPromises[src] = new Promise(function(resolve, reject) {
+        var script = document.createElement('script');
+        script.src = src;
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+    return libraryPromises[src];
+}
+async function ensurePdfLibraries() {
+    if (!window.jspdf) {
+        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
+    }
+    if (!window.html2canvas) {
+        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js');
+    }
+}
+async function ensureExcelLibrary() {
+    if (!window.ExcelJS) {
+        await loadScript('https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js');
+    }
+}
+// ========== 初期化 ==========
 document.addEventListener('DOMContentLoaded', function() {
     var container = document.getElementById('editorContainer');
-    if (!container) return; // editorContainerがなければ何もしない
+    if (!container) return;
+    // ツールバー挿入
+    container.insertAdjacentHTML('afterbegin', getToolbarHtml());
+    // コンテキストメニュー挿入（bodyの末尾に配置）
+    document.body.insertAdjacentHTML('beforeend', getContextMenusHtml());
+    // ボタン参照取得
     var editModeBtn = document.getElementById('editMode');
     var toggleSidebarBtn = document.getElementById('toggleSidebar');
     var saveHtmlBtn = document.getElementById('saveHtml');
@@ -47,7 +178,25 @@ document.addEventListener('DOMContentLoaded', function() {
         var wasEditMode = isEditMode;
         if (isEditMode && editModeBtn) editModeBtn.click();
-        var html = '<!DOCTYPE html>\n' + document.documentElement.outerHTML;
+        // ツールバーとコンテキストメニューを一時的に非表示
+        var toolbar = container.querySelector('.toolbar');
+        var contextMenus = document.querySelectorAll('.context-menu');
+        if (toolbar) toolbar.style.display = 'none';
+        contextMenus.forEach(function(menu) { menu.style.display = 'none'; });
+        // HTML取得（ツールバーとコンテキストメニューを除外したクリーンなHTML）
+        var docClone = document.documentElement.cloneNode(true);
+        var cloneToolbar = docClone.querySelector('.toolbar');
+        var cloneMenus = docClone.querySelectorAll('.context-menu');
+        if (cloneToolbar) cloneToolbar.remove();
+        cloneMenus.forEach(function(menu) { menu.remove(); });
+        var html = '<!DOCTYPE html>\n' + docClone.outerHTML;
+        // 表示を復元
+        if (toolbar) toolbar.style.display = '';
+        contextMenus.forEach(function(menu) { menu.style.display = ''; });
         if (wasEditMode && editModeBtn) editModeBtn.click();
@@ -104,7 +253,7 @@ document.addEventListener('DOMContentLoaded', function() {
         var toolbar = content.querySelector('.toolbar');
         if (toolbar) toolbar.remove();
-        // 右クリックメニューを除去
+        // 右クリックメニューを除去（念のため）
         content.querySelectorAll('.context-menu').forEach(function(menu) {
             menu.remove();
         });
@@ -130,41 +279,23 @@ document.addEventListener('DOMContentLoaded', function() {
         var h1 = container.querySelector('h1');
         var title = h1 ? h1.textContent.trim() : 'Document';
-        // CSSを取得（サイドバー、リサイザー、ツールバー、右クリックメニュー関連を除外）
-        var styleEl = document.querySelector('style');
-        var css = '';
-        if (styleEl) {
-            css = styleEl.textContent
-                .replace(/\.sidebar[\s\S]*?\}\n/g, '')
-                .replace(/\.sidebar [^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/\.resizer[\s\S]*?\}\n/g, '')
-                .replace(/\.toolbar[\s\S]*?\}\n/g, '')
-                .replace(/\.toolbar [^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/\.context-menu[\s\S]*?\}\n/g, '')
-                .replace(/\.context-menu[^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/\.edit-mode[\s\S]*?\}\n/g, '')
-                .replace(/\.edit-mode [^{]*\{[\s\S]*?\}\n/g, '')
-                .replace(/@media[^{]*\{[\s\S]*?\}\s*\}/g, '')
-                .replace(/\n\s*\n/g, '\n')
-                .trim();
-        }
-        // 完全なHTML構造（CSS含む、ラッパー構造含む）
+        // 完全なHTML構造（外部CSS/JS参照付き）
         var html = '<!DOCTYPE html>\n' +
             '<html lang="ja">\n' +
             '<head>\n' +
-            '    <meta charset="UTF-8">\n' +
-            '    <title>' + title + '</title>\n' +
-            '<style>\n' + css + '\n</style>\n' +
+            '<meta charset="UTF-8">\n' +
+            '<title>' + title + '</title>\n' +
+            '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.css">\n' +
             '</head>\n' +
             '<body>\n' +
             '<div class="layout">\n' +
-            '    <main class="main">\n' +
-            '        <div class="container">\n' +
+            '<main class="main">\n' +
+            '<div class="container" id="editorContainer">\n' +
             innerHtml + '\n' +
-            '        </div>\n' +
-            '    </main>\n' +
             '</div>\n' +
+            '</main>\n' +
+            '</div>\n' +
+            '<script src="https://cdn.jsdelivr.net/npm/sunny-html-editor/html-editor.js"><\/script>\n' +
             '</body>\n' +
             '</html>';
@@ -1371,6 +1502,9 @@ document.addEventListener('DOMContentLoaded', function() {
         exportPdfBtn.textContent = '...';
         try {
+            // ライブラリ遅延読み込み
+            await ensurePdfLibraries();
             // jsPDFインスタンス作成
             var { jsPDF } = window.jspdf;
             var pdf = new jsPDF({
@@ -1573,6 +1707,9 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     async function convertToExcel() {
+        // ライブラリ遅延読み込み
+        await ensureExcelLibrary();
         var content = container.querySelector('.content');
         if (!content) content = container;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "sunny-html-editor",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "軽量WYSIWYGエディタ - 既存のHTMLに編集機能を後付けで追加",
   "main": "html-editor.js",
   "files": [