שלח תשובה

זירת השאלות

1593
צפיות
10
תשובות

כפתורי bold וכו’ לtextarea

,‏ 7 בפברואר, 2015

היי, ממש כאן בפורום יש אפשרות ללחוץ על כפתורים כמו B ו U.
איך אני יכול לעשות כפתורים כאלה לtextarea שלי בhtml? (או asp.net | js במה שעושים את זה…)
תודה!

10 תשובות

  1. אתה ורצה כמו כאן שזה מכניס תגיות או שזה ממש יציג את הטקסט מודגש?

  2. מה שיותר פשוט ומובן… בלי כל מיני דפי java לא מובנים שמורידים מהאינטרנט…

  3. Roi Trigerman הגיב:

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

    עכשיו נשאר לחשוב אין אתה עושה את זה.

    אפשרות אחת היא לקבוע רצף תווים להתחלה ולסוף של קטע מודגש (כמו מה שקורה פה באתר), ופשוט ליצור כפתור שמוסיף את אותם תוים בהתחלה ובסוף. אחר כך, כשאתה שולף את הטקסט מה-database כדי להציג אותו באתר, לפני הצגה תחליף את התווים בתגיות HTML מתאימות (להדגשה תגית <b> למשל), או בתגית span אם class מסויים (למשל class=bold ), ובקובץ css תוכל לשלוט בצורה יותר מדוייקת בעיצוב.

  4. עד כאן הבנתי… אבל לא הבנתי איך אני גורם לזה שבהתחלה ובסוף קטע מודגש יופיע הטקסט הזה שיש כמו כאן… איך אני מלביש את זה על הטקסט המסומן…
    עוד שאלה זה איך אני מזהה אחר כך איפה זה כתוב… דרך מערך אותיות? איך בדיוק זה קורה?
    סליחה על ריבוי השאלות פשוט זה לא כל כך מסתדר לי בראש…
    תודה רבה!!

  5. Roi Trigerman הגיב:

    נסה את זה:


    <html>
    <head>
    <title></title>
    <style>
    bm {
    font-weight: bolder;
    }
    </style>
    </head>
    <body>
    <h1>Type your text here:</h1>
    <br />
    <input type="button" title="Bold" onclick="BoldSelected()" value="Bold" /><br />
    <textarea id="Editor" class="textAread" cols="50" rows="5"></textarea><br />
    <input type="button" onclick="ShowResult()" value="Show result" /><br />
    The edited text is:<br />
    <div id="lblResult"></div>

    <script>
    function BoldSelected() {
    var textComponent = document.getElementById(‘Editor’);
    var selectedText;

    if (textComponent.selectionStart != undefined) {
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos)
    }

    var startText = textComponent.value.substring(0, startPos);
    var endText = textComponent.value.substring(endPos, textComponent.value.length);

    textComponent.value = startText + ‘<bm>’ + selectedText + ‘</bm>’ + endText;
    return false;
    }

    function ShowResult() {
    var lblResult = document.getElementById(‘lblResult’);
    lblResult.innerHTML = document.getElementById(‘Editor’).value;
    }

    </script>
    </body>
    </html>

    כפתור ההדגשה מוצא את החלק המודגש ומחליף את הטקסט שבתיבת הטקסט בחלק שלפני ההדגשה + תגית BM שהמצאתי + החלק המסומן + סגירת התגית וסוף הטקסט.

    אחר כך הכפתור show results מוסיף את הטקסט כ-html לתוך ה-div שלמטה. כמובן שבמקום להציג את זה ב-div את היכול לשמור את זה ב-database, ואז זה מה שרצית.

    הוספתי style עבור התגית החדשה, שבמקרה הזה פשוט מדגיש את הטקסט (css).

    עכשיו רק נשאר בצד השרת, לפני השמירה ב-database, להפוך את הטקסט לבטוח לשמירה (כי זאת פרצה מאוד גדולה אם למשל המשתמש יחליט לכתוב בתיבת הטקסט קוד sql זדוני… אבל על זה כבר אפשר לכתוב מאמר שלם 🙂

  6. Roi Trigerman הגיב:

    תחליף את השורה שמבצעת את שירשור הטקסט ב:

    if (selectedText != ”) {
    textComponent.value = startText + ‘<bm>’ + selectedText + ‘</bm>’ + endText;
    selectedText = ”;
    }

    כדי לא להדגיש כלום אם לא נבחר כלום, ולנקות את הבחירה למקרה שהמשתמש ילחץ שוב על ה-bold בלי לבחור טקסט שוב.

  7. תודה רבה!!! שאלה אחרונה… יש אפשרות ליצור BR בכל ירידת שורה? בכל פעם שלוחצים אנטר…
    הפתרון היחיד שמצאתי הוא להכניס את התוצאה לתוך תגית pre אבל אני לא כל כך אוהב אותה…
    תודה!!

  8. Roi Trigerman הגיב:

    למרות שהייתה לך בקשה לתשובה שלא כוללת הורדת קבצי javascript מהאינטרנט, הדרישות שלך כבר די מסובכות. המטרה של כל אותם קבצי javascript (שהם בעצם plug-ins) היא בדיוק כדי שלא תצטרך לכתוב דברים כאלו מסובכים בעצמך, כשמישהו כבר עשה את זה קודם, בנוסף גם בדק את זה בצורה מקצועית כך שאין באגים וכו’.

    אם זה היה רק להוסיף הדגשה, קו תחתון והטייה אז אולי.. למרות שלא הייתי ממליץ ללכת בדרך הזאת בכל מקרה, כי אפילו התגית הקטנה שהראיתי לך קודם יכולה לבלבל משתמשים שאולי ינסו למחוק אותה, או להשפיע על שאר עיצוב האתר (אם לא הוגדר ה-css בצורה נכונה – והוא באמת לא הוגדר נכונה בדרך שהראיתי). בקיצור, אפשר למשל לנסות את CKEditor בכתובת http://ckeditor.com/download
    זה דורש לחקור קצת באתר שלהם (או בגוגל) אבל הוא עושה את העבודה.

  9. תודה רבה!! בול!! אמרתי להתרחק כי אני מצאתי לפני כמה ימים משהו דומה ומזעזע… אבל זה נראה טוב…!

  10. היי, אשמח אם תצפה בשאלה הזו ותנסה לעזור לי כמה שתוכל…
    https://webmaster.org.il/faqs/1233
    תודה רבה!!

שלח תשובה