איך אפשר לקבל את קוד הhtml של בחירה בטקסט שהמשתמש סימן (הבהרה/בחירה/סימון/highlight selction)
או במקום זה, איך אפשר לעטוף את הבחירה שהמשתמש סימן בדיב, או כל טאג אחר
jquery יתקבל בברכה



אני מתמקד בפיירפוקס


(מה שעשיתי עד עכשיו היה ככה:

קוד PHP:

 var s = 
        $("<div>").append(
            window.getSelection().getRangeAt(0).cloneContents(  )
        ).html(); 


שמשום מה, ככל תמיד כל מני טאגים ריקים שצמחו משום-מקום. ככה שלא יכולתי להשתמש בreplace כדי לעטוף את הבחירה בדיב! )

google...

http://laboratorium.0xab.cd/jquery/...-test/test.html

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/list.png]

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://fresh.clanteam.com/?https://2010-uploaded.fresh.co.il/2010/09/21/52868411.gif,http://www.boredpanda.com/blog/wp-content/themes/mimbo2.2/images/subscribe-panda-605px.png]

קרא: http://www.quirksmode.org/dom/range_intro.html
ותראה ותתנסה: https://2010-uploaded.fresh.co.il/2...9/60361406.html
במסמך ה-html שהעלתי, תסמן טקסט ותוכל לראות את קוד ה-HTML שסימנת בחלון שנוצר מפונקציית alert.
שים לב שהדפדפן מבצע תיקון של קוד ה-HTML במקרה שהסימון שעשית כולל HTML לא תקין. (בדיוק כפי שכתוב בקישור הראשון שכתבתי לך לקרוא)
הקוד היחידי שהוספתי (ושאינו נמצא בקישור הראשון הנ"ל) זה:

קוד:

		document.getElementById("test").onmouseup = function() {
			var outObj= document.getElementById("output");
                        // ...
			var cobj = rangeObject.cloneContents();
			outObj.appendChild(cobj);
			alert(outObj.innerHTML)
			outObj.innerHTML = ''; // reset
			return false;
		}

עריכה:
אגב שים לב כאן שתוכל לגשת לאלמנטים\תגים שעוטפים את הטקסט המסומן בעזרת המאפיינים startContainer ו- endContainer, וכמובן בעזרת parentNode, בצורה הבאה:

קוד:

rangeObject.startContainer.parentNode // the parent node of the (usually) text node that starts the user selection range

תודה רבה! אני חושב שהבעיה נמצאת באמת בעובדה שהדפדפן מבצע תיקון של הקוד.
כי הקוד שלי בנוי בערך ככה:

קוד PHP:

 <b>H</b>
<b>e</b>
<b>l</b>
<b>l</b>
<b>o</b> 


ובתוצאה תמיד נוספו תאגי בי ריקים לפני או אחרי הבחירה..

איך מונעים את זה?

עריכה: גם בדף שהכנת אם אתה בוחר את הסוף של שורה אחת ואת ההתחלה של השורה שהשניה, בהודעה אתה יכול לראות שנוספו תאגים שפותחים וסוגרים את ה
<p>

אני חושב שאין שום מתודה או חבר מחלקה שבעזרתו ניתן להשיג את הקוד ה-"נקי" (אך לא בהכרח תקין) שאתה מחפש.

אבל ננסה לחשוב קצת:

אנחנו יודעים שההשלמה מתרחשת כאשר המשתמש בוחר טקסט,
כלומר כאשר יש text node בתחילת הבחירה של המשתמש וגם בסוף הבחירה שלו,
שזה מה שקורה בדרך כלל.

מטרת ההשלמה שהדפדפן עושה זה לתקן את קוד ה-HTML,
כך שלדוגמא אם יש את קוד ה-HTML הבא:

קוד:

<a1>
	<a2>Hello</a2> World
</a1>

והמשתמש בחר text node משני צידי ה-Range, (לדוגמא בחר ello</a2> Wo)
אז לא הגיוני שייתווספו תגים בצידי הטקסט כי הרי ידוע לנו שהוא בחר text node בעזרת rangeObject.startContainer ו- rangeObject.endContainer (זו הסיבה שציינתי אותם בסוף ההודעה שלי)
לכן פשוט נוריד את התגים שבהתחלה\סוף בהתאם לשאלה: האם קיבלנו text node בצידי ה-range ?
לא משנה כמות התגים - פשוט נוריד אותם מהמחרוזת
(ולא מה-DOM tree כי זה אמור להוריד לך הכל, כולל התוכן שהמשתמש סימן..)
אם ידוע לנו שיש text node.

נ.ב. צריך לראות את תיקון קוד ה-HTML שהדפדפן מבצע בתור יתרון.
אך בכל זאת לדעתי היו צריכים לספק אפשרות שניקח את המחרוזת שהמשתמש סימן בלבד,
ללא תוספות. זה נראה לי מוזר שלא קיימת אפשרות כזאת.

הקטע הוא שאין דרך להגיע לhtml חוץ ממה שעשינו, שזה בעצם לבנות דיב דמיוני וממנו לקחת את הקוד,
אבל או שלא הצלחתי להבין את parentNode, או שיש איתו בעיה בfirefox 4 שלי.

בכל מקרה, אין דרך יותר פשוטה להקיף את הבחירה באלמנט? נגיד למצוא את נקודת ההתחלה ואת נקודה הסיום ולהוסיף בהם "<div>"?!

ציטוט:

הקטע הוא שאין דרך להגיע לhtml חוץ ממה שעשינו, שזה בעצם לבנות דיב דמיוני וממנו לקחת את הקוד,

אם כך מה הבעיה?
אני זוכר שהצלחתי בעבר ליצור ולהשתמש באלמנט בלתי נראה, אלמנט שיצרתי בעץ ה-DOM בעזרת הפונקציות המתאימות.

ציטוט:

בכל מקרה, אין דרך יותר פשוטה להקיף את הבחירה באלמנט? נגיד למצוא את נקודת ההתחלה ואת נקודה הסיום ולהוסיף בהם "<div>"?!

לא נראה לי שקיימת דרך אחרת.

לא הבנתי איפה נתקעת, הבאתי לך פתרון לכל הבעיות...

אז כנראה שלא הבנתי, בעצם את כל מה שהסברת על הtext node

למה אי אפשר פשוט לעשות משהוא כמו:

קוד PHP:

 $(".letter").live("mousedown", function(){
        t=this;
    });
    $(".letter").live("mouseup", function(){
        if(t!=this){
            $(t).before("<div>");
            $(this).after("</div>");
        }
    }); 


זה עוד לא פועל, אבל אני עובד על זה

לפי מה שהבנתי אתה מתייחס למשתנה t בתור האובייקט שהמשתמש סימן.
אי אפשר לעשות את זה פשוט כי זה לא עובד ככה.

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

קוד:

<p>Hello world!</p>

אפשר לראות את זה ככה:

קוד:

<p><text content="Hello world!" /></p>

כשסימון הטקסט מתחיל באות e של המילה Hello, אז הדפדפן מצביע על ה- text node הנ"ל כשההיסט (או אינדקס?) הוא 1.

כשאנחנו מסמנים טווח ורוצים לקבל את קוד ה-HTML שהטווח כולל, אז הדפדפן מבצע תיקון לקוד ה-HTML ע"י הוספת תגים בצדדי המחרוזת כך שהקוד יהיה תקין.

משתני המחלקה rangeObject.startContainer ו- rangeObject.endContainer אלו למעשי האובייקטים (או "נקודות" כפי שכתבתי בתחילה) שסומנו בקצות הטווח.
זה כמו לעשות:

קוד:

document.getElementById('element_name')

ולכן ניתן להשתמש ב-parentNode כדי לזהות את אלמנט האב של ה-"נקודות" הנ"ל,
ובאופן זה גם נוכל להוריד מהמחרוזת את התגים.

למרות שבעצם, עד כמה שאני שם לב, בכל תרחיש אפשרי שבו מסומן text node, אז יתווספו תגי html בקצה המתאים של הנקודה שהיא text node.
ולכן מספיק לזהות האם סומן text node ופשוט להוריד את התגים בהתאם.

נסה לקרוא גם את העמוד שקישרתי אליו: http://www.quirksmode.org/dom/range_intro.html

עכשיו הבנתי יותר טוב, אבל כבר פתרתי את הבעיה בדרך שלי:

קוד PHP:

 $(".letter").live("mousedown", function(){
        t=this;
    });
    $(".letter").live("mouseup", function(){
        if(t!=this){
            $(this).addClass("this");
            $(t).nextUntil(".this")
             .wrapAll("<div>");
            
        }
    }); 


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

עדכון, חזרתי שוב לרנג':

קוד PHP:

 s=window.getSelection().getRangeAt(0).startContain  er.parentNode;
    e=window.getSelection().getRangeAt(0).endContainer  .parentNode;
    
    $(e).addClass("e");
    $(s).nextUntil(".e").wrapAll(
        "div"
    );
    $(".e").removeClass("e");