Avatar billede robson Nybegynder
18. februar 2003 - 13:36 Der er 6 kommentarer og
1 løsning

Tabeller vha Editor Component / ExecCommand

Hej - nu er jeg ved at bryde grædende sammen...  :(

Jeg har indtil nu fået opbygget en simpel editor til formatering af tekst og upload af billeder, MEN jeg kan ikke gennemskue hvorledes jeg får udviklet et tabel modul til denne editor!!!

Jeg arbejder med en IFrame...

<IFRAME WIDTH=600 HEIGHT=400 ID=myEditor src="indhold.htm"></IFRAME>
<script>
    myEditor.document.designMode = "on";
</script>

...og jeg forestiller mig at jeg skal benytte metoden createElement("Table") men præcis hvorledes jeg gør dette er meget sløret for mig - HJÆLP...

et eksempel på at formaterer teksten ses her:

function CMD_onclick() {
        var range = myEditor.document.selection.createRange()
        range.execCommand("Bold")
    }
Avatar billede edutasia Nybegynder
18. februar 2003 - 15:07 #1
En mulighed er at lave en dialogboks (dvs. en helt almindelig side, der åbnes i et nyt vindue - evt. modalt), hvor brugeren kan angive antal rækker og kolonner, bredde, højde, cellpadding, cellspacing, border osv. Ud fra disse informationer kan du selv "bygge" en html-streng, som derefter kan indsættes med en funktion a la den her:

function insertTable() {
var strHtml = '<table width=350 border=1><tr><td></td><td></td></tr></table>';
var range = myEditor.document.selection.createRange();
range.pasteHTML(strHtml);
}

Det er en meget hurtig metode - sammenlignet med createElement() - og den giver fuld frihed over koden (der dog sandsynligvis skamferes omgående af editor-komponenten, men det er en anden sag..)
Avatar billede robson Nybegynder
18. februar 2003 - 16:38 #2
Det er ikke helt hvad jeg håbede på - det er lidt klodset, men din metode fungerer OK - min test kode ser således ud:

//FUNKTIONEN DER KALDES NÅR BRUGEREN TRYKKER PÅ TABEL KNAPPEN
function InsertTable() {
  var strHtml, i, j;
  var strRows, strCols, strTable, strCell, strCaption;
  var args = new Array();
  var arr = null;
     
  // Display table information dialog
  args["NumRows"] = 3;
  args["NumCols"] = 3;
  args["TableAttrs"] = "border=1 cellPadding=0 cellSpacing=0 width=100%";
  args["CellAttrs"] = "";
  args["Caption"] = "";
     
  arr = null;
     
  arr = showModalDialog( "tablePopup.htm",
                            args,
                            "font-family:Verdana; font-size:12; dialogWidth:36em; dialogHeight:25em");
  if (arr != null) {
    // VÆRDIERNE FRA POPUPPEN LÆGGES I NYE VARIABLER
    for ( elem in arr ) {
      if ("NumRows" == elem && arr["NumRows"] != null) {
        strRows = arr["NumRows"];
      } else if ("NumCols" == elem && arr["NumCols"] != null) {
        strCols = arr["NumCols"];
      } else if ("TableAttrs" == elem) {
        strTable = "<table "+ arr["TableAttrs"] +">";
      } else if ("CellAttrs" == elem) {
        strCell = arr["CellAttrs"];
      } else if ("Caption" == elem) {
        strCaption = arr["Caption"];
      }
    }
       
    //TABEL STRENGEN SAMLES
    strHtml = strTable
    for (i=0;i<strRows;i++){
        strHtml += "<tr>"
        for (j=0;j<strCols;j++){
            strHtml += "<td></td>";
        }
        strHtml += "</tr>";
    }
    strHtml += "</table>"
       
    //TABELLEN SÆTTES IND I IFRAMEN
    var range = myEditor.document.selection.createRange();
    range.pasteHTML(strHtml);
  }
}

KODEN I tablePopup.htm:

<!-- Copyright 1999 Microsoft Corporation. All rights reserved. -->
<HTML>
<HEAD>
<TITLE>Enter Table Information</TITLE>

<STYLE TYPE="text/css">
BODY  {margin-left:10; font-family:Verdana; font-size:12; background:menu}
BUTTON {width:5em}
TABLE  {font-family:Verdana; font-size:12}
P      {text-align:center}
</STYLE>

<SCRIPT LANGUAGE=JavaScript>
<!--
function IsDigit()
{
  return ((event.keyCode >= 48) && (event.keyCode <= 57))
}
// -->
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=window EVENT=onload>
<!--
  for ( elem in window.dialogArguments )
  {
    switch( elem )
    {
    case "NumRows":
      NumRows.value = window.dialogArguments["NumRows"];
      break;
    case "NumCols":
      NumCols.value = window.dialogArguments["NumCols"];
      break;
    case "TableAttrs":
      TableAttrs.value = window.dialogArguments["TableAttrs"];
      break;
    case "CellAttrs":
      CellAttrs.value = window.dialogArguments["CellAttrs"];
      break;
    case "Caption":
      Caption.value = window.dialogArguments["Caption"];
      break;
    }
  }
// -->
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=Ok EVENT=onclick>
<!--
  var arr = new Array();
  arr["NumRows"] = NumRows.value;
  arr["NumCols"] = NumCols.value;
  arr["TableAttrs"] = TableAttrs.value;
  arr["CellAttrs"] = CellAttrs.value;
  arr["Caption"] = Caption.value;
  window.returnValue = arr;
  window.close();
// -->
</SCRIPT>

</HEAD>

<BODY>

<TABLE CELLSPACING=10>
<TR>
  <TD>Rows:
  <TD><INPUT ID=NumRows TYPE=TEXT SIZE=3 NAME=NumRows ONKEYPRESS="event.returnValue=IsDigit();">
<TR>
  <TD>Columns:
  <TD><INPUT ID=NumCols TYPE=TEXT SIZE=3 NAME=NumCols ONKEYPRESS="event.returnValue=IsDigit();">
<TR>
  <TD>Table Attributes:
  <TD><INPUT TYPE=TEXT SIZE=40 NAME=TableAttrs>
<TR>
  <TD>Cell Attributes:
  <TD><INPUT TYPE=TEXT SIZE=40 NAME=CellAttrs>
<TR>
  <TD>Caption:
  <TD><INPUT TYPE=TEXT SIZE=40 NAME=Caption>
</TABLE>

<P>
<BUTTON ID=Ok TYPE=SUBMIT>OK</BUTTON>
<BUTTON ONCLICK="window.close();">Cancel</BUTTON>

</BODY>
</HTML>
Avatar billede robson Nybegynder
19. februar 2003 - 08:09 #3
Er der mon andre der har kommentarer/svar til dette - gode ideer...  :o)
Avatar billede edutasia Nybegynder
19. februar 2003 - 10:46 #4
Avatar billede edutasia Nybegynder
19. februar 2003 - 10:48 #5
Se kildekoden på ovennævnte side. Dér er 5 forskellige funktioner til indsættelse af tabeller...
Avatar billede robson Nybegynder
19. februar 2003 - 11:03 #6
Spændende!! sætter lige noget test igang... :o)
Avatar billede robson Nybegynder
19. februar 2004 - 11:23 #7
Der kom aldrig noget brugbart resultat ud af ovenstående - lukker spg.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester