[JS] Javascript die html form van UBB codes voorziet * - Softwareontwikkeling

donderdag 2 december 2004 11:41

Acties:

Verwijderd

Topicstarter

Ik ben bezig met een CMS oplossing, nu heb ik een formulier waarbij ik een aantal opmaakopties wil gebruiken.
Dit zijn Bold, Italic etc.

Dus hiervoor moet een knop komen, als je op de knop drukt moet het geselecteerde deel in het textveld bold worden.

Dit heb ik geprobeerd te maken met UBB code's, het princype lijkte me leuk..

Echter doe ik niet zoveel met javascript.. ben er vrij onbekend mee.. en het werkt dus helaas niet

Bij het javascript deel krijg ik linksonderin zo'n java fout.

Dit is mijn code:

PHP:

<html>

<script type="text/javascript"> 
var doc = document; 
var oTextArea = doc.getElementById('pageContent'); 

function setStyle(sTag) { 
  var sSelection = doc.selection.createRange().text; 

  if (sSelection) { 
    switch(sTag) { 
      case '[b]': 
        doc.selection.createRange().text = '[b]' + sSelection + '[/b]'; 
        break; 
      case '[u]': 
        doc.selection.createRange().text = '[u]' + sSelection + '[/u]'; 
        break; 
      case '[i]':   
        doc.selection.createRange().text = '[i]' + sSelection + '[/i]'; 
        break; 
      case '[url]': 
        doc.selection.createRange().text = '[url=' + sSelection + ']' + sSelection + '[/url]'; 
        break; 
      default: 
        // niks 
  } else { 
    // iets anders :) 
  } 
} 
</script> 

<style type="text/css">
<!--
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: x-small; }
-->
</style><form name="form1" method="post" action="add_verhaal.php">
<table width="77%"  border="0">
  <tr>
    <td width="14%"><span class="style3">Onderwerp:</span></td>
    <td width="86%">
      <input name="onderwerp" type="text" id="onderwerp" size="64">
   </td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td>[img]"images/bold.gif"[/img] [img]"images/italic.gif">[/img] [img]"images/url.gif"[/img] </td>
  </tr>
  <tr>
    <td valign="top"><span class="style3">Omschrijving:</span></td>
    <td><textarea id='pageContent'> 
        </textarea>   </td>
  </tr>
  <tr>
    <td valign="top"><input type="submit" name="Submit" value="Submit"> </td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

</html>

Zien jullie wat ik fout doe ?

donderdag 2 december 2004 11:53

Acties:

gorgi_19

Kruimeltjes zijn weer op :9

Javascript != Java
Javascript != Programming & Webscripting

>> Webdesign & Graphics

Digitaal onderwijsmateriaal, leermateriaal voor hbo

donderdag 2 december 2004 12:01

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

code:

1
2
3

<script type="text/javascript">  
var doc = document;  
var oTextArea = doc.getElementById('pageContent');

nu definieer je twee variabelen in de globale code, ofwel, deze worden direkt uitgevoerd, terwijl de pagina nog niet gerenderd is ...

document.getElementById('pageContent') bestaat nog helemaal niet, dat element wordt pas in de HTML-code eronder gedefinieerd ...

probeer dat sukje gewoon binnen de function aan te roepen

code:

function setStyle(sTag) {  
  var oTextArea = document.getElementById('pageContent');  
  var sSelection = document.selection.createRange().text;  
// ...etc

verder, ik zou je aanraden om gewoon formulier elementen via document.forms aan te spreken en met zijn 'name' waarde (alhoewel dat eerder een persoonlijke voorkeur is)
en tevens een beetje op te passen om al te snel dat soort 'handige' shorthands als 'var doc = document' een grote rol in je script te laten spelen, zeker als je niet zo gewend bent aan javascript en DOM-scripting kan je daardoor je script ook lastig leesbaar maken.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 2 december 2004 12:05

Acties:

Verwijderd

Waarom begin je met <? en eindig je met ?> ??

donderdag 2 december 2004 13:12

Acties:

Verwijderd

Topicstarter

RM-rf schreef op donderdag 02 december 2004 @ 12:01:
code:
1
2
3
<script type="text/javascript">  
var doc = document;  
var oTextArea = doc.getElementById('pageContent');
nu definieer je twee variabelen in de globale code, ofwel, deze worden direkt uitgevoerd, terwijl de pagina nog niet gerenderd is ...

document.getElementById('pageContent') bestaat nog helemaal niet, dat element wordt pas in de HTML-code eronder gedefinieerd ...

probeer dat sukje gewoon binnen de function aan te roepen
code:
1
2
3
4
function setStyle(sTag) {  
  var oTextArea = document.getElementById('pageContent');  
  var sSelection = document.selection.createRange().text;  
// ...etc
verder, ik zou je aanraden om gewoon formulier elementen via document.forms aan te spreken en met zijn 'name' waarde (alhoewel dat eerder een persoonlijke voorkeur is)
en tevens een beetje op te passen om al te snel dat soort 'handige' shorthands als 'var doc = document' een grote rol in je script te laten spelen, zeker als je niet zo gewend bent aan javascript en DOM-scripting kan je daardoor je script ook lastig leesbaar maken.

ok logisch.. domme fout.. ik heb de var oTextArea = doc.getElementById('pageContent'); regel verplaatst..

maar nog steeds dezelfde foutmelding.. ik snap er even helemaal niets van.. de code lijkt me goed..

PHP:

<html>

<script type="text/javascript"> 
var doc = document; 

function setStyle(sTag) { 
  var oTextArea = doc.getElementById('pageContent'); 
  var sSelection = doc.selection.createRange().text; 

  if (sSelection) { 
    switch(sTag) { 
      case '[b]': 
        doc.selection.createRange().text = '[b]' + sSelection + '[/b]'; 
        break; 
      case '[u]': 
        doc.selection.createRange().text = '[u]' + sSelection + '[/u]'; 
        break; 
      case '[i]':   
        doc.selection.createRange().text = '[i]' + sSelection + '[/i]'; 
        break; 
      case '[url]': 
        doc.selection.createRange().text = '[url=' + sSelection + ']' + sSelection + '[/url]'; 
        break; 
      default: 
        // niks 
  } else { 
    // iets anders :) 
  } 
} 
</script> 

<style type="text/css">
<!--
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: x-small; }
-->
</style><form name="form1" method="post" action="add_verhaal.php">
<table width="77%"  border="0">
  <tr>
    <td width="14%"><span class="style3">Onderwerp:</span></td>
    <td width="86%">
      <input name="onderwerp" type="text" id="onderwerp" size="64">
   </td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td>[img]"images/bold.gif"[/img] [img]"images/italic.gif">[/img] [img]"images/url.gif"[/img] </td>
  </tr>
  <tr>
    <td valign="top"><span class="style3">Omschrijving:</span></td>
    <td><textarea id='pageContent'> 
        </textarea>   </td>
  </tr>
  <tr>
    <td valign="top"><input type="submit" name="Submit" value="Submit"> </td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

</html>

donderdag 2 december 2004 13:14

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 02 december 2004 @ 12:05:
Waarom begin je met <? en eindig je met ?> ??

Weet niet komt er automatisch bij omdat ik php tags gebruik voor de opmaak

donderdag 2 december 2004 13:24

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

maak nu eens

PHP:

1
2
3

function setStyle(sTag) {  
  var oTextArea = document.getElementById('pageContent');  
  var sSelection = document.selection.createRange().text;

(en ook in de rest van die functie niet doc, maar gewoon net document toepassen)

verder:
de switch condition wordt nu niet afgesloten:
na default: mis je nog break; } (eventueel die default weghalen en een afsluitende bracket plaatsen)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 2 december 2004 13:28

Acties:

Verwijderd

Topicstarter

dat laatste was het !!

die:

}

bij Default !

super bedankt ! ik zal alle doc's weg halen en documents van maken

Pagina: 1

Reageer