הבדלים בין גרסאות בדף "עריכת טקסט מסומן"

מתוך וויקי
קפיצה אל: ניווט, חיפוש
מ (monospace)
 
(19 גרסאות ביניים של 6 משתמשים אינן מוצגות)
שורה 3: שורה 3:
 
לא פעם קורה שאנחנו רוצים לאפשר למשתמש באתר (במסגרת הודעות בפורומים וכדומה) לעצב את הטקסט הנשלח. יש לנו כמה אפשרויות כדי לבצע את זה:
 
לא פעם קורה שאנחנו רוצים לאפשר למשתמש באתר (במסגרת הודעות בפורומים וכדומה) לעצב את הטקסט הנשלח. יש לנו כמה אפשרויות כדי לבצע את זה:
  
1) להשתמש בדרך הפשוטה של הוספת תג פותח בסוף ה-textarea (ע"י לחיצה על כפתור) שהמשתמש יכניס טקסט ושיסגור את התג ע"י לחיצה על כפתור נוס. כך תיראה הפונקציה:
+
1. להשתמש בדרך הפשוטה של הוספת תג פותח בסוף ה-textarea (ע"י לחיצה על כפתור) - המשתמש יכניס טקסט ויסגור את התג ע"י לחיצה על כפתור נוסף. כך תיראה הפונקציה:
 
 
[code]
 
 
 
function addTags(tag,textAreaId){
 
 
 
document.getElementById(textAreaId+""),value+=tag
 
  
 +
<monospace dir="ltr">
 +
function addTags(tag, textAreaId)
 +
{
 +
  document.getElementById(textAreaId + "").value += tag;
 
}
 
}
 +
</monospace>
  
[code]
+
'''יתרון:'''- פשוט ועובד בכל הדפדפנים.
  
'''יתרון:'''- פשוט ועובד בכל הדפדפנים בלי שינוי בקוד
+
'''חיסרון:''' - יכול להיות שהמשתמש לא יקפיד לסגור תגיות .
  
'''חיסרון:''' - יכול להיות שהמשתמש לא יסגור תגיות .
+
2) שימוש באובייקט ה-Selection של IE ובשלוש תכונות של textarea הנתמכות רק במוזילה (וכמובן גם ב-Netscape 6 ומעלה ובכל דפדפן מבוסס גקו). ע"י שימוש בנ"ל אנו יכולים לתת למשתמש אפשרות לסמן טקסט מסויים ואז לעטוף אותו בתגיות העיצוב שהמשתמש בחר או שהמשתמש פשוט יכתוב בין תגית הפתיחה והסגירה שהוספנו אוטומטית ל-textarea. הפונקציה תיראה כך:
  
2) שימוש באובייקט ה-Selection של IE ובשלושה תכונות של textarea הנתמכות רק במוזילה(NS6 ומעלה). ע"י שימוש בנ"ל אנו יכולים לתת למשתמש אפשרות לסמן טקסט מסויים ואז לעטוף אותו בתגיות העיצוב שהמשתמש בחר או שהמשתמש פשוט יכתוב בין תגית הפתיחה והסגירה שהוספנו אוטומטית ל-textarea. הפונקציה תיראה כך:
+
<monospace dir="ltr">
 +
function addtoForm(openTag, closeTag, textAreaId)
 +
{
 +
  // Add tags code to textarea
 +
  var txtAr = document.getElementById(""+textAreaId), oRange;
 +
  txtAr.focus();
  
[code]
+
  if (document.selection && document.selection.createRange)
function addtoForm(openTag, closeTag, textAreaId){ /// Add tags code to textarea
+
  {
 +
    oRange = document.selection.createRange();
 +
   
 +
    // Create Range object form the selected Text
 +
    if (oRange.parentElement()==txtAr)
 +
    {
 +
      // Check if the parent of the Range object is our textarea
 +
      // add the tags before and after the selected text
 +
      oRange.text = openTag+oRange.text+closeTag;
 +
    }
 +
  }
 +
  else if(MOZ)
 +
  {
 +
    // fint the length of the selected text
 +
    var txtLength = parseInt(txtAr.textLength);
 +
    // find the start position
 +
    var selStart = txtAr.selectionStart;
 +
    // find the end position
 +
    var selEnd = txtAr.selectionEnd;
  
var txtAr = document.getElementById(""+textAreaId), oRange
+
    if (selEnd == 2 || selEnd == 1)
 +
    {
 +
      selEnd = txtLength;
 +
    }
  
txtAr.focus()
+
    // text before the selected text
 +
    var sect1 = (txtAr.value).substring(0,selStart);
 +
    // the selected text
 +
    var sect2 = (txtAr.value).substring(selStart,selEnd);
 +
    // text after the selected text
 +
    var sect3 = (txtAr.value).substring(selEnd,txtLength);
 +
    // add the tags before and after the selected text
 +
    txtAr.value = sect1 + openTag+sect2 + closeTag+sect3;
  
if (document.selection && document.selection.createRange){
+
    txtAr.focus();
  
oRange=document.selection.createRange(); /// Create Range object form the selected Text
+
  }
 +
  else
 +
    document.getElementById(textAreaId+"").value+=tag;
 +
}
 +
</monospace>
  
if (oRange.parentElement()==txtAr){  /// Check if the parent of the Range object is our textarea
+
----
 
+
'''תרמו לדף זה''': [http://www.webmaster.org.il/members/?userID=2287 ניר טייב] ואחרים.
oRange.text= openTag+oRange.text+closeTag /// add the tags before and after the selected text
 
 
 
}
 
 
 
}else if(MOZ){
 
 
 
var txtLength = parseInt(txtAr.textLength) // fint the length of the selected text
 
 
 
var selStart=txtAr.selectionStart  /// find the start position
 
 
 
var selEnd=txtAr.selectionEnd /// find the end position
 
 
 
if (selEnd==2 || selEnd==1){
 
 
 
selEnd=txtLength
 
 
 
}
 
 
 
var sect1 = (txtAr.value).substring(0,selStart) /// text before the selected text
 
 
 
var sect2 = (txtAr.value).substring(selStart,selEnd) // the selected text
 
 
 
var sect3 = (txtAr.value).substring(selEnd,txtLength) /// text after the selected
 
text
 
txtAr.value = sect1+openTag+sect2+closeTag+sect3  /// add the tags before and after the selected text
 
 
 
txtAr.focus()
 
 
 
}else{
 
 
 
return (alert("your browser is not supported by us\ only Mozilla(NS6 & higher) AND IE\n thanks"),false)
 
}
 
 
 
}
 
[code]
 
  
בהצלחה :-)
+
[[טיפים לבוני אתרים]]
 +
[[קטגוריה:מפתחי אתרים]]

גרסה אחרונה מ־14:24, 23 באוקטובר 2006

עריכת טקסט מסומן מ-textarea

לא פעם קורה שאנחנו רוצים לאפשר למשתמש באתר (במסגרת הודעות בפורומים וכדומה) לעצב את הטקסט הנשלח. יש לנו כמה אפשרויות כדי לבצע את זה:

1. להשתמש בדרך הפשוטה של הוספת תג פותח בסוף ה-textarea (ע"י לחיצה על כפתור) - המשתמש יכניס טקסט ויסגור את התג ע"י לחיצה על כפתור נוסף. כך תיראה הפונקציה:

<monospace dir="ltr"> function addTags(tag, textAreaId) {

 document.getElementById(textAreaId + "").value += tag;

} </monospace>

יתרון:- פשוט ועובד בכל הדפדפנים.

חיסרון: - יכול להיות שהמשתמש לא יקפיד לסגור תגיות .

2) שימוש באובייקט ה-Selection של IE ובשלוש תכונות של textarea הנתמכות רק במוזילה (וכמובן גם ב-Netscape 6 ומעלה ובכל דפדפן מבוסס גקו). ע"י שימוש בנ"ל אנו יכולים לתת למשתמש אפשרות לסמן טקסט מסויים ואז לעטוף אותו בתגיות העיצוב שהמשתמש בחר או שהמשתמש פשוט יכתוב בין תגית הפתיחה והסגירה שהוספנו אוטומטית ל-textarea. הפונקציה תיראה כך:

<monospace dir="ltr"> function addtoForm(openTag, closeTag, textAreaId) {

 // Add tags code to textarea
 var txtAr = document.getElementById(""+textAreaId), oRange;
 txtAr.focus();
 if (document.selection && document.selection.createRange)
 {
   oRange = document.selection.createRange(); 
   
   // Create Range object form the selected Text
   if (oRange.parentElement()==txtAr)
   {
     // Check if the parent of the Range object is our textarea
     // add the tags before and after the selected text
     oRange.text = openTag+oRange.text+closeTag; 
   }
 }
 else if(MOZ)
 {
   // fint the length of the selected text
   var txtLength = parseInt(txtAr.textLength);
   // find the start position
   var selStart = txtAr.selectionStart;
   // find the end position
   var selEnd = txtAr.selectionEnd;
   if (selEnd == 2 || selEnd == 1)
   {
     selEnd = txtLength;
   }
   // text before the selected text
   var sect1 = (txtAr.value).substring(0,selStart);
   // the selected text
   var sect2 = (txtAr.value).substring(selStart,selEnd);
   // text after the selected text
   var sect3 = (txtAr.value).substring(selEnd,txtLength);
   // add the tags before and after the selected text
   txtAr.value = sect1 + openTag+sect2 + closeTag+sect3;
   txtAr.focus();
 }
 else
   document.getElementById(textAreaId+"").value+=tag;

} </monospace>


תרמו לדף זה: ניר טייב ואחרים.

טיפים לבוני אתרים