Kirim Artikel

Kirim Postingan Anda Nama Anda: Isi Artikel (minimal 500 kata): 0 kata Kirim Artikel /* Styling dasar untuk formulir Anda (sama seperti sebelumnya) */ .blog-post-form-container { max-width: 700px; margin: 20px auto; padding: 25px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fcfcfc; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .blog-post-form-container h2 { text-align: center; color: #333; margin-bottom: 25px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 7px; font-weight: bold; color: #555; } .form-group input[type="text"] { width: calc(100% - 20px); padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 1em; } /* Styling untuk Quill.js editor */ #editor-container { border: 1px solid #ccc; border-radius: 5px; font-size: 1em; background-color: white; } .ql-toolbar { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #ccc; /* Pemisah toolbar dan editor */ } .ql-container { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .word-count { font-size: 0.85em; color: #666; margin-top: 5px; text-align: right; } button[type="submit"] { display: block; width: 100%; padding: 12px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; } button[type="submit"]:hover { background-color: #0056b3; } button[type="submit"]:disabled { background-color: #cccccc; cursor: not-allowed; } .response-message { padding: 15px; margin-top: 20px; border-radius: 5px; font-weight: bold; text-align: center; } .response-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .response-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('blogPostForm'); const submitButton = document.getElementById('submitButton'); const responseMessageDiv = document.getElementById('responseMessage'); const artikelHiddenInput = document.getElementById('artikel'); const wordCountDiv = document.getElementById('wordCount'); // GANTI DENGAN URL Aplikasi Web Apps Script Anda yang sudah di-deploy const appsScriptUrl = 'https://script.google.com/macros/s/AKfycbwRDnh7jbZ7NoPLZTvOtGtZvsYJ-h1CXJzV7p508WuFeKmJkmGLlQiG2n9hf1RD8O9j-Q/exec'; // <--- GANTI DI SINI // Inisialisasi Quill editor const quill = new Quill('#editor-container', { theme: 'snow', modules: { toolbar: [ [{ 'header': [1, 2, 3, false] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'indent': '-1'}, { 'indent': '+1' }], ['link', 'image'], // Tombol 'image' kembali di sini! [{ 'align': [] }], ['clean'] ] // Quill secara otomatis akan mengelola penyisipan gambar base64 ke dalam editor. // Tidak perlu handler image tambahan di frontend. } }); const updateWordCount = () => { const text = quill.getText(); // Mendapatkan teks biasa dari editor const words = text.split(/\s+/).filter(word => word.length > 0); wordCountDiv.textContent = `${words.length} kata`; if (words.length { event.preventDefault(); responseMessageDiv.style.display = 'none'; responseMessageDiv.className = 'response-message'; submitButton.disabled = true; submitButton.textContent = 'Mengirim...'; // Ambil konten HTML dari Quill editor dan masukkan ke input hidden artikelHiddenInput.value = quill.root.innerHTML; // Validasi panjang artikel di frontend const textContent = quill.getText(); // Gunakan teks biasa dari editor const words = textContent.split(/\s+/).filter(word => word.length > 0); if (words.length < 500) { responseMessageDiv.textContent = `Artikel Anda harus minimal 500 kata. Saat ini ada ${words.length} kata.`; responseMessageDiv.classList.add('error'); responseMessageDiv.style.display = 'block'; submitButton.disabled = false; submitButton.textContent = 'Kirim Artikel'; return; } const formData = new FormData(form); const params = new URLSearchParams(); // Semua data yang ada di formData (nama, dan artikel HTML) akan ditambahkan for (const [key, value] of formData.entries()) { params.append(key, value); } await sendData(params); }); async function sendData(params) { try { const response = await fetch(appsScriptUrl, { method: 'POST', body: params }); const data = await response.json(); if (data.status === 'success') { responseMessageDiv.textContent = data.message; responseMessageDiv.classList.add('success'); form.reset(); quill.setText(''); // Kosongkan editor Quill updateWordCount(); } else { responseMessageDiv.textContent = data.message || 'Pengiriman gagal. Mohon coba lagi.'; responseMessageDiv.classList.add('error'); } } catch (error) { console.error('Error saat mengirim formulir:', error); responseMessageDiv.textContent = 'Terjadi kesalahan jaringan. Mohon coba lagi.'; responseMessageDiv.classList.add('error'); } finally { responseMessageDiv.style.display = 'block'; submitButton.disabled = false; submitButton.textContent = 'Kirim Artikel'; } } });