feat: integrate Quill rich text editor in admin templates

- Add Quill editor to content-page-edit.html
- Add Quill editor to vendor-product-edit.html
- Add Quill snow theme CSS
- Update background-tasks.html and platform-homepage.html templates

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-13 20:37:54 +01:00
parent 29a3bf3989
commit 013d8e3d10
5 changed files with 165 additions and 53 deletions

View File

@@ -2,11 +2,20 @@
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
{% from 'shared/macros/headers.html' import page_header_flex, action_button %}
{% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}
{% block title %}Platform Homepage Manager{% endblock %}
{% block alpine_data %}platformHomepageManager(){% endblock %}
{% block quill_css %}
{{ quill_css() }}
{% endblock %}
{% block quill_script %}
{{ quill_js() }}
{% endblock %}
{% block content %}
{# Note: Subtitle has inline HTML link, so using page_header_flex with custom structure #}
<div class="flex items-center justify-between my-6">
@@ -128,18 +137,15 @@
<!-- Content (HTML) -->
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Content (HTML)
</label>
<textarea
x-model="page.content"
rows="6"
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 font-mono text-sm"
placeholder="<p>Your platform description here...</p>"
></textarea>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
HTML content shown below the title. Basic HTML tags are supported.
</p>
{{ quill_editor(
id='homepage-content-editor',
model='page.content',
label='Content',
placeholder='Write your platform description here...',
min_height='200px',
toolbar='standard',
help_text='HTML content shown below the title. Use the toolbar to format text, add links, and images.'
) }}
</div>
</div>