Avanceret tabel-funktion til WYSIWYG-editor

insrow = indsætter rows
delrow = sketter rows

inscol = indsætter cols
delcol = sletter cols

og så noget ala

<SCRIPT LANGUAGE=JavaScript FOR=btnInsRow EVENT=onclick>
    var arr = new Array();
    arr["action"] = "insrow"
    window.returnValue = arr;
    window.close();
</SCRIPT>

Split af celler og rækker ved jeg ikke umiddelbart

Det skulle jo gerne virke i forbindelse med noget execCommand eller lignende.
Det dér ligner meget IE's editor, som jo netop bygger på de dér objects... Eller hvad?

Nej det er det nu ikke. Dog var det en lidt hovedløs kommentar (insrow er er blot en midlertidlig definition i et popvindue i min editor).

mail mig lige, så skal jeg vise dig hvad jeg mener.

hmmm - er også meget interesseret i denne problemstilling. Er det muligt at kommunikationen kunne forblive herinde ?

:-)

Hmm - den korte

Med udgangspunkt i ovenstående laver man så en updateTable funktion indeholdende bla.:

if(arr["action"]=="insrow")tableInsertRow();

hvor tableInserRow() kunne se sådan ud

var oSel_Table //selection state
var sType_Table
function TableInsertRow()    {
    var oSel = oSel_Table
    var oBlock = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"))
    var elRow = oBlock.insertRow()
    for (var i=0;i<oBlock.rows[0].cells.length;i++) { //num of cols
        var elCell = elRow.insertCell()
        elCell.innerHTML = "&nbsp;"
    }   
}

1: jeg åbner en dialog hvor jeg bl.a. indsætter rows, aligner min tabel osv

Først skal onload på plads:

<SCRIPT LANGUAGE=JavaScript FOR=window EVENT=onload>
if(window.dialogArguments["EditTable"]) {
  //Create & Edit
  for ( elem in window.dialogArguments ) {
    switch(elem) {
      case "border":
        borderformfelt.value = window.dialogArguments["border"];
    break;
  }
}
</SCRIPT>

Den kan så indeholde fx. en knap til at indsætte en row med

<input type="button" value="Indsæt række" id="btnInsRow" name="btnInsRow">

2: Tilbage i editoren laver jeg så først en indsæt row funktion

//Tables
var oSel_Table //selection state
var sType_Table
function TableInsertRow()    {
    var oSel = oSel_Table
    var oBlock = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"))
    var elRow = oBlock.insertRow()
    for (var i=0;i<oBlock.rows[0].cells.length;i++) { //num of cols
        var elCell = elRow.insertCell()
        elCell.innerHTML = "&nbsp;"
    }   
}


Dertil kommer selve tabel funktionen hvor jeg åbner ovenstående dialog med:

function TablePopup() {
    idContent.focus() //idContent er min iframe
    var oSel    = idContent.document.selection.createRange()
    var sType = idContent.document.selection.type
       
    oSel_Table = oSel
    sType_Table = sType

    var oBlock = (oSel.parentElement != null ? GetElement(oSel.parentElement(),"TABLE") : GetElement(oSel.item(0),"TABLE"))
    if (oBlock!=null) {
          var args = new Array();
          var arr = null;
          args["EditTable"] = true
          args["borderColor"] = oBlock.borderColor
                // hertil kan komme align, farver osv. osv.
          arr = null;
          arr = showModalDialog("instable.html",args,"dialogWidth:23em;dialogHeight:25em;");//Her åbnes dialogen       
    } else {
          var args = new Array();
          var arr = null;   
          args["EditTable"] = false
          arr = null;
          arr = showModalDialog("instable.htm",args,"dialogWidth:23em; dialogHeight:25em; ");//Her åbnes dialogen           
    }
    if(arr==null)return;
    if(arr["action"]=="insrow")TableInsertRow();
}

Dernæst skal vi lave indsæt funktionen:

function TableInsert(arr) { //Her er kun indsat borderColor - igen kan flere indsættes
    var sHTML = ""
        + "<TABLE class='edittable' " //jeg giver min tabel en klasse per default
        + (((arr["border"]=="") || (arr["border"]=="0")) ? "class=\"NOBORDER\"" : "")
        +    (arr["borderColor"] != "" ? "bordercolor=\"" + arr["borderColor"] + "\" " : "")
        + ">"
    for (var i=0; i < arr["rows"]; i++) {
        sHTML += "<TR>"
        for (var j=0; j < arr["cols"]; j++)
        sHTML += "<TD>&nbsp;</TD>"
        sHTML += "</TR>"
    }
    sHTML += "</TABLE>"
       
    idContent.focus()
    if (sType_Table=="Control")oSel_Table.item(0).outerHTML = sHTML
    else oSel_Table.pasteHTML(sHTML)
}

Til sidst mangler der så en update funktion hvis der blot redigeres, men den kan nemt laves udfra indsæt funktionen.
Længere kan jeg ikke hjælpe :)

Mange tak, jeg kigger på det i løbet af de næste par dage! :)

Smid et svar, pelkjaer. Det ser ud til at virke godt! :)

Allright :o)

Jeg fandt aldrig ud af det med at splitte en celle, men det har formentlig noget at gøre med at skifte en hel masse colspan og rowspan osv.
Men tak for hjælpen! :)

Jeg har heller ikke selv rodet med split af celler endnu :)
Thanks for points.