ContentEditable +dynamiske buttons

lav en onbeforeeditfocus event på dit contenteditable element ... i den fundtion får du fat i en TextRange ud fra det sted hcor markøren står ...

lav en funktion som via en parameter får TextRange'ns parentElement - check dette elements nodeName .. er det TD så stop og aktiver dine knapper, hvis ikke forsæt med brug af node.parentNode recurisiv op gennemtræet til du støder på ed TD-node..

Jeg har ikke selv fundet en mere optimal funktion ... så hvis du hitter ud af noget hører jeg gerne om det :)

...og undskyld min ustylige stavning ...

Takker, dette syntes jeg var en optimal løsning, og passet perfekt inn i min situasjon. Jeg er norsk og legger ikke merke til din stavemåte ;-)

Thomas A.

<ole>

Du kunne vel også lægge en onclick-handler på hver div'et:

<div contenteditable
    onclick="alert('Elementets tag: '+event.srcElement.tagName+'\nCellens tekst: '+event.srcElement.innerHTML);">
<table cellspacing="5" cellpadding="0" border="1">
<tr>
    <td>BLABLA 0</td>
    <td>BLABLA 1</td>
    <td>BLABLA 3</td>
    <td>BLABLA 4</td>
</tr>
</table>
</div>

/mvh
</bole>

Hvad så i tilfældet hvor der er tags i td'en ... f.eks:
..
<td>blablab <span> jeg trykker her ... </span> bla bla </td>
..

Så tæller man naturligvis rekursivt op gennem træet, til en <td> nåes. Men man slipper stadig med en betydelig enklere løsning end, hvis man ustandselig skal oprette et hav af textRanges.

Ikke mindst kan det have væsentlig betydning i større JS-applikationer (som f.eks. et avanceret CMS) - og ikke mindst i IE, som jo er herostratisk berømt for sin elendige garbage-collection  :)
/mvh

En lidt 'sexy' løsning kunne være:

<script type="text/JavaScript">
var actTD = false;
function bla(elm) {
    for (i=0; elm.tagName!="TD"; i++,elm=elm.parentElement);
    actTD = elm;
}
</script>

<div contenteditable onclick="bla(event.srcElement)">
<table cellspacing="5" cellpadding="0" border="1">
<tr>
    <td>BLABLA 0</td>
    <td><span>Dette ligger i et span </span>BLABLA 1</td>
    <td>BLABLA 3</td>
    <td>BLABLA 4</td>
</tr>
</table>
</div>

<button onclick="if(actTD)alert(actTD.innerHTML)">TEST FOR AKTIV TD</button>

Eller bedre:

<script type="text/JavaScript">
var actTD = false;
function bla(elm) {
    for (i=0; elm.tagName!="TD"&&elm.id!="editor"; i++,elm=elm.parentElement );
    return (elm.tagName=="TD")? elm : false;
}
</script>

<div id="editor" contenteditable onclick="actTD=bla(event.srcElement)">
<table cellspacing="5" cellpadding="0" border="1">
<tr>
    <td>BLABLA 0<br>
    <table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td>Celle i nested tabel</td>
    </tr>
    </table>
    </td>
    <td><span>Dette ligger i et span </span>BLABLA 1</td>
    <td>BLABLA 3</td>
    <td>BLABLA 4</td>
</tr>
</table>
<div><b>Tekst udenfor TD</b></div>
</div>
<button onclick="if(actTD)alert(actTD.innerHTML)">TEST FOR AKTIV TD</button>

/mvh

hohoho - en noget mere optimeret løsning på jeg sige når man tænker på Thomas' spørgsmål (at den sku 'aktivere' en knap) :) ...

..forøvrigt ... accepterer du mit svar Thomas, eller hur ??!

Ehhhhh ...... hvordan i alverden ville du lave en løsning, uden at kende resten af koden? Det burde vel ikke være et problem, når der er en global variabel at spørge på  :o)
/mvh

så lad os kalde det et løsningsforslag ... og kun stilet til dette isolerede spørgsmål ... resten af koden eller hele applikationen kender jeg seføli ingenting til

Det glæder mig, vi er enige om, det vr noget vrøvl, du fik skrevet i (30/10-2003 22:53:11)  :)
/mvh

Sånn smirnoff, ditt svar er akseptert, løsningen din fungerer bra så langt ;-)