login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Smiles in WYSIWYG editor (Opgelost)

Offline vanw - 30/04/2007 15:32
Avatar van vanwPHP interesse Hoi,

Ik ben al een tijdje op zoek naar een functie om er tekens in de WYSIWYG editor te krijgen, maar het wil maar niet werken.

Het gaat erom als je op een plaatje drukt dat er dan een teken komt te staan zoals : ) alleen aan elkaar.

Is dit uberhaubt mogelijk, Zoals bij een tekst formulier is dat wel mogelijk maar dit werkt met een iframe.

Ik hoor graag de reacties, Alvast bedankt!

7 antwoorden

Gesponsorde links
Offline Ibrahim - 30/04/2007 15:44
Avatar van Ibrahim PHP expert een simpele voorbeeldtje:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. // JS
  2. function addsmiley( smiley_code )
  3. {
  4.      document.getElementById('text_vlak').value += smiley_code;
  5. }


php code - Bekijk de code zonder highlighting - Klap code in 
  1. // html
  2. <img src="logo_i.gif" onclick="addsmiley(':)');" />
  3. <form name="form1" action="" method="post">
  4. <textarea id="text_vlak"></textarea>
  5. </form>
Offline Grayen - 30/04/2007 15:44 (laatste wijziging 30/04/2007 15:45)
Avatar van Grayen PHP ver gevorderde Uiteraard is dat mogelijk, mag ik jouw code eens zien wat je tot nu toe hebt? dan pas ik het wel voor je aan.

@siliecom

Hij wilt het voor een iframe, dat gaat wel anders als een textarea hoor .
Offline vanw - 30/04/2007 15:52
Avatar van vanw PHP interesse Ja, Ik ben idd op zoek alleen voor een Iframe, Maar misschien kan ik dat zo nog gebruiken voor een ander dingetje..

@ Grayen
Hierbij de gehele pagina ik wil er nog wat dingetjes aan aanpassen, maar weet nog niet precies wat.

Maar die smiles zijn wel heel erg belangrijk nu.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. function maak_frame(){ 
  5.  if(window.navigator.appName == "Microsoft Internet Explorer") 
  6.   iframe.document.designMode = "on"; 
  7.  
  8.  if(window.navigator.appName == "Netscape") 
  9.   document.getElementById('iframe').contentDocument.designMode = "on"; 
  10. } 
  11. function opslaan() { 
  12.  var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML; 
  13.  document.getElementById("areaCode").value = htmlCode; 
  14.  document.getElementById("formCode").submit(); 
  15. } 
  16. function vet() { 
  17.   document.getElementById("iframe").contentWindow.document.execCommand("bold", false, null); 
  18. } 
  19. function schuin() { 
  20.   document.getElementById("iframe").contentWindow.document.execCommand("italic", false, null); 
  21. } 
  22. function onderstreept() { 
  23.   document.getElementById("iframe").contentWindow.document.execCommand("underline", false, null); 
  24. } 
  25. function lettertype(LetterType) { 
  26. if(LetterType != "") 
  27. document.getElementById("iframe").contentWindow.document.execCommand("FontName", false, LetterType); 
  28. } 
  29. function lettergrootte(LetterGrootte) { 
  30. if(LetterGrootte != "") 
  31. document.getElementById("iframe").contentWindow.document.execCommand("FontSize", false, LetterGrootte); 
  32. } 
  33. function positie(positie) {
  34.   document.getElementById("iframe").contentWindow.document.execCommand("Justify"+ positie, false, null);
  35. }
  36. </script>
  37. </head>
  38.  
  39. <body onLoad="maak_frame()">
  40. <img src="profiel/editor/images/icon_save.gif" onClick="opslaan()" alt="Opslaan"> <img src="profiel/editor/images/icon_bold.gif" onClick="vet()" alt="Vet"> <img src="profiel/editor/images/icon_italic.gif" onClick="schuin()" alt="Schuin"> <img src="profiel/editor/images/icon_underline.gif" onClick="onderstreept()" alt="Onderstreept">  <img src="profiel/editor/images/icon_align_left.gif" onClick="positie('Left')" alt="Links"> <img src="profiel/editor/images/icon_center.gif" onClick="positie('Center')" alt="Midden"> <img src="profiel/editor/images/icon_align_right.gif" onClick="positie('Right')" alt="Rechts"> <br>
  41. <iframe id="iframe" height="300" width="500" src="profiel/editor/mijn_pagina.php?gbr=<? echo $gbr; ?>"></iframe><br><br>
  42. Kies de tekstgrootte: Kies een lettertype:<br>
  43. <select name="grootte" onChange="lettergrootte(this.options[this.selectedIndex].value)">
  44. <option value="">Kies een grootte</option>
  45. <option value="1">1</option>
  46. <option value="2">2</option>
  47. <option value="3">3</option>
  48. <option value="4">4</option>
  49. </select> 
  50. <select name="letter" onChange="lettertype(this.options[this.selectedIndex].value)">
  51. <option value="">Kies een lettertype</option>
  52. <option value="Arial">Arial</option>
  53. <option value="Tahoma">Tahoma</option>
  54. <option value="Courier">Courier</option>
  55. <option value="Verdana">Verdana</option>
  56. <option value="Times New Roman">Times New Roman</option>
  57. </select>
  58. <? 
  59. if($_POST['areaCode']){ 
  60. $over_mij = $_POST['areaCode'];
  61. mysql_query("UPDATE vragen_lijst_pro SET over_mij = '".$over_mij."' WHERE gebruiker = '".$gbr."'") or die(mysql_error());
  62. } 
  63. ?> 
  64. <form action="" method="post" id="formCode" style="display: none;">
  65. <textarea name="areaCode" id="areaCode"></textarea>
  66. </form> 
  67. <input type=button onClick="opslaan()" value="opslaan">
  68. </body>
  69. </html>
  70. </body>
  71.  
  72. </html>


Alvast harstikke bedankt!
Offline Stijn - 30/04/2007 16:03
Avatar van Stijn PHP expert Geen .value maar .innerHTML om HTML code te posten. value is text.
Offline Grayen - 30/04/2007 16:32
Avatar van Grayen PHP ver gevorderde zou ik ook de echte url mogen hebben naar de pagina van de iframe, want nu krijg ik natuurlijk de pagina kan niet worden weergegeven, is wel zo makkelijk als ik wil testen of wat ik het aangepast werkt .
Offline vanw - 30/04/2007 16:45 (laatste wijziging 30/04/2007 17:53)
Avatar van vanw PHP interesse Ik mail hem je wel even omdat hij niet klopt wat er net stond.

Bedankt, het werkt perfect! 
Offline Grayen - 30/04/2007 18:14
Avatar van Grayen PHP ver gevorderde Sorry dat ik de topic weer naar boven haal, maar ik denk dat het wel zo handig is om het antwoord erbij te plaatsen voor als mensen met hetzelfde probleem komen.

De oplossing voor vanw is de volgende javascript code geweest

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php // Kleurtjes
  2. function emoticon(theEmoticon)
  3. { 
  4.     var theWindow = document.getElementById('iframe').contentWindow;
  5.     var theDocument = document.getElementById('iframe').contentWindow.document;
  6.  
  7.     var theSelection = '';
  8.     var theRange = '';
  9.  
  10.     if(theWindow.getSelection || theDocument.getSelection)
  11.     {
  12.         if(theWindow.getSelection)
  13.             theSelection = theWindow.getSelection();
  14.         else if(theDocument.getSelection)
  15.             theSelection = theDocument.getSelection();
  16.  
  17.         theRange = theSelection.getRangeAt(0);
  18.         theRange.collapse(false);
  19.         theText = theDocument.createTextNode(theEmoticon);
  20.         theRange.insertNode(theText);
  21.     }
  22.     else if(theDocument.selection)
  23.     {
  24.         theSelection = theDocument.selection;
  25.         theRange = theSelection.createRange();
  26.         theRange.collapse(false);
  27.         theRange.pasteHTML(theEmoticon);
  28.     }
  29.     else
  30.     {
  31.         return false;
  32.     }
  33.     return true;
  34. }


Die hij als volgt kon aanroepen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="http://www.sitemasters.be/images/smileys/icon_cheesygrin.gif" onclick="emoticon('^^')" />
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.227s