ai-web/resources/views/admin/partials/modern-form-scripts.blade.php

<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<script>
    (function () {
        const previewEndpoint = '{{ route('admin.markdown.preview') }}';
        const uploadEndpoint = '{{ route('admin.uploads.markdown-image') }}';
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const instances = new Map();

        const slugify = (value) => {
            return String(value || '')
                .normalize('NFKD')
                .toLowerCase()
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/[^a-z0-9\u4e00-\u9fa5\s-]/g, '')
                .trim()
                .replace(/[\s_]+/g, '-')
                .replace(/-+/g, '-')
                .replace(/^-|-$/g, '');
        };

        const debounce = (callback, wait = 350) => {
            let timer = null;
            return (...args) => {
                window.clearTimeout(timer);
                timer = window.setTimeout(() => callback(...args), wait);
            };
        };

        const renderPreview = debounce(async (editor, previewElement) => {
            if (!(previewElement instanceof HTMLElement)) {
                return;
            }

            const markdown = editor.value();
            if (!markdown || markdown.trim() === '') {
                previewElement.innerHTML = '<div class="preview-placeholder">在左侧输入 Markdown 内容，这里会实时显示预览。</div>';
                return;
            }

            previewElement.innerHTML = '<div class="text-muted">预览生成中...</div>';

            try {
                const response = await fetch(previewEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ markdown }),
                });

                if (!response.ok) {
                    throw new Error('preview-failed');
                }

                const payload = await response.json();
                if (!payload || payload.success !== true) {
                    throw new Error('preview-failed');
                }

                previewElement.innerHTML = payload.html && payload.html.trim() !== ''
                    ? payload.html
                    : '<div class="preview-placeholder">暂无可预览内容。</div>';
            } catch (_) {
                previewElement.innerHTML = '<div class="text-danger">预览失败，请稍后重试。</div>';
            }
        }, 320);

        const uploadImage = async (file) => {
            const formData = new FormData();
            formData.append('image', file);

            const response = await fetch(uploadEndpoint, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: formData,
            });

            if (!response.ok) {
                throw new Error('upload-failed');
            }

            const payload = await response.json();
            if (!payload || payload.success !== true || !payload.url) {
                throw new Error('upload-failed');
            }

            return payload;
        };

        const markdownForImage = (payload, fileName = 'image') => {
            if (typeof payload.markdown === 'string' && payload.markdown.trim() !== '') {
                return `\n${payload.markdown.trim()}\n`;
            }

            const alt = fileName.replace(/\.[^.]+$/, '');
            return `\n![${alt}](${payload.url})\n`;
        };

        const initEditor = (textarea) => {
            if (!(textarea instanceof HTMLTextAreaElement) || instances.has(textarea.name)) {
                return;
            }

            const easyMde = new EasyMDE({
                element: textarea,
                spellChecker: false,
                autoDownloadFontAwesome: false,
                forceSync: true,
                status: ['lines', 'words'],
                placeholder: textarea.placeholder || '请输入 Markdown 内容',
                toolbar: [
                    'bold',
                    'italic',
                    'heading',
                    '|',
                    'quote',
                    'unordered-list',
                    'ordered-list',
                    '|',
                    'link',
                    'image',
                    'table',
                    '|',
                    'preview',
                    'side-by-side',
                    'fullscreen',
                    '|',
                    'guide',
                ],
            });

            const previewSelector = textarea.getAttribute('data-preview-target');
            const previewElement = previewSelector ? document.querySelector(previewSelector) : null;

            easyMde.codemirror.on('change', () => {
                renderPreview(easyMde, previewElement);
            });

            renderPreview(easyMde, previewElement);
            instances.set(textarea.name, easyMde);
        };

        const connectUploadButtons = () => {
            document.querySelectorAll('.js-md-upload-advanced-btn').forEach((button) => {
                button.addEventListener('click', () => {
                    const fieldName = button.getAttribute('data-editor-target');
                    const editor = fieldName ? instances.get(fieldName) : null;
                    if (!editor) {
                        return;
                    }

                    const input = document.createElement('input');
                    input.type = 'file';
                    input.accept = 'image/*';

                    input.onchange = async () => {
                        const file = input.files?.[0];
                        if (!file) {
                            return;
                        }

                        const originHtml = button.innerHTML;
                        button.disabled = true;
                        button.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>上传中...';

                        try {
                            const payload = await uploadImage(file);
                            editor.codemirror.replaceSelection(markdownForImage(payload, file.name || 'image'));
                        } catch (_) {
                            alert('图片上传失败，请稍后重试');
                        } finally {
                            button.disabled = false;
                            button.innerHTML = originHtml;
                        }
                    };

                    input.click();
                });
            });
        };

        const initSlugAutoFill = () => {
            const pairs = [
                ['input[name="name"]', 'input[name="slug"]'],
                ['input[name="title"]', 'input[name="slug"]'],
            ];

            for (const [sourceSelector, slugSelector] of pairs) {
                const sourceInput = document.querySelector(sourceSelector);
                const slugInput = document.querySelector(slugSelector);
                if (!(sourceInput instanceof HTMLInputElement) || !(slugInput instanceof HTMLInputElement)) {
                    continue;
                }

                let manualEdited = slugInput.value.trim() !== '';
                slugInput.addEventListener('input', () => {
                    manualEdited = slugInput.value.trim() !== '';
                });

                sourceInput.addEventListener('input', () => {
                    if (manualEdited && slugInput.value.trim() !== '') {
                        return;
                    }

                    const suggested = slugify(sourceInput.value);
                    if (suggested !== '') {
                        slugInput.value = suggested;
                    }
                });
            }
        };

        document.querySelectorAll('textarea.js-md-editor-modern').forEach(initEditor);
        connectUploadButtons();
        initSlugAutoFill();
    }());
</script>