Facebook
Twitter
RSSיצירת תיבת טקסט עם אפשרויות עריכה
במאמר זה אני אסביר כיצד ניתן ליצור תיבת טקסט עם אפשרויות עריכה תוך שימוש ב Execcommand
דבר ראשון, תיבת טקסט רגילה כגון textarea לא יכולה להכיל תמונות קישורים וכדומה כמו דף רגיל,
לכן נשתמש במשהו שכן יכול לעשות זאת וזה הרי div שבתוכו ניתן לשים כל תגית html אך איך יהיה
ניתן לערוך אותו! פשוט מאד ניתן לו את הערך: contenteditable .
1 <div contenteditable=true style="border:1px solid black"></div>
כעת ניתן להזין לתוכו טקסט: 
כעת לפקודת ה execcommand, הפקודה הזו מאפשרת לנו להכניס תגיות עיצוב שונות, תמונות וכו'
לתוך הdiv שיצרנו. דוגמא לפקודת execcommand:
1 document.execCommand('bold');
הפקודה הזו כפי שניתן להבין ברגע שניגש אליה, כל מה שנרשום יהיה מודגש.
כעת ניראה איך אנו משלבים את זה :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <Html>
<head>
<script language="javascript">
function Docommand(eCommandname)
{
document.getElementById('editor').focus();
document.execCommand(eCommandname);
document.getElementById('editor').focus();
}
</script>
</head>
<body>
<span onclick="Docommand('bold')">Bold</span>
<div contenteditable=true style="border:1px solid black" id="editor"></div>
</body>
הסבר:
קודם כל נלך לחלק של הhtml עם העורך והכפתור: יצרנו span שבעת לחיצה עליו יוביל לפונקציה
Docommand עם הערך שהוא בעצם bold כרגע, בפונקציה התמקדנו על העורך כדי שרק שם יווצר
כתב מודגש ולא בכל הדף, והשתמשנו בexeccommand לפי הערך שהתקבל שהוא bold
ניתן לעשות את אותו הדבר עם :
Underline-קו תחתון
Italic- נטוי
StrikeThrough- קו חוצה
אך כאן לא מסתכמת הפקודה, ניתן ליצור עוד מגוון רחב של אפשרויות עיצוב כגון:
יצירת קישור
יש לרשום בפקודה : createlink
דוגמא:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 <Html>
<head>
<script language="javascript">
function Docommand(eCommandname)
{
document.getElementById('editor').focus();
document.execCommand(eCommandname);
document.getElementById('editor').focus();
}
</script>
</head>
<body>
<span onclick="Docommand('bold')">Bold</span>
|
<span onclick="Docommand('createlink')">Link</span>
<div contenteditable=true style="border:1px solid black" id="editor"></div>
</body>
</html>
עיצוב גופן
ניתן בעזרת פקודה זו גם לשנות את: גודל הגופן, צבעו, בצע הרקע וסגנון הגופן
דוגמא לשימוש:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 <Html>
<head>
<script language="javascript">
function Docommand(eCommandname)
{
document.getElementById('editor').focus();
document.execCommand(eCommandname);
document.getElementById('editor').focus();
}
</script>
</head>
<body>
<span onclick="Docommand('bold')">Bold</span>
|
<span onclick="Docommand('createlink')">Link</span>
|
<select onchange="document.getElementById('editor').focus();document.execCommand('forecolor',false,this[this.selectedIndex].value);document.getElementById('editor').focus()">
<option value="red">אדום</option>
<option value="green" >ירוק</option>
</select>
<div contenteditable=true style="border:1px solid black" id="editor"></div>
</body>
</html>
שימו לב לשורה הבאה:
1 document.execCommand('forecolor',false,this[this.selectedIndex].value)
הפקודה הזו מתבצעת שעת שינוי בבחירה של הרשימה, שם המאפיין עכשיו הוא forecolor (צבע גופן) אותו הדבר ניתן לעשות אם הפקודות הבאות:
Fontsize – גודל גופן
Backcolor- צבע רקע גופן
Fontname – סגנון גופן
כעת ניגש לפקודות Insert: באמצעות הפקודות הללו אפשר להכניס אובייקטים לדף כגון: תמונות, קו ועוד
דוגמא לשימוש:
1 <span onclick="Docommand('InsertHorizontalRule')">Line</span>
פקודה זו תכניס לנו <hr> לדף שהוא בעצם קו אופקי
בעזרת insert ניתן להכניס לדף גם:
InsertUnorderedList – רשימת בועות, כל לחיצת אנטר תוסיף עוד פריט לרשימה.
InsertorderedList – רשימת מספרים.
Insertimage – מכניס תמונה.
צורת התחביר:
1 document.execCommand('insertimage',false,ImageURL)
ה imageURL יהיה הקישור לתמונה והוא יופיע בין גרשיים
עוד פקודות :
Cut- מוחק ומעתיק מה שסומן בתיבה
copy – רק מעתיק בלי למחוק
Paste – מדביק לתיבה אובייקטים שהועתקו
Undo- פעולה קודמת
Redo – פעולה קדימה
DirRTL – מגדיר כתיבה מימן לשמאל
DirLTR – מגדיר כתיבה משמאל לימין
JustifyCenter – ישור לאמצע
Justifyright – ישור לימין
Justifyleft – ישור לשמאל
Outdent – מזיז אובייקטים קדימה
Indent – מזיז אובייקטים אחורה
אלו הפעולות השכיחות, ניתן למצוא רשימה מלאה ב msdn
כדי לקבל את הערך של התיבה יש לעשות : editor.innerHTML
Editor הוא הId שקבעתי בהתחלה לתיבת העיצוב
כדי לקבל את ערך ה html של התיבה יש ליצור textarea ופונקציה שתיקח את התוכן של תיבת
העיצוב (editor.innerHTML) ותהפוך אותו לטקסט בתוך ה textarea וכך יתקבל ה html
דוגמא:
1 EditorHTML.value = editor.innerHTML
ה EditorHTML הוא ה id של ה textarea
ירידת שורה ב div היא בעצם ירידת פיסקה, כדי למנוע את זה יש לתת את פקודת ה css הבאה:
1 P{margin:0}
בהצלחה!
תגובות בפייסבוק