login  Naam:   Wachtwoord: 
Registreer je!
 Nota's op tutorial:
Tutorials > Javascript > WYSIWYG-editor
Pagina:

Reacties op de tutorial WYSIWYG-editor


Offline  Stijn
Gepost op: 22 januari 2007 - 20:56
PHP expert
knap , het kan nog uitgebreider. Zoals het versturen van de inhoud en <table>. Jou code werkt niet in FF

*edit*

http://www.mozilla.org/editor/ie2midas.html , hiermee zou het voor FF moeten werken!

php code - Bekijk de code zonder highlighting - Klap code in 
  1. iframe.document


wordt

php code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById("iframe").contentWindow.document

Offline  Ibrahim
Gepost op: 22 januari 2007 - 22:30
PHP expert
echt knap, en tnx stijn

Ik ben nu al bezig met een leuke WYSIWYG 
Ik had alleen de designMode en de execCommand functie nodig xD

Offline  svm
Gepost op: 23 januari 2007 - 11:49
PHP ver gevorderde
Ja, het is inderdaad veel makkelijker dan je zou denken.
Maar ik zit nu op school waar we (nog) geen FF hebben, dus ik zal de code van stijn uitproberen als ik thuis ben (en m'n HW af heb ).
Maar stijn, er is bij vermeld dat hij alleen in IE werkte maar goed.
En zoals ook vermeld: verdere opties als versturen en opslaan: PHP + submit knop.

Edit:
Hij is nu aangepast:
- hij werkt in IE en FF (waarschijnlijk wel meer browsers)
- de JS-code heeft een mooi kleurtje gehad (om alvast in de carnavalstemming te komen )

BEDANKT STIJN!

Offline  Ultimatum
Gepost op: 23 januari 2007 - 18:02
PHP expert
Vet cool, maar hier werkt hij nog niet goed in FF hoor, heb je laatste code letterlijke gekopierd en geplakt maar ik kan niet typen. In IE werkt het echter wel goed 

Offline  svm
Gepost op: 23 januari 2007 - 18:06
PHP ver gevorderde
ik zal eens kijken...

Edit:
Klopt, de disignMode is niet voor FF gemaakt in de laatste code, zal het even aanpassen...

Edit 2:
Ook dit is aangepast!


@Stijn
Zo werkt hij dacht ik in IE niet.
Maar ik heb hem al aangepast.

Offline  Stijn
Gepost op: 23 januari 2007 - 18:10
PHP expert
Citaat:
[I][B]Ultimatum[/B] schreef op 23 Januari 2007 - 18:02[/I]

Vet cool, maar hier werkt hij nog niet goed in FF hoor, heb je laatste code letterlijke gekopierd en geplakt maar ik kan niet typen. In IE werkt het echter wel goed 
http://www.plaatscode.be/3913/

Offline  Ultimatum
Gepost op: 23 januari 2007 - 18:45
PHP expert
Bedankt, kon dit mooi gebruiken 

die van stijn werkt wel in IE btw en die van jou werkt ook gewoon, dus 2 werkende voorbeelden is zeer mooi 

Offline  Kr4nKz1n
Gepost op: 25 januari 2007 - 16:47
Onbekend
Heel vet als het allemaal werkt.
Mooie tut!

Offline  Abbas
Gepost op: 30 januari 2007 - 22:12
Gouden medaille

Crew .NET
Mooie tutorial, goed en duidelijk uitgelegd 
En het is ook eens iets anders...

Offline  ikkedikke
Gepost op: 02 februari 2007 - 14:58
PHP expert
misschien een stomme vraag maar hoe krijg je de inhoud nou in een variabele? (js of php?)

Offline  svm
Gepost op: 02 februari 2007 - 16:17
PHP ver gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML;


Om op te slaan, dit staat er nu ook bij.

Offline  Jero3n
Gepost op: 02 maart 2007 - 16:53
PHP interesse
het lukt me niet met dat opslaan, kan je me de volledige code geven met het opslaan erbij??

Offline  svm
Gepost op: 02 maart 2007 - 21:38
PHP ver gevorderde
Zal ik nog wel doen.
Maar ik heb het zeer druk dus...

Offline  Jero3n
Gepost op: 02 maart 2007 - 21:45
PHP interesse
oke alvast bedankt 

Offline  svm
Gepost op: 03 maart 2007 - 17:48
PHP ver gevorderde
Even ter verduidelijking.
Zet alle 3 de stukjes code die daar zijn opgegeven in je code.
De JS-functie bij de JS, het PHP-stukje net zoals het onzichtbare formuliertje in HTML zet je ergens in de pagina (waar maakt niet uit).

Kom je er zo uit?

Offline  Jero3n
Gepost op: 04 maart 2007 - 13:57
PHP interesse
ik heb nu dit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. function maak_frame(){ 
  5. // IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen 
  6.  if(window.navigator.appName == "Microsoft Internet Explorer") 
  7.   iframe.document.designMode = "on"; 
  8.  
  9.  if(window.navigator.appName == "Netscape") 
  10.   document.getElementById('iframe').contentDocument.designMode = "on"; 
  11. } 
  12.  
  13. /* ik heb even de eerder gebruikte functies weg gelaten, 
  14. dat is voor deze uitleg toch overbodig */ 
  15.  
  16. function lettertype(LetterType) { 
  17. if(LetterType != "") 
  18. document.getElementById("iframe").contentWindow.document.execCommand("FontName", false, LetterType); 
  19. } 
  20. function lettergrootte(LetterGrootte) { 
  21. if(LetterGrootte != "") 
  22. document.getElementById("iframe").contentWindow.document.execCommand("FontSize", false, LetterGrootte); 
  23. } 
  24. function opslaan() { 
  25.  var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML; 
  26.  document.getElementById("areaCode").value = htmlCode; 
  27.  document.getElementById("formCode").submit(); 
  28. }  
  29.  
  30. </script>
  31. </head>
  32.  
  33. <body onLoad="maak_frame()">
  34. <iframe id="iframe" height="300" width="600"></iframe><br><br>
  35. Kies de tekstgrootte: Kies een lettertype:<br>
  36. <select name="grootte" onChange="lettergrootte(this.options[this.selectedIndex].value)">
  37. <option value="">Kies een grootte</option>
  38. <option value="1">1</option>
  39. <option value="2">2</option>
  40. <option value="3">3</option>
  41. <option value="4">4</option>
  42. <option value="5">5</option>
  43. <option value="6">6</option>
  44. </select> 
  45. <select name="letter" onChange="lettertype(this.options[this.selectedIndex].value)">
  46. <option value="">Kies een lettertype</option>
  47. <option value="Arial">Arial</option>
  48. <option value="Tahoma">Tahoma</option>
  49. <option value="Courier">Courier</option>
  50. <option value="Verdana">Verdana</option>
  51. <option value="Times New Roman">Times New Roman</option>
  52. </select>
  53.  
  54. <form method="post" id="formCode" action="
  55. <? 
  56. $bestand = 'file.html'; //het bestandje waar de code in komt 
  57. if(isset($_POST['submit']) && $_POST['areaCode'] != ""){ 
  58.  $fp = fopen($bestand, 'w'); 
  59.  fwrite($fp, stripslashes($_POST['areaCode'])); 
  60.  fclose($fp); 
  61. } 
  62. ?>;>
  63. <input type="hidden" name="areaCode" id="areaCode">
  64. <input type="button" onclick=opslaan(); value="Opslaan!">
  65. </form>  
  66.  
  67.  
  68. </body>
  69. </html>


ik weet dat het nu een beetje raar is, maar ik weet ook niet hoe het dan wel zou moeten.. :S

Offline  svm
Gepost op: 04 maart 2007 - 15:54
PHP ver gevorderde
:P.
Je zet PHP in de <form>.
Even de juiste code (maar ik werk met pastebin).
Probeer maar: http://pastebin.be/6539/

Offline  Jero3n
Gepost op: 04 maart 2007 - 16:09
PHP interesse
als ik dan het bestand file.html open staat er niks in  

Offline  svm
Gepost op: 04 maart 2007 - 16:35
PHP ver gevorderde
Ja, ik zie dat hij ook niet klopt.
Ik zal eens rustig erna kijken, ik laat het weten.
Ik ben helaas wat gestrest nu dus...


Edit:
Ik heb hem aangepast.
Uiteraard nog wel de knoppen aanmaken.
Zet in een van de knoppen onClick='javascript: opslaan();'.
De code is op:
http://pastebin.be/6547/
Hopelijk werkt hij.

Offline  Jero3n
Gepost op: 05 maart 2007 - 12:56
PHP interesse
dan wordt het zo, maar dat werkt ook niet... 

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. function maak_frame(){ 
  5. // IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen 
  6.  if(window.navigator.appName == "Microsoft Internet Explorer") 
  7.   iframe.document.designMode = "on"; 
  8.  
  9.  if(window.navigator.appName == "Netscape") 
  10.   document.getElementById('iframe').contentDocument.designMode = "on"; 
  11. }
  12. function vet() { 
  13.   document.getElementById("iframe").contentWindow.document.execCommand("bold", false, null); 
  14. } 
  15. function schuin() { 
  16.   document.getElementById("iframe").contentWindow.document.execCommand("italic", false, null); 
  17. } 
  18. function onderstreept() { 
  19.   document.getElementById("iframe").contentWindow.document.execCommand("underline", false, null); 
  20. } 
  21. function kleur() { 
  22. var kleur = prompt("Voer hieronder de kleur in het Engels of in HEX in:", ""); 
  23. if(kleur != null) 
  24. document.getElementById("iframe").contentWindow.document.execCommand("ForeColor", false, kleur); 
  25. }  
  26. function lettertype(LetterType) { 
  27. if(LetterType != "") 
  28. document.getElementById("iframe").contentWindow.document.execCommand("FontName", false, LetterType); 
  29. } 
  30. function lettergrootte(LetterGrootte) { 
  31. if(LetterGrootte != "") 
  32. document.getElementById("iframe").contentWindow.document.execCommand("FontSize", false, LetterGrootte); 
  33. } 
  34.  
  35. function opslaan() { 
  36.  var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML; 
  37.  document.getElementById("areaCode").value = htmlCode; 
  38.  document.getElementById("formCode").submit(); 
  39. } 
  40. </script>
  41. </head>
  42.  
  43. <body onLoad="maak_frame()">
  44. <iframe id="iframe" height="300" width="600"></iframe><br><br>
  45. Kies de tekstgrootte: Kies een lettertype:<br>
  46. <select name="grootte" onChange="lettergrootte(this.options[this.selectedIndex].value)">
  47. <option value="">Kies een grootte</option>
  48. <option value="1">1</option>
  49. <option value="2">2</option>
  50. <option value="3">3</option>
  51. <option value="4">4</option>
  52. <option value="5">5</option>
  53. <option value="6">6</option>
  54. </select> 
  55. <select name="letter" onChange="lettertype(this.options[this.selectedIndex].value)">
  56. <option value="">Kies een lettertype</option>
  57. <option value="Arial">Arial</option>
  58. <option value="Tahoma">Tahoma</option>
  59. <option value="Courier">Courier</option>
  60. <option value="Verdana">Verdana</option>
  61. <option value="Times New Roman">Times New Roman</option>
  62. </select>
  63.  
  64. <form action="" method="post" id="formCode">
  65. <textarea name="areaCode" id="areaCode" style="display: none;"></textarea>
  66. <input type=button onClick="javascript: opslaan();" value="opslaan">
  67. </form> 
  68.  
  69. <? 
  70. $bestand = 'file.html'; //het bestandje waar de code in komt 
  71. if(isset($_POST['submit']) && $_POST['areaCode'] != ""){ 
  72.  $fp = fopen($bestand, 'w'); 
  73.  fwrite($fp, stripslashes($_POST['areaCode'])); 
  74.  fclose($fp); 
  75. } 
  76. ?> 
  77.  
  78. </body>
  79. </html>

zelf denk ik dat er een fout zit in die php code, als ik nl. de bron van die pagina open laat hij dat gwn zien, en normaal hoor je php code niet te kunnen zien in een bron :S

Offline  svm
Gepost op: 05 maart 2007 - 15:50
PHP ver gevorderde
Zet dan error_reporting(E_ALL); boven de PHP code.
En mocht hij een error geven: dan is dat het.
Controleer eerst hetvolgende:
- zijn alle velden die in de if() van de PHP-code vermeld staan wel verzonden en ingevuld?
- heb je de juiste rechten (CHMOD) om bestanden met PHP aan te maken?

Offline  Jero3n
Gepost op: 07 maart 2007 - 17:40
PHP interesse
wil je me plz helpen??

Offline  jarah
Gepost op: 13 maart 2007 - 22:44
Nieuw lid
Dit script zocht ik! Hoe pas je dit eigenlijk toe op een bestaande tekst. Hiermee haal ik mijn tekst uit de db:

<?php echo $res['tekst']; ?>

Offline  svm
Gepost op: 14 maart 2007 - 12:03
PHP ver gevorderde
Een tekst uitlezen in een iframe of frame is niet mogelijk.
Je zult dus een apparte pagina aan moeten maken waarin je die tekst uitleest en dan in het iframe zetten.

Dus bijvoorbeeld:
Maak een bestandje tekst.php met daarin <?php echo $res['tekst']; ?>.
Laadt dit bestand in de WYSIWYG-editor door in de iframe-tage SRC="tekst.php" te zetten.

Offline  Stijn
Gepost op: 18 maart 2007 - 02:20
PHP expert
Hier staan alle...d functie.

Offline  Jero3n
Gepost op: 21 maart 2007 - 16:21
PHP interesse
ik zat ook wat op google te zoeken, en toen kwam ik deze tegen: http://www.devg...siwyg1.asp
daarvan vind ik de plaatjes erg mooi!
daar mist nog wel een save function..

Offline  svm
Gepost op: 21 maart 2007 - 21:27
PHP ver gevorderde
Dan neem je de plaatjes daarvan, en de save-functie hiervan .

Offline  vanw
Gepost op: 19 april 2007 - 21:01
PHP interesse
Is het mogelijk om er ook smilies erin te zetten via codes.

Het lukt niet om de codes in een iframe te zetten als je op een smile klikt.

Enig idee of dat mogelijk is ?

Offline  svm
Gepost op: 20 april 2007 - 20:20
PHP ver gevorderde
Niet met exeCommand() lijkt me.
Maar je kunt het wel net zoals hier in sima erin zetten lijkt me.
Hoe weet ik alleen niet: vraag voor het forum .

Offline  roberini
Gepost op: 15 september 2008 - 08:41
HTML beginner
http://www.site...amp;id=410

Maak een nieuw php bestand aan. Dan volg je die tutorial. Laat dan function WoordenFilter($txt) weg. En dan zet je in de iframe een src naar die pagina. Waarschijnlijk moet het dan werken

@ svm: volgens mij niet mogelijk met execCommand ;)

Offline  Joost
Gepost op: 25 september 2008 - 21:16
PHP expert
execCommand:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. execCommand('InsertImage', false, imagePath);

Offline  thomasje
Gepost op: 03 januari 2009 - 15:04
MySQL beginner
waar kon ik alle functies vinden? ik heb al op google gezocht maar ik weet niet of dat de volledige lijst was. Ik heb de link geprobeerd die een paar keer is gegevens maar deze bestaat niet meer.

Offline  svm
Gepost op: 06 januari 2009 - 21:05
PHP ver gevorderde
Het is via MSDN te vinden.
Ik zal even kijken voor je...

Edit:
Op execcommand gezocht bij MSDN en gevonden:
http://msdn.microsoft.com/en-us/library/ms533049(VS.85).aspx

Ik heb hem aangepast.

Offline  tjallingk
Gepost op: 19 januari 2009 - 16:43
Nieuw lid
Hoe moet dat opslaan nu?????? ik begrijp het echt niet.., het werkt perfect maar opslaan, heb er nix geen knop voor ofzo!

Offline  svm
Gepost op: 22 januari 2009 - 13:36
PHP ver gevorderde
Zet de volgende HTML ergens op je pagina om een onzichtbaar formuliertje te maken:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <form action="bestandje.php" method="post" id="formCode" style="display: none;">
  2. <textarea name="areaCode" id="areaCode"></textarea>
  3. </form>

Breid het JS uit met de volgende functie:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function opslaan() { 
  2.  var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML; 
  3.  document.getElementById("areaCode").value = htmlCode; 
  4.  document.getElementById("formCode").submit(); 
  5. }


Maak nu in de knoppenbalk een knop die de functie opslaan laat uitvoeren, bijv:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input type="button" name="opslaan" value="Opslaan" onclick="opslaan()" />


Dan maak je een bestandje.php (die action from hierboven), waarin je de code opslaat:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <? 
  2. $bestand = 'file.html'; //het bestandje waar de code in komt 
  3. if(isset($_POST['areaCode']) && $_POST['areaCode'] != ""){ 
  4.  $fp = fopen($bestand, 'w'); 
  5.  fwrite($fp, stripslashes($_POST['areaCode'])); 
  6.  fclose($fp); 
  7. } 
  8. ?>



Nu moet het werken.

Offline  thomasje
Gepost op: 27 januari 2009 - 12:01
MySQL beginner
Hoe kan je het beste een link toevoegen pop-up je maken, dus dat je op een button klikt en dan een aantal opties ziet staan waar je uit kunt kiezen?

En hoe kan je de link dan in de editor krijgen?

Offline  roberini
Gepost op: 24 maart 2009 - 20:39
HTML beginner
Het opslaan werkt niet bij mij. Ik heb het nu met een plaatje en heb precies gekopieerd wat jij zij, maar dan de knop in een plaatje verander. Hieronder code:

Opslaan functie:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function opslaan() { 
  2.  var htmlCode = document.getElementById('iView').contentWindow.document.body.innerHTML; 
  3.  document.getElementById("areaCode").value = htmlCode; 
  4.  document.getElementById("formCode").submit(); 
  5. }


Hidden formuliertje:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <form action="" method="post" id="formCode" style="display: none;">
  2. 	<textarea name="areaCode" id="areaCode"></textarea>
  3. 	</form>


En het php stukje:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <? 
  2. $bestand = 'test.html';  
  3. if(isset($_POST['areaCode']){ 
  4.  $fp = fopen($bestand, 'w'); 
  5.  fwrite($fp, stripslashes($_POST['areaCode'])); 
  6.  fclose($fp); 
  7. } 
  8. ?>


Als ik hem opsla dan herlaad ie de pagina. En dan word het formuliertje leeggehaald. Als ik dan op test.html ga kijken, is er niks veranderd. Wat doe ik fout.

Offline  svm
Gepost op: 24 maart 2009 - 20:50
PHP ver gevorderde
Je moet in je action="" wel naar de pagina verwijzen welke het afhandelt, maw de php-pagina.
Anders zal hij het form verzenden naar de pagina zelf, maar dat is HTML en dan zie je dus niet veel anders gebeuren dan inderdaad herladen.

Offline  roberini
Gepost op: 24 maart 2009 - 20:58
HTML beginner
En dan heb ik nog een vraag.

De naam van het wysiwyg bestand is editor.html. De verwerkpagina heet verwerk.php. Het bestand dat ik wil bewerken heet test.html. Ik wil met die wysiwyg editor het bestand test.html dus bewerken. Moet ik dan de variable bestand naar editor.html verwijzen of test.html.

Offline  svm
Gepost op: 24 maart 2009 - 22:31
PHP ver gevorderde
test.html natuurlijk: dit is immers het bestand dat opnieuw geschreven moet worden.
Via de post van editor.html wordt de info opgehaald, dus hoef je dit bestand niet meer te vermelden.

Offline  thyssimonis
Gepost op: 05 april 2009 - 09:24
PHP interesse
Hoe kan ik gewoon text vanuit mijn datebase in het veld stoppen? Want dit kan alleen maar van een .html bestand! Andere WYSIWYG kunnen dat wel.

Offline  svm
Gepost op: 05 april 2009 - 19:07
PHP ver gevorderde
Dit zal met JavaScript moeten.
Ik geef je twee mogelijkheden:
1. Sla je tekst op in een JS-variabel (var tekst) (serverside) en zet hem in het iframe met document.getElementById('iframe').contentWindow.document.body.innerHTML = tekst;
2. Laadt je pagina uit de database met behulp van AJAX en vervolgens weer de innerHTML aanpassen.

Offline  thyssimonis
Gepost op: 06 april 2009 - 07:31
PHP interesse
Dit werkt niet in jammer genoeg niet in IE. Het werkt wel in F3 en Chrome2

Offline  svm
Gepost op: 06 april 2009 - 21:26
PHP ver gevorderde
Ik zie het.
Gebruik dan het volgende stukje code (zowel IE als FF):
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var doc = iframe.document;
  2. if(iframe.contentDocument)
  3.  doc = iframe.contentDocument;
  4. else if(iframe.contentWindow)
  5.  doc = iframe.contentWindow.document;
  6. doc.open();
  7. doc.writeln('lalala'); //hier je tekst; kan uiteraard ook via een variabel
  8. doc.close();

Offline  Raze
Gepost op: 21 april 2009 - 14:09
PHP beginner
Wanneer ik een link wil toevoegen, verschijnt deze boven het iframe...   heb het ook in jou voorbeeld geprobeerd en zelfde resultaat (boven het iframe). mss ter informatie: ik gebruik IE8, maar met de compatibiliteitsmodus gebeurt het ook zo.

Voor de rest vind ik het een goede tutorial.

Offline  svm
Gepost op: 21 april 2009 - 21:42
PHP ver gevorderde
Raze schreef:
Wanneer ik een link wil toevoegen, verschijnt deze boven het iframe...   heb het ook in jou voorbeeld geprobeerd en zelfde resultaat (boven het iframe). mss ter informatie: ik gebruik IE8, maar met de compatibiliteitsmodus gebeurt het ook zo.

Voor de rest vind ik het een goede tutorial.


Dit is idd alleen in IE8.
Maar het is dan ook de bedoeling dat je eerst je tekst selecteerd waarvan je een link wilt maken en dan de link ernaar aanmaakt: dat werkt wel goed .

Offline  christophe195
Gepost op: 31 maart 2012 - 11:24
Lid
je tutorial is zeer leuk maar ik zou nog 3 knoppen willen toevoegen
-html code weergeven
-voorbeeld
-afdrukken

Nu ben ik nieuw met javascript dus weet ik niet echt hoe het moet.

Offline  riagabel2
Gepost op: 23 oktober 2012 - 19:09
Lid
Raze schreef:
Wanneer ik een link wil toevoegen, verschijnt deze boven het iframe...   heb het ook in jou voorbeeld geprobeerd en zelfde resultaat (boven het iframe). mss ter informatie: ik gebruik IE8, maar met de compatibiliteitsmodus gebeurt het ook zo.

Voor de rest vind ik het een goede tutorial.


Geen IE gebruiken ;)

Pagina:

Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties.
 
© 2002-2023 Sitemasters.be - Regels - Laadtijd: 0.101s