diff --git a/admin/story-edit.php b/admin/story-edit.php index cb33ebe..6ea130f 100644 --- a/admin/story-edit.php +++ b/admin/story-edit.php @@ -105,9 +105,8 @@ function generateSlug($title) { <div class="form-group"> <label for="description">Description</label> - <textarea id="description" name="description" rows="4" required><?= - htmlspecialchars($story['description'] ?? '') - ?></textarea> + <input type="hidden" id="description" name="description" required> + <div id="descriptionEditor"></div> </div> <div class="form-group"> @@ -158,5 +157,89 @@ function generateSlug($title) { <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script> <script src="../assets/js/story-edit.js"></script> + <script> + document.addEventListener('DOMContentLoaded', function() { + // Configuration de l'éditeur de description - identique à l'éditeur de chapitres + const descriptionEditor = new Quill('#descriptionEditor', { + theme: 'snow', + modules: { + toolbar: { + container: [ + [{ 'header': [1, 2, 3, false] }], + ['bold', 'italic', 'underline', 'strike'], + [{ 'color': [] }, { 'background': [] }], + [{ 'font': [] }], + [{ 'align': [] }], + ['blockquote', 'code-block'], + [{ 'list': 'ordered'}, { 'list': 'bullet' }], + [{ 'script': 'sub'}, { 'script': 'super' }], + [{ 'indent': '-1'}, { 'indent': '+1' }], + [{ 'direction': 'rtl' }], + ['link', 'image', 'video'], + ['divider'], + ['clean'] + ], + handlers: { + image: function() { + const input = document.createElement('input'); + input.setAttribute('type', 'file'); + input.setAttribute('accept', 'image/*'); + input.click(); + + input.onchange = async () => { + const file = input.files[0]; + if (file) { + const formData = new FormData(); + formData.append('image', file); + formData.append('storyId', storyId); + + try { + const response = await fetch('api/upload-image.php', { + method: 'POST', + body: formData + }); + + if (!response.ok) throw new Error('Upload failed'); + + const result = await response.json(); + if (result.success) { + const range = descriptionEditor.getSelection(true); + descriptionEditor.insertEmbed(range.index, 'image', result.url); + descriptionEditor.setSelection(range.index + 1); + } else { + showNotification(result.error || 'Erreur lors de l\'upload', 'error'); + } + } catch (error) { + console.error('Error:', error); + showNotification('Erreur lors de l\'upload de l\'image', 'error'); + } + } + }; + } + } + }, + keyboard: { + bindings: { + tab: false, + 'indent backwards': false + } + } + }, + placeholder: 'Commencez à écrire la description du roman...' + }); + + // Initialiser le contenu si on édite un roman existant + <?php if (isset($story['description'])): ?> + descriptionEditor.root.innerHTML = <?= json_encode($story['description']) ?>; + <?php endif; ?> + + // Mettre à jour le champ caché avant la soumission + const form = document.querySelector('form'); + form.addEventListener('submit', function() { + const description = document.querySelector('#description'); + description.value = descriptionEditor.root.innerHTML; + }); + }); + </script> </body> </html> \ No newline at end of file diff --git a/assets/css/forms.css b/assets/css/forms.css index 8363276..b493cd9 100644 --- a/assets/css/forms.css +++ b/assets/css/forms.css @@ -72,4 +72,36 @@ width: 100%; max-width: 400px; border: 1px solid var(--border-color); +} + +/* Éditeur de la description du roman */ +#descriptionEditor { + height: 300px; + margin-bottom: var(--spacing-md); +} + +#descriptionEditor .ql-container { + height: calc(300px - 42px); +} + +#descriptionEditor .ql-toolbar.ql-snow, +#descriptionEditor .ql-container.ql-snow { + border-color: var(--border-color); +} + +#descriptionEditor .ql-toolbar.ql-snow { + background: var(--bg-secondary); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; +} + +#descriptionEditor .ql-container.ql-snow { + background: var(--input-bg); + border-radius: 0 0 var(--radius-sm) var(--radius-sm); +} + +#descriptionEditor .ql-editor img { + max-width: 100% !important; + height: auto; + display: block; + margin: var(--spacing-md) 0; } \ No newline at end of file