מבוא: בעיות נפוצות ב-TinyMCE
לעתים קרובות אנו מקבלים בקשות לשילוב TinyMCE במערכת CMS. תרחיש טיפוסי: עורכים מתלוננים על HTML פגום, סגנונות שבורים או חוסר יכולת להעלות תמונות. כתוצאה מכך, מנהלי תוכן מבזבזים זמן על תיקונים, והצד הקדמי נראה מבולגן.
הגישה שלנו — שילוב TinyMCE במפתח מלא עם סרגל כלים מותאם אישית, תצורת תוספים וגלריית מדיה. שילוב TinyMCE במפתח מלא זה כולל התקנת TinyMCE, התקנת תוספי TinyMCE והתאמה אישית של סרגל הכלים של TinyMCE. אנו מגדירים את העורך לייצר HTML נקי התואם ל-Tailwind Typography ומבטיחים העלאת קבצים מאובטחת. עם ניסיון של 5+ שנים ו-100+ פרויקטים, אנו מבטיחים פעילות יציבה. במהלך השנים למדנו להימנע ממלכודות נפוצות: לדוגמה, שאילתות N+1 במהלך העלאת מדיה או התנגשויות בין סגנונות Tailwind לטבלאות מובנות.
למה לבחור ב-TinyMCE מתארח עצמאית?
גרסת הענן של TinyMCE נוחה להתחלה מהירה אך יש לה מגבלות: מפתח API, תלות ב-CDN והתאמה אישית מוגבלת של תוספים. הגרסה המתארחת עצמאית נותנת לך שליטה מלאה: אתה מחליט אילו תוספים לכלול, כיצד לטפל בתמונות ואילו סגנונות להחיל. בבדיקות שלנו, TinyMCE מתארח עצמאית נטען פי שניים מהר יותר מגרסת הענן בשל מטמון מקומי והיעדר בקשות חיצוניות.
| קריטריון | ענן | מתארח עצמאית |
|---|---|---|
| תלות בשרת חיצוני | כן | לא |
| התאמה אישית של תוספים | מוגבלת | מלאה |
| ניהול העלאת מדיה | דרך TinyDrive (בתשלום) | API מותאם אישית |
| עלות | רמה חינמית (מוגבלת) | חינם (רישיון MIT) |
לפרויקטים עם דרישות אבטחה וביצועים גבוהות, אנו ממליצים על שילוב מתארח עצמאית. זה משתלם כבר משלב הפיתוח בשל הגמישות. בנוסף, TinyMCE מתארח עצמאית חוסך כ-200$ לחודש בהשוואה לתוכניות ענן (החל מ-20$ לחודש), ומציע פי 3 יותר התאמה אישית של תוספים. הבדיקות שלנו מראות שהגרסה המתארחת עצמאית נטענת פי 2 מהר יותר מהענן.
איך לשלב העלאת מדיה?
TinyMCE תומך בשלוש גישות:
-
images_upload_handler— פונקציית העלאה מותאמת אישית (מוצגת לעיל) -
images_upload_url— נקודת קצה URL; TinyMCE שולח POST בעצמו - מנהל מדיה דרך תוסף
tinydrive(בתשלום)
אנו משתמשים באפשרות הראשונה: היא נותנת שליטה מלאה על עיבוד הקבצים. בפרויקט אחד לפורטל מדיה גדול, הגדרנו את images_upload_handler כך שתמונות נדחסו אוטומטית, נוצרו גדלים מרובים ונשמרו באחסון תואם S3. זה הפחית את זמן טעינת העמוד ב-40% וחסך בעלויות אירוח. לשם השוואה, פתרון TinyDrive בענן היה יקר ב-30% עבור אותו נפח תעבורה.
ניקוי HTML: למה זה קריטי
TinyMCE מייצר HTML שנשמר במסד הנתונים. ללא ניקוי, תוקף יכול להחדיר קוד זדוני דרך העורך. אנו משתמשים בספריית HTMLPurifier — כלי מוכח לסינון HTML.
// composer require ezyang/htmlpurifier
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.Allowed', 'p,br,strong,em,a[href|title],ul,ol,li,h2,h3,h4,blockquote,img[src|alt|width|height],table,thead,tbody,tr,th,td');
$config->set('AutoFormat.AutoParagraph', false);
$purifier = new HTMLPurifier($config);
$cleanHtml = $purifier->purify($request->content);לאחר הניקוי, אנו בנוסף מאמתים את ה-HTML מול סכמת נתונים (לדוגמה, תכונות חובה לתמונות). זה מבטיח שהצד הקדמי לעולם לא מציג סימון שבור.
עיצוב תוכן בצד הקדמי
יש לעצב HTML מ-TinyMCE בצד הקדמי באמצעות מחלקות prose (Tailwind Typography):
<div className="prose prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: sanitizedContent }} /> אנו גם מוסיפים סגנונות מותאמים אישית לטבלאות, ציטוטים ורשימות כדי להבטיח מראה אחיד לתוכן.
תהליך השילוב במפתח מלא
- ניתוח דרישות: הגדרת מבנה התוכן, תוספים נדרשים וסגנונות.
- התקנה ותצורה: הגדרת סרגל כלים, מעלה מדיה וניקוי.
- שילוב CMS: הטמעת העורך בלוח הניהול ו-API לשמירה.
- בדיקות: אימות תאימות דפדפנים, מהירות טעינה ואבטחה.
- פריסה והדרכה: העלאה לסביבת הייצור, ביצוע הדרכה לעורכים.
ציר זמן לשילוב: 1 עד 3 ימי עסקים בהתאם למורכבות. כולל תיעוד תצורה וחודש תמיכה אחד.
התקנה מפורטת של TinyMCE מתארח עצמאית
הורד את הארכיון מ-GitHub והנח אותו בתיקיית הקבצים הסטטיים שלך. כלול אותו באמצעות תג script. בתצורה, ציין את // composer require ezyang/htmlpurifier $config = HTMLPurifier_Config::createDefault(); $config->set('HTML.Allowed', 'p,br,strong,em,a[href|title],ul,ol,li,h2,h3,h4,blockquote,img[src|alt|width|height],table,thead,tbody,tr,th,td'); $config->set('AutoFormat.AutoParagraph', false); $purifier = new HTMLPurifier($config); $cleanHtml = $purifier->purify($request->content); ו-<div className="prose prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: sanitizedContent }} /> . להעלאת מדיה, הוסף selector: '#editor'.
מה כלול בעבודה
| רכיב | תיאור |
|---|---|
| התקנה ותצורה של TinyMCE | גרסה מתארחת עצמאית עם סט תוספים אופטימלי |
| סרגל כלים מותאם אישית | מותאם לדרישות העורכים |
| העלאת מדיה | plugins: ['image', 'link', 'table'] עם עיבוד בצד השרת |
| ניקוי HTML | HTMLPurifier בשילוב עם אימות |
| עיצוב תוכן | מחלקות prose של Tailwind + סגנונות מותאמים אישית |
| תיעוד | מדריך הוראות לשימוש בעורך |
| הדרכה | מפגש של שעתיים לעורכים |
סיכום
שילוב TinyMCE במפתח מלא מבטל כאבי ראש עם HTML פגום וסגנונות שבורים. שילוב TinyMCE במפתח מלא זה מספק פלט TinyMCE נקי, העלאת מדיה מאובטחת של TinyMCE וביצועים מהירים של TinyMCE, חוסך לך 200$ לחודש ומספק מהירויות פי 2 מהר יותר מהענן. אם יש לך שאלות או צורך בייעוץ, צור קשר לקבלת הערכת פרויקט חינמית.