הקדמה
הרבה מאיתנו משתמשים באתריהם באפליקציות שונות המקבלות מלל מהמשתמש.למשל פורומים, דפי קורות חיים ועוד. במקרים רבים היינו רוצים להקל על המשתמש להכניס את המלל ע"י התאמת תנאי הסביבה שבטופס לתנאי סביבת העבודה שמכיר המשתמש (בד"כ MS Word). אולם, תיבת הטקסט הרגילה בה אנו רגילים להשתמש לא נותנת מענה לביצוע תנאים אלו. אמנם, מיקרוסופט עבדו לתקן את המצב הזה בכך שאיפשרו נתינת תכונות עיצוב לאלמנטים שונים של HTML ע"י התכונה contenteditable אולם תכונה זו נתמכת רק בדפדפנים IE5.5 ומעלה.(על תכונה זו ועל איך לבנות עורך טקסט בעזרתה תוכלו לקרוא בקישור הזה ) משתמשים אשר משתמשים באקספלורר מגרסאות קודמות לא יוכלו להנות מהתכונה הזו ולא בטוח שהם המיעוט (win2000 למשל מגיע עם אקספלורר 5.0).
נדרש אם כן פיתרון אחר. ויש !
הקוד
הקוד מחולק ל 3 קבצים.
1. container.asp - קובץ זה מכיל את ה"מעטפת" החיצונית לעורך הטקסט.
2. editor.asp - זהו הקוד של העורך עצמו.
3. resault.asp - קובץ זה מקבל את המלל להכנסה לדטה בייס / הדפסה או כל פעולה אחרת שתרצו.
כמובן שאפשר להשתמש רק בקובץ אחד, אולם ההנחה שלי היתה שנרצה להשתמש בעורך הטקסט בכמה מקומות באתר ולכן, העורך עצמו הוא מעין אובייקט שניתן להכילו בכל דף שנרצה. מה שמשתנה מפעם לפעם היא ה"מעטפת". פעם אחת היא תהיה טופס בפורום, פעם אחרת טופס בדף קורות חיים וכו.
container.asp
דף זה לא מכיל כמעט קוד מסובך. בדף זה יש IFRAME שלתוכה נכניס את קובץ ה editor. כמו כן יש בו טופס עם שדה נסתר שלתוכו נכניס את המלל מתוך ה editor כדי לשלוח לדף ה resault.
שתי הפונקציות שכן קיימות הן:
initEditor() -למצב שבו אנו רוצים לאתחל את העורך עם טקסט קיים. דוגמה: אם נרצה לתת אפשרות עריכת טקטס שכבר מוזן לדטה בייס, נקלוט אותו בתחילת הדף ונשלח אותו לעורך הטקסט.
submitEditor() - המכניסה את המלל מתוך העורך לשדה הנסתר ועושה submit לטופס.
<![CDATA[function submitEditor() {
editorFrame.chgMod("design"); var
editorText=editorFrame.document.idEdit.document.body.innerHTML;
document.editorForm.theText.value=editorText; document.editorForm.submit(); }
]]>
editor.asp
דף זה מכיל את הקוד של העורך. השתדלתי לשמור על קוד כמה שיותר פשוט, כמובן שניתן ורצוי לשפר את הקוד בהרבה ע"י הוספת פונקציות נוספות למניעת טעויות, פונקציות עיצוב נוספות, החלפת הכפתורים בתמונות ועוד.
כאן אנו מגדירים IFRAME ונותנים ל document שבתוכה את התכונה designMode="On" . תכונה זו מאפשרת לנו לכתוב למסמך שכביכול קיים בתוכה.(מידע נוסף על תכונה זו כאן ) שימו לב שלא הגדרנו src למסגרת. כתיבה למסמך שכביכול קיים במסגרת נעשית ע"י הקוד הבא: <![CDATA[ idEdit.document.open()
idEdit.document.write("Place yout text") idEdit.document.close()
]]>
פונקציית העיצוב format(). הפונקצייה מקבלת את ערך העיצוב הרלוונטי ומשתמשת בשיטה document.execCommand עליה תוכלו לקרוא כאן. <![CDATA[ function
format(Faction,FblockTag) { if(editMod=="code") { alert("design buttons availble
only in design mode"); idEdit.focus(); return; }
idEdit.document.execCommand(Faction,"",FblockTag); idEdit.focus();
]]>
על ערכי העיצוב השונים שקיימים תוכלו לקרוא כאן .
פונקציית שינוי מוד chgMod(theMod) מקבלת את המוד הרצוי. אם המוד הוא קוד אזי כל כפתורי העיצוב מקבלים disabled=true והתוכן הופך מ innerHTML ל innerText. אם המוד הוא עיצוב, אז ההפך. <![CDATA[ if(theMod=="code") { var
editContents=idEdit.document.body.outerHTML;
idEdit.document.body.innerText=editContents;
]]>
resault.asp
דף זה מקבל את הנתונים מהשדה הנסתר בטופס המעטפת ומציג אותם למסך. כמובן שאפשר לעשות עם הנתונים דברים אחרים כגון הכנסה למסד נתונים וכו.
סיכום
השתדלתי בקוד שלהלן לשמור על פשטות יתרה. והוא אמור להיות רק בסיס שעליו ניתן לעשות שיפורים. השיפורים הדרושים הם בעיקר בתחום העיצוב - החלפת הכפתורים בתמונות למשל, ובתחום הדיבוג - כתיבת פונקציות נוספות שימנעו טעויות, פונקציות שיעבדו את המלל לפני הכנסה למסד נתונים ועוד. בהצלחה, וכמו שאומר נחום - "תכנות נעים !"
| 
.png)
