[JS - HTML] WYSIWYG - editor

Pagina: 1
Acties:
  • 619 views sinds 30-01-2008
  • Reageer

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Ik ben nu al een tijdje bezig met het ontwikkelen van een WYSIWYG editor, die volledig op BB-code draait. De reden waarom ik voor BB-code kies boven gebruik van HTML tags in de tekst is persoonlijk denk ik.

Als ik naar andere WYSIWYG editors kijk, is mijn grootste probleem het omzetten naar HTML. Ik denk dat het eerste omzetten naar BB-code en hierna het pas omzetten naar HTML een beter oplossing is, 't lijkt op dubbel werk, maar goed. Ik wil de meer 'ervaren' gebruikers ook de mogelijkheid geven zelf BB-code te schrijven en dus niet de WYSIWYG functie te gebruiken.
Ergens wil ik dus gewoon de controle behouden over de HTML output.

Nu mijn grootste probleem is het 'bedrijpen' hoe zo'n WYSIWYG editor juist werkt. Ik heb me al in veel code gestort en voornamelijk weet ik wel dat het allemaal draait rond JavaScript, ben er niet echt een held in maar goed ik ben er mij meer en meer aan't in verdiepen.

Maar wat ik mij dus afvraag is het 'tekstvak' van zo'n WYSIWYG editor, is dat nu een textarea, iframe, div... dat snap ik dus niet. Wanneer ik met een textarea werk en ik zet er dus bv <b>maak dit vet<
/b> in ... dan print hij natuurlijk gewoon letterlijk de code af. Ga je gebruik maken van een DIV dan wordt de opmaak wel verzorgt maar kan je natuurlijk niets aanpassen, hoewel ik hiervoor wel een oplossing vond op een website van microsoft, nadeel was dat het enkel compatibel was met MS IE natuurlijk.

Dus als iemand mij dat eens zou kunnen uitleggen hoe je dus ervoor zorgt dat wanneer je op het knopje 'bold' duwt en dus begint te typen dat de tekst ook op het scherm in't vet word afgedrukt en waarin die tekst dus staat welke HTLM-element ervoor wordt gebruikt. 'k Denk dat misschien wel meer mensen zich dit afvragen, maar ik zoek er al lang naar, naar een duidelijk antwoord, maar kan het dus niet vinden. Ik denk eens ik dit goed door heb, dat het dan nog een kwestie is van goed JS onder de knie te krijgen en veel prullen en prutsen :).

Thx in advance!

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • Creepy
  • Registratie: Juni 2001
  • Laatst online: 10:03

Creepy

Tactical Espionage Splatterer

Ff een move naar Webdesign, Markup & Clientside Scripting aangezien we het over JS en HTML hebben :)

Je zou eens kunnen kijken naar bijv. TinyMCE of FCK editor. Van beide zijn de volledige source beschikbaar zodat je eens kijken kijken wat zij nu precies doen.

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney


Acties:
  • 0 Henk 'm!

  • sopsop
  • Registratie: Januari 2002
  • Laatst online: 14:36

sopsop

[v] [;,,;] [v]

Dit is clientsidescripting en valt dus meer onder Webdesign, Markup & Clientside Scripting.

Verder staat hier een vrij uitvoerige uitwerking: http://www.devarticles.co...SIWYG-HTML-Editor-Part-1/

Acties:
  • 0 Henk 'm!

  • rhodium
  • Registratie: Augustus 2003
  • Laatst online: 07:09
Creepy schreef op vrijdag 17 augustus 2007 @ 09:22:
Je zou eens kunnen kijken naar bijv. TinyMCE of FCK editor. Van beide zijn de volledige source beschikbaar zodat je eens kijken kijken wat zij nu precies doen.
Dan is de FCK editor een hele mooie. http://www.fckeditor.net/

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Ik ken de editors wel, 't nadeel vind ik eraan, ze zijn zeer complex gemaakt en als je erin wil gaan prullen ben je wel even bezig. Dus jah, 'k ben helemaal niet op zoek een een WYSIWYG editor, 'k wil gewoon eigenlijk een uitleg naar 'hoe' zo'n WYSIWYG editor juist werkt, met dan meer de nadruk op het tekstveld. Welk HTML element je bv. gebruikt zodat je toch je tekst kan wijzigen maar dat hij ook onmiddellijk in staat bv. een stuk tekst te laten zien in't vet, cursief enz...

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • Creepy
  • Registratie: Juni 2001
  • Laatst online: 10:03

Creepy

Tactical Espionage Splatterer

Moet ik dit topic wel een move geven natuurlijk :P

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Creepy schreef op vrijdag 17 augustus 2007 @ 09:32:
Moet ik dit topic wel een move geven natuurlijk :P
Ook een goeie morgen voor jou Modje :p

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • sopsop
  • Registratie: Januari 2002
  • Laatst online: 14:36

sopsop

[v] [;,,;] [v]

imp4ct schreef op vrijdag 17 augustus 2007 @ 09:31:
... 'k wil gewoon eigenlijk een uitleg naar 'hoe' zo'n WYSIWYG editor juist werkt, met dan meer de nadruk op het tekstveld. Welk HTML element je bv. gebruikt zodat je toch je tekst kan wijzigen maar dat hij ook onmiddellijk in staat bv. een stuk tekst te laten zien in't vet, cursief enz...
Lees mijn vorige post nog eens, er staat een heel artikel in hoe je zo iets moet bouwen.

[ Voor 16% gewijzigd door sopsop op 17-08-2007 10:04 ]


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
sopsop schreef op vrijdag 17 augustus 2007 @ 10:03:
[...]

Lees mijn vorige post nog eens, er staat een heel artikel in hoe je zo iets moet bouwen.
Yep, was ermee bezig hoor. Maar ik geloof dat de editor de ze dus daar maken enkel in IE zal werken en dus niet Gecko compatible is. Lijkt me daar om MSHTLM te gaan, 'k had gisteren al iets in die aard getest, maar natuurlijk werkte dit niet in FF.

'k Zal het straks eens testen thuis.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 17:49

RM-rf

1 2 3 4 5 7 6 8 9

imp4ct schreef op vrijdag 17 augustus 2007 @ 02:13:

Als ik naar andere WYSIWYG editors kijk, is mijn grootste probleem het omzetten naar HTML.
Tja, daar maak je dan al volgens mij een grote fout.... de truc van een 'visuele editor' is niet dat je eerst iets schrijft en instellingen ingeeft en dat pas dàn opeens het omgezet wordt en je dus pas later te zien krijgt hoe het er uitziet.....

het handige aan zo'n editor is nu net dat je realtime en heel direkt bezig bent in de bestaande HTML. Wat je invoert en veranderd zie je dus direkt en realtime.

dat gaan ombouwen naar eerst omzetten naar BBcode en vervolgens weer omzetten naar HTML en daarna ook nog eens weer opslaan als de oorspronkelijke BB-code is een erg onhandige omweg, dan ga je wel heel erg veel dubbel of driedubbel doen en dat ook nog eens bij iedere aanpassing...

vanuit die grond lijkt het me veel handigere methode om gewoon een transformatie te maken van HTML naar BBcode bij submit, die enkel herkende HTML elementen omzet en niet herkende elementen weglaat, eventueel met een melding van welke elementen genegeert worden of een preview daarna van hoe de via BBcode gegenereerde html eruitziet...
een realtime previes lijkt me juist onhandig omdat de gekozen methodiek van en 'tussencode' juist per definitie al het realtime preview-element blokkeert.
imp4ct schreef op vrijdag 17 augustus 2007 @ 10:15:

Maar ik geloof dat de editor de ze dus daar maken enkel in IE zal werken en dus niet Gecko compatible is. Lijkt me daar om MSHTLM te gaan,
designMode wordt ook door Gecko ondersteund, alhoewel soms wat lastiger implementeerbaar.
http://developer.mozilla.org/en/docs/DOM:document.designMode

Hooguit moet je de mogelijk wat grovere code voor msie beter DOM compatible maken en soms heeft het zetten van de designMode via een setTimeout ook zin

[ Voor 16% gewijzigd door RM-rf op 17-08-2007 10:29 ]

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


Acties:
  • 0 Henk 'm!

  • sopsop
  • Registratie: Januari 2002
  • Laatst online: 14:36

sopsop

[v] [;,,;] [v]

imp4ct schreef op vrijdag 17 augustus 2007 @ 10:15:
[...]


Yep, was ermee bezig hoor. Maar ik geloof dat de editor de ze dus daar maken enkel in IE zal werken en dus niet Gecko compatible is. Lijkt me daar om MSHTLM te gaan, 'k had gisteren al iets in die aard getest, maar natuurlijk werkte dit niet in FF.

'k Zal het straks eens testen thuis.
Je wilde toch weten hoe het principe werkt? Dat kun je daar prima uithalen. De browsercompatability staat daar buiten.

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
RM-rf schreef op vrijdag 17 augustus 2007 @ 10:17:
[...]


Tja, daar maak je dan al volgens mij een grote fout.... de truc van een 'visuele editor' is niet dat je eerst iets schrijft en instellingen ingeeft en dat pas dàn opeens het omgezet wordt en je dus pas later te zien krijgt hoe het er uitziet.....
Je hebt volgens mij zeker een punt. Op zich, eens je een goed werkende WYSIWYG editor hebt, dien je niet meer BB-code nodig te hebben, kan daar wel in volgen. Nu goed, als ik de WYSIWYG editor volledig zelf ontwikkel kan ik de volledige controle wel krijgen over die output van de HTML, denk ik toch. 't Is gewoon, BB-code is soms voor een gebruiker een stuk makkelijker dan HTML en dus als ik BB-code zou toelaten in m'n editor en deze realtime kan omzetten naar iets visueel, dat zou echt wel tof zijn, of het echt kan werken, weet ik niet.
sopsop schreef op vrijdag 17 augustus 2007 @ 10:22:
[...]

Je wilde toch weten hoe het principe werkt? Dat kun je daar prima uithalen. De browsercompatability staat daar buiten.
Voor een deel wel, 'k weet nu dat het dus toch met een 'iframe' werkt. En dat ik dus via JS hem editable moet maken, maar ik vraag me af of dit ook zou werken met een textfield of een div.

Op dit moment gebruik ik nog een REGEX php script om m'n BB-code om te zetten naar HTML, maar hoe'k dit ga doen in JavaScript, dat is nog maar de vraag, waarschijnlijk kan dit even goed in JS geprogrammeerd worden, maar daar zal ik met der tijd wel achter komen.

[ Voor 15% gewijzigd door imp4ct op 17-08-2007 10:27 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 17:49

RM-rf

1 2 3 4 5 7 6 8 9

imp4ct schreef op vrijdag 17 augustus 2007 @ 10:25:

BB-code is soms voor een gebruiker een stuk makkelijker dan HTML
de truc van een visuele editor is nu juist dat de gebruiker geen code meer hoéft te tikken :)

in die zin snap ik niet waarom je eerst een visuele interface wilt maken, en vervolgens alsnog een mogelijkheid wilt gaan inbouwen om goodold 'code-tags' handmatig te gaan invoeren?

kun je dan niet beter een 'code-view' bouwen die switched tussen de normale preview en een codeview, zowel in HTML alswel eventueel in BB-code

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


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
RM-rf schreef op vrijdag 17 augustus 2007 @ 10:33:
[...]


de truc van een visuele editor is nu juist dat de gebruiker geen code meer hoéft te tikken :)

in die zin snap ik niet waarom je eerst een visuele interface wilt maken, en vervolgens alsnog een mogelijkheid wilt gaan inbouwen om goodold 'code-tags' handmatig te gaan invoeren?

kun je dan niet beter een 'code-view' bouwen die switched tussen de normale preview en een codeview, zowel in HTML alswel eventueel in BB-code
Wel bijvoorbeeld. Stel ik wil de gebruiker de mogelijkheden om quotes toe te voegen. Ik kan dit waarschijnlijk op verschillende manieren doorvoeren, bv. door een pop-up venster te maken waar de user een quote kan invoeren en eens ingevoerd wordt alles mooi in het input veld met opmaakt gezet, zal waarschijnlijk mogelijk zijn. Maar ik denk dan, is het misschien ook niet nuttig dat bv. de gebruiker maar [quote] hoeft te typen of iets in die aard.

Langs een kant snap ik je vraag hoor en lijkt mijn idee ook wel dom of raar als ik het zelf overdenk, maar 't is gewoon dat ik nog heel veel dingen te leren heb in het WYSIWYG gedoe.
'k Denk zelf, eens ik door heb hoe'k alle dingen direct visueel kan omzetten ik inderdaad van die BB-code enzow zal afstappen, omdat ze dan idd gewoon nutteloos overbodig zijn.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Goed, na veel lezen en zoeken nog op Google ben ik er dan toch een beetje in geslaagd iets te maken.

Link: http://www.telenethulp.net

De knopjes voor bold - italic - underline dat werkt. Maar vermits ik op zo'n knopje klik verlies ik m'n focus dus in het iframe en ik weet dus niet hoe'k die focus kan terugkrijgen. 'k Weet dat er in JS een functie bestaat focus, maar die geld enkel voor tekstvelden kon ik terugvinden op W3C.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setInit()
{
  document.getElementById('wysiwyg_textarea').contentWindow.document.designMode = "on";
}

function setStyle(style,value)
{
  document.getElementById('wysiwyg_textarea').contentWindow.document.execCommand(style, false, value);
}

function setFocus()
{
  document.getElementById('wysiwyg_textarea').focus();
} 


De setFocus functie wilt dus niet werken, weet iemand hoe'k dat kan oplossen. BTW, mocht er een beter JS code bestaan dan die lange lijn 'contentWindow.document.exeCommand' mag je dat altijd zeggen, ik heb deze regel hier gevonden in een topic op GoT, bleek te werken dus jah.

Wat wel raar is in IE heeft hij dat probleem niet, daar behoud de iframe constant z'n focus, ook al klik ik op een knopje, cursor blijft bij de iframe, just in FF dus niet.

Edit:
Na nog wat getest te hebben, blijkt het. Wanneer ik 1x op de bold button klik alles naar behoren werkt. Klik ik er nog eens op, dan kan ik zelfs gewoon niets meer aanpassen in IE, blokkeert de iframe dus volledig. In Firefox is dat dan weer niet het geval. Ik snap er eigenlijk niets meer van

[ Voor 10% gewijzigd door imp4ct op 17-08-2007 23:57 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • kunnen
  • Registratie: Februari 2004
  • Niet online
Verander de cursor naar een typ-icon, wanneer je over de editor hangt.

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Pulsher schreef op zondag 19 augustus 2007 @ 00:16:
Verander de cursor naar een typ-icon, wanneer je over de editor hangt.
typ-icon :s, nog nooit van gehoord, geeft zelfs errors dus jah..

Dit helpt niet echt met het probleem

[ Voor 7% gewijzigd door imp4ct op 19-08-2007 14:30 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Ik lijk een oplossing gevonden te hebben.


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function exeInit()
{
  document.getElementById('wysiwyg_textarea').contentWindow.document.designMode = "on";
  document.getElementById('wysiwyg_textarea').contentWindow.designMode = "on";
}

function exeStyle(style,value)
{
  document.getElementById('wysiwyg_textarea').contentWindow.document.execCommand(style, false, value);
}

function exeFocus()
{
  document.getElementById('wysiwyg_textarea').contentWindow.focus();
} 


Heb enkel .contentWindow toegevoegd achter de focus en dan werkt het perfect in FireFox, 'k Hou deze topic op de hoogte hoe het loopt met de CMS, 't kan misschien nuttig zijn voor andere mensen.

[ Voor 6% gewijzigd door imp4ct op 19-08-2007 15:41 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Misschien een rare vraag, maar hoe lees je de tekst die je in je iframe zet uit ?
Vermits als ik in de code ga kijken er niets van code tussen m'n <iframe> tags staat.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Goed, 'k ben er dan wel na verloop van tijd zelf achter gekomen hoe'k dus de output van het iframe kon bemachtigen.

Maar nu is m'n volgende vraag. De iframe editor maakt z'n eigen HTML, nu is mijn vraag of je bv. die iframe kunt tweakers. Dus nu zet hij als ik m'n tekst bold maakt een

<span style=\"font-weight: bold;\">mijn tekst hier

Nu zou'k dus willen weten of je in staat bent dit dus aan te passen naar bv. gewoon <b>, vermits de FCK editor dit blijkbaar wel kan. 'k Ben wel de FCKeditor nu wat aan't doorzoeken, maar gho.. t'is zo ingewikkeld.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
De vragen blijven zich opstapelen, maar goed.

JavaScript:
1
document.getElementById('wysiwyg_textarea').contentWindow.document.body.innerHTML = "blablabal";


Dit werkt dus perfect in FireFox, het iframe wordt dus opgevuld. 't Voordeel is als ik hier van dit maak

JavaScript:
1
document.getElementById('wysiwyg_textarea').contentWindow.document.body.innerHTML = "<b>lekker vet</b>";


Dat dit ook in de iframe vet wordt afgedrukt. Maar natuurlijk... in IE werkt het dus niet. Iemand enig idee om dit op te lossen ?

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • funkwurm
  • Registratie: December 2005
  • Laatst online: 22-02-2021
Wat je nu doet is elk probleem waar je niet uitkomt hier plaatsen, soms heb je dan even later wel zelf de oplossing en kun je dat hier komen melden en in geen van de gevallen maak je duidelijk wat je zelf allemaal al geprobeerd hebt.

Voor ons is dit los zand, het geeft de indruk (buiten beschouwing latend of dat ook zo is) dat je erg weinig moeite doet voordat je iets vraagt. En in het geval dat je wel dingen probeert maar die hier niet post, zullen wij waarschijnlijk met voorstellen en probeersels komen die je zelf al geprobeerd hebt, dus duurt het langer voordat je iets hoort wat je nog niet geprobeerd had en wellicht de oplossing bevat.

Dus ik raad je aan om meer en langer te proberen, en waar mogelijk de problemen waar je echt niet uit komt hier te posten en duidelijk aan te geven wat je allemaal geprobeerd hebt.

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
funkwurm schreef op dinsdag 21 augustus 2007 @ 01:30:
Wat je nu doet is elk probleem waar je niet uitkomt hier plaatsen, soms heb je dan even later wel zelf de oplossing en kun je dat hier komen melden en in geen van de gevallen maak je duidelijk wat je zelf allemaal al geprobeerd hebt.

Voor ons is dit los zand, het geeft de indruk (buiten beschouwing latend of dat ook zo is) dat je erg weinig moeite doet voordat je iets vraagt. En in het geval dat je wel dingen probeert maar die hier niet post, zullen wij waarschijnlijk met voorstellen en probeersels komen die je zelf al geprobeerd hebt, dus duurt het langer voordat je iets hoort wat je nog niet geprobeerd had en wellicht de oplossing bevat.

Dus ik raad je aan om meer en langer te proberen, en waar mogelijk de problemen waar je echt niet uit komt hier te posten en duidelijk aan te geven wat je allemaal geprobeerd hebt.
Ik ken de werkwijze op Tweakers wel... RTFM is het motto meestal eerst, wat ik ook gedaan heb, Google en GoT heb ik echt wel fatsoenlijk afgezocht. 'k Heb zelfs een paar admins gecontacteerd, maar goed dat ga'k hierallemaal niet in een post gooien. Trouwens, ik heb ook al oplossingen in het topic gepost dus jah.

De laatste 2 problemen ben ik zelf dus nog niet uit en ik weet ook niet hoe het op te lossen, als het me wel gelukt was had ik het gepost. Nutteloos vragen stellen doe'k hier dus zeker niet. En persoonlijk denk ik toch dat de problemen duidelijk omschreven zijn.

[ Voor 4% gewijzigd door imp4ct op 21-08-2007 09:59 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • Blaise
  • Registratie: Juni 2001
  • Niet online
Ik denk dat het zelf coden van een WYIWYG editor erg hoog is gegrepen, zeker als je al zoveel moeite hebt met de beginselen. Daarnaast vind ik je motivatie voor BB code / zelf coden niet echt denderend.

Als het je uiteindelijk alleen om nette output van HTML gaat zou ik eens kijken naar TinyMCE (misschien ook andere, maar ik ken TinyMCE het beste).

In TinyMCE kan je aangeven welke HTML elementen wel/niet zijn toegestaan, welke elementen waar wel/niet mogen nesten, welke buttons je wilt weergeven in de toolbar, en nog veel meer. Kijk in de documentatie maar eens onder Cleanup/Output. Al met al heb je bijna volledige controle over de output. Ik denk dat je dan sneller klaar bent dan hoe je nu bezig bent.

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Blaise schreef op dinsdag 21 augustus 2007 @ 17:44:
Ik denk dat het zelf coden van een WYIWYG editor erg hoog is gegrepen, zeker als je al zoveel moeite hebt met de beginselen. Daarnaast vind ik je motivatie voor BB code / zelf coden niet echt denderend.

Als het je uiteindelijk alleen om nette output van HTML gaat zou ik eens kijken naar TinyMCE (misschien ook andere, maar ik ken TinyMCE het beste).

In TinyMCE kan je aangeven welke HTML elementen wel/niet zijn toegestaan, welke elementen waar wel/niet mogen nesten, welke buttons je wilt weergeven in de toolbar, en nog veel meer. Kijk in de documentatie maar eens onder Cleanup/Output. Al met al heb je bijna volledige controle over de output. Ik denk dat je dan sneller klaar bent dan hoe je nu bezig bent.
Snap niet waarom mensen altijd naar het makkelijke willen grijpen. Ik wil zelf echt leren hoe zoiets in elkaar zit. Mijn WYSIWYG editor hoeft helemaal niet zo uitgebreid te zijn als een FCK, zelfs een TinyMCE. 't Nadeel aan al die dingen is dat je steeds afhangt van het programma, ik wil het volledig 100% zelf kunnen beheren en dat gaat dus niet met die programma's vermits je, altijd wel aan iets zal gebonden zijn.

Dat mijn JavaScript kennis niet enorm goed is, ok... ik ben hier om bij te leren, 'k denk dat we dit allemaal zijn anders zou dit forum zelfs niet meer bestaan. Maar daar draait het allemaal niet om, ik hoop gewoon hier een antwoord te vinden op m'n vragen. 'k Kan me niet inbeelden dat er echt niemand zou zijn die het antwoord niet weet.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • funkwurm
  • Registratie: December 2005
  • Laatst online: 22-02-2021
imp4ct schreef op dinsdag 21 augustus 2007 @ 09:40:
[...]


Ik ken de werkwijze op Tweakers wel... RTFM is het motto meestal eerst, wat ik ook gedaan heb, Google en GoT heb ik echt wel fatsoenlijk afgezocht. 'k Heb zelfs een paar admins gecontacteerd, maar goed dat ga'k hierallemaal niet in een post gooien. Trouwens, ik heb ook al oplossingen in het topic gepost dus jah.

De laatste 2 problemen ben ik zelf dus nog niet uit en ik weet ook niet hoe het op te lossen, als het me wel gelukt was had ik het gepost. Nutteloos vragen stellen doe'k hier dus zeker niet. En persoonlijk denk ik toch dat de problemen duidelijk omschreven zijn.
Je hoort mij geen RTFM of UTFS roepen, dus leg me dat ook niet in de mond. Je hoort me zeggen dat ik buiten beschouwing laat of het ook inderdaad zo is dat je weinig probeert, want ik weet niet wat je allemaal geprobeerd hebt. Ik zeg alleen dat het die _indruk_ wekt, en die indruk wil je waarschijnlijk niet wekken. Ik attendeer je hier alleen op en leg ook andere redenen uit waarom je altijd moet posten wat je geprobeerd hebt.

Ook heb je mij niet horen zeggen dat ik je vragen nutteloos vind, want ik verbaas me ook dat IE een <b>-element niet herkent als je hem er met innerHTML in zet. Ik probeer je duidelijk te maken dat het onvolledig is wanneer je niet aangeeft wat het resultaat in IE dan wel is (zie je de tekst <b> letterlijk staan? Zie je de tag niet maar wordt de tekst ook niet dik? Zie je helemaal geen tekst?) en voor zover ik uit je post kan opmaken heb je alleen innerHTML= geprobeerd, terwijl er meerdere manieren zijn om elementen aan een document toe te voegen (google eens op createElement en appendChild).

Je vind zelf dat je problemen duidelijk omschreven zijn, dat is mooi. Maar wellicht kun je nadenken over waarom er dan niemand met suggesties reageert, maar met opmerkingen zoals die van mij en Blaise komen. Als je een sneller een beter antwoord wil op je vragen zul je het iets anders aan moeten pakken, en ik probeer je vriendelijk doch dringend aan te geven hoe.

Tot slot is de werkwijze van tweakers.net volgens mij niet dat je de admins mailt met je probleem, wij hebben toch meer kennis van zaken dan zij ;)

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Oki here goes again then.

JavaScript:
1
document.getElementById('wysiwyg_textarea').contentWindow.document.body.innerHTML = "<b>lekker vet</b>";


Als je gaat kijken zie je dat helemaal achteraan er een '=' - teken staat. Ik geef de innerHTML van mijn element (in dit geval de <iframe>) dus een waarde mee (in dit gavel <b>lekker vet</b>").

In FireFox wordt deze waarde weergegeven in de <iframe> met de opmaak erbij, dus de tekst wordt in het vet afgedrukt. In IE komt er helemaal niets te staan in het <iframe>. Ook geeft IE mij deze foutmelding.

Afbeeldingslocatie: http://www.telenethulp.net/images/fout.gif

Waar ik uit kan opmaken dat hij dus blijkbaar geen waarde hieraan kan toevoegen. Of dat innerHTML enkel een getter is en geen setter.

De vraag is nu, hoe los ik dit op in IE ? Ik heb al bijna alle mogelijkheden in schrijfwijze geprobeerd voor dit element, maar niet lijkt te helpen. Op Google zoek ik me dood naar een oplossing, maar alles wat ik probeer wat ik daar vind werkt niet.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

Verwijderd

Je bent overigens niet de enige die bezig is met het ontwikkelen van een WYSIWYG Editor voor online. Ik doe het namelijk ook. Bij mij is het echter wel zover dat alles werkt en ook alles in FF, IE, Safari en Opera werkt.
Snap overigens niet hoe sommigen het in hun knar krijgen om IE-oplossingen aan te dragen. FF is veel simpeler, het W3C-DOM is veel makkelijker dan het trident-model van IE, en is bovendien ook beter gedocumenteerd.

Even een paar linkjes voor je:
http://developer.mozilla....egory:Gecko_DOM_Reference
http://developer.mozilla.org/en/docs/Midas

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Heb je dan misschien ook enige raad inzake de problemen die'k hier dus post? 'k Weet dat ik bijvoorbeeld de html ouput die door het <iframe> zelf gemaakt wordt kan omvormen via reg.exp in javascript of in een PHP script.

Maar doe jij dit anders, of pas je al direct de <iframe> output aan als de gebruiker nog aan't typen is, enz... Op deze vragen zoek ik dus een antwoord. Ik heb ook via FCKeditor toegang gekregen tot de development code, maar eigenlijk is die zo groot en zo uitgebreid dat ik er gewoon niet wijs uit geraak.

Mijn bedoeling is een simpele WYSIWYG editor te maken met de basis functies that's it. Naderhand eens ik het goed onder de knie heb zal ik er misschien nog extra functies aan toe voegen, maar eerst wil ik dus een goed werkende basis versie waar alle vereiste functies dus inzitten.

Bedankt voor de links van mozilla, ben het aan't doorlezen. Maar natuurlijk komt de vraag, 't werkt dan misschien in FF, maar hoe heb jij dan de problemen in IE opgelost ?

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

Verwijderd

<span style=\"font-weight: bold;\">mijn tekst hier => <strong>mijn tekst hier...
Is helemaal geen goed idee, zou het eerder andersom doen. Maar ik neem aan dat dit in FF is? Dan kun je het zo doen:
document.designMode('styleWithCSS', false, false);

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Verwijderd schreef op woensdag 22 augustus 2007 @ 15:40:
<span style=\"font-weight: bold;\">mijn tekst hier => <strong>mijn tekst hier...
Is helemaal geen goed idee, zou het eerder andersom doen. Maar ik neem aan dat dit in FF is? Dan kun je het zo doen:
document.designMode('styleWithCSS', false, false);
Heb het even nagelezen in Midas, ziet er HEEL handig uit! Nu hoe doe je dit dan in IE vraag ik mij af, vermits dit dus waarschijnlijk niet voor IE zal bedoeld zijn deze functie.

[ Voor 21% gewijzigd door imp4ct op 22-08-2007 16:14 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Ok i love this one!! THX JWvdv

Buiten het feit dat FF en IE het verschillend doen ben ik ZEER tevreden met je reply!

Even voor de mensen het uitleggen. Het gebruik van dit commando

JavaScript:
1
document.getElementById('wysiwyg_textarea').contentWindow.document.execCommand('styleWithCSS', false, false);


Levert echt mooie code op. Enkel wordt het in FF en IE anders omgezet.
Even voorbeeldje.

FF <iframe> html ouput
HTML:
1
2
3
4
5
dit is normaal<br>
<b>dit is lekker vet</b><br>
<i>krommer kan het niet</i><br>
<u>eventjes onderstrepen<br>
<i><b>alles bij elkaar</b></i></u>


IE
HTML:
1
2
3
4
5
<P>dit is normaal<BR>
<STRONG>dit is lekker vet<BR>
</STRONG><EM>krommer kan het niet</EM><BR>
<U>even onderstrepen<BR>
<STRONG><EM>alles bij elkaar</EM></STRONG></U></P>


Je ziet dus dat FF en IE een verschillende output hebben, maar nu zie je tenminste wel goed het onderschijt binnen de tags, waar je hiervoor dus een <span> met CSS opmaak kreeg.
Als je dus controle over je HTML wilt krijgen, this is the way to go!!

Zal later hier de regular-exp zetten die'k gebruik om zowel de FF als IE code te zuiveren

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

Verwijderd

Bij deze zal ik ook even mijn code voor je posten... Misschien kun je er wat voordeel mee doen...:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
/*
 *  Compatibility prototype for handling selection in any window
 *
 *  @author Jan Willem van der Veer <jwvdveer@gmail.com>
 */

function selectionObject(workwindow){
    this.window = window;
    if((typeof(workwindow)).toLowerCase() == 'object'){
        this.window = workwindow;
    }
}

selectionObject.prototype = {
    'pasteHTML': function(html){
        if(this.window && ((typeof(html)).toLowerCase() == 'string')){
            if(window.getSelection){
                var selection = this.window.getSelection(), rangecount = 0;
                while(rangecount < selection.rangeCount){
                    var range = selection.getRangeAt(rangecount);
                    range.deleteContents();
                    var div = this.window.document.createElement('div');
                    div.innerHTML = html;

                    var count = (div.childNodes.length - 1);
                    while(count >= 0){
                        range.insertNode(div.childNodes[count]);
                        count -= 1;
                    }
                    rangecount += 1;
                    div = null;
                   
                    range.collapse(false);
                }
                return(true);
            }
            else if(this.window.document.selection && (range = this.window.document.selection.createRange())){
                range.pasteHTML(html);
                return(true);
            }
        }
    },
    'htmlText': function(){
        if(this.window){
            if(window.getSelection){
                var selection = this.window.getSelection(), div = document.createElement('div'), rangecount = 0;
                while(rangecount < selection.rangeCount){
                    var range = selection.getRangeAt(rangecount);
                    div.appendChild(range.cloneContents());
                    rangecount += 1;
                }
                return(div.innerHTML);
            }
            else if(document.selection){
                return(this.window.document.selection.createRange().htmlText);
            }
        }
    },
    'deselect': function(){
        if(window.getSelection){
            this.window.getSelection().removeAllRanges();
        }
        else if(document.selection){
            this.window.document.selection.empty();
        }
       
    },
    'text': function(){
        if(window.getSelection){
            return(this.window.getSelection().toString());
        }
        else if(document.selection){
            return(this.window.document.selection.createRange().text);
        }
    },
    'select': function(elmnt){
        if((typeof(elmnt)).toLowerCase() == 'object'){
            if(window.getSelection){
                var selection = this.window.getSelection(), range = document.createRange();
                selection.removeAllRanges();
                range.selectNode(elmnt);
                selection.addRange(range);
            }
            else if(document.selection){
                var range = this.window.document.selection.createRange();
                range.moveToElementText(elmnt);
                range.select();
            }
        }
    },
    'clear': function(elmnt){
        if(window.getSelection){
            this.window.getSelection().deleteFromDocument();
        }
        else if(document.selection){
            this.window.document.selection.clear();
        }
    },
    'parent': function(){
        if(window.getSelection){
            var selection = this.window.getSelection(), range;
            if(selection && (selection.rangeCount > 0) && (range = selection.getRangeAt(0))){
                var parent = range.commonAncestorContainer;
                while(parent.nodeType != 1){
                    parent = parent.parentNode;
                }
                return(parent);
            }
        }
        else if(document.selection){
            return(this.window.document.selection.createRange().parentElement());
        }
    }
}

//  End selection-prototype

/*
 *  Start of xHTML-functionallity
 *
 *  @author Jan Willem van der Veer <jwvdveer@gmail.com>
 */
 
var xhtmlspecialchars = {34:'quot', 38:'amp', 39:'apos', 60:'lt', 62:'gt'};
var xhtmlentities = {161:'iexcl', 162:'cent', 163:'pound', 164:'curren', 165:'yen', 166:'brvbar', 167:'sect', 168:'uml', 169:'copy', 170:'ordf', 171:'laquo', 172:'not', 173:'shy', 174:'reg', 175:'macr', 176:'deg', 177:'plusmn', 178:'sup2', 179:'sup3', 180:'acute', 181:'micro', 182:'para', 183:'middot', 184:'cedil', 185:'sup1', 186:'ordm', 187:'raquo', 188:'frac14', 189:'frac12', 190:'frac34', 191:'iquest', 192:'Agrave', 193:'Aacute', 194:'Acirc', 195:'Atilde', 196:'Auml', 197:'Aring', 198:'AElig', 199:'Ccedil', 200:'Egrave', 201:'Eacute', 202:'Ecirc', 203:'Euml', 204:'Igrave', 205:'Iacute', 206:'Icirc', 207:'Iuml', 208:'ETH', 209:'Ntilde', 210:'Ograve', 211:'Oacute', 212:'Ocirc', 213:'Otilde', 214:'Ouml', 215:'times', 216:'Oslash', 217:'Ugrave', 218:'Uacute', 219:'Ucirc', 220:'Uuml', 221:'Yacute', 222:'THORN', 223:'szlig', 224:'agrave', 225:'aacute', 226:'acirc', 227:'atilde', 228:'auml', 229:'aring', 230:'aelig', 231:'ccedil', 232:'egrave', 233:'eacute', 234:'ecirc', 235:'euml', 236:'igrave', 237:'iacute', 238:'icirc', 239:'iuml', 240:'eth', 241:'ntilde', 242:'ograve', 243:'oacute', 244:'ocirc', 245:'otilde', 246:'ouml', 247:'divide', 248:'oslash', 249:'ugrave', 250:'uacute', 251:'ucirc', 252:'uuml', 253:'yacute', 254:'thorn', 255:'yuml', 338:'OElig', 339:'oelig', 352:'Scaron', 353:'scaron', 376:'Yuml', 402:'fnof', 710:'circ', 732:'tilde', 913:'Alpha', 914:'Beta', 915:'Gamma', 916:'Delta', 917:'Epsilon', 918:'Zeta', 919:'Eta', 920:'Theta', 921:'Iota', 922:'Kappa', 923:'Lambda', 924:'Mu', 925:'Nu', 926:'Xi', 927:'Omicron', 928:'Pi', 929:'Rho', 931:'Sigma', 932:'Tau', 933:'Upsilon', 934:'Phi', 935:'Chi', 936:'Psi', 937:'Omega', 945:'alpha', 946:'beta', 947:'gamma', 948:'delta', 949:'epsilon', 950:'zeta', 951:'eta', 952:'theta', 953:'iota', 954:'kappa', 955:'lambda', 956:'mu', 957:'nu', 958:'xi', 959:'omicron', 960:'pi', 961:'rho', 962:'sigmaf', 963:'sigma', 964:'tau', 965:'upsilon', 966:'phi', 967:'chi', 968:'psi', 969:'omega', 977:'thetasym', 978:'upsih', 982:'piv', 8194:'ensp', 8195:'emsp', 8201:'thinsp', 8204:'zwnj', 8205:'zwj', 8206:'lrm', 8207:'rlm', 8211:'ndash', 8212:'mdash', 8216:'lsquo', 8217:'rsquo', 8218:'sbquo', 8220:'ldquo', 8221:'rdquo', 8222:'bdquo', 8224:'dagger', 8225:'Dagger', 8226:'bull', 8230:'hellip', 8240:'permil', 8242:'prime', 8243:'Prime', 8249:'lsaquo', 8250:'rsaquo', 8254:'oline', 8260:'frasl', 8364:'euro', 8465:'image', 8472:'weierp', 8476:'real', 8482:'trade', 8501:'alefsym', 8592:'larr', 8593:'uarr', 8594:'rarr', 8595:'darr', 8596:'harr', 8629:'crarr', 8656:'lArr', 8657:'uArr', 8658:'rArr', 8659:'dArr', 8660:'hArr', 8704:'forall', 8706:'part', 8707:'exist', 8709:'empty', 8711:'nabla', 8712:'isin', 8713:'notin', 8715:'ni', 8719:'prod', 8721:'sum', 8722:'minus', 8727:'lowast', 8730:'radic', 8733:'prop', 8734:'infin', 8736:'ang', 8743:'and', 8744:'or', 8745:'cap', 8746:'cup', 8747:'int', 8756:'there4', 8764:'sim', 8773:'cong', 8776:'asymp', 8800:'ne', 8801:'equiv', 8804:'le', 8805:'ge', 8834:'sub', 8835:'sup', 8836:'nsub', 8838:'sube', 8839:'supe', 8853:'oplus', 8855:'otimes', 8869:'perp', 8901:'sdot', 8968:'lceil', 8969:'rceil', 8970:'lfloor', 8971:'rfloor', 9001:'lang', 9002:'rang', 9674:'loz', 9824:'spades', 9827:'clubs', 9829:'hearts', 9830:'diams'};

String.prototype.xhtmlEntities = function(){
    var count = 0, returnstr='', lastord = -1, str = this.xhtmlSpecialChars(), ord;
    while(count < str.length){
        switch(ord = str.charCodeAt(count)){
            case 32:
            case 160:
                returnstr += (((lastord == 32) || (lastord == 160) || (lastord == -1) || (count == (str.length - 1)))? '&nbsp;' : str.charAt(count));
            break;
            default:
                returnstr += ((ord >= 128)? ('&' + (((typeof(xhtmlentities[ord])).toLowerCase() != 'undefined')? xhtmlentities[ord] : ('#' + ord)) + ';') : str.charAt(count));
            break;
        }
        lastord = ord;
        count += 1;
    }
    
    return(returnstr);
}

String.prototype.xhtmlSpecialChars = function(){
    var count = 0, returnstr = '';
    while(count < this.length){
        var ord = this.charCodeAt(count);
        returnstr += (((typeof(xhtmlspecialchars[ord])).toLowerCase() != 'undefined')? ('&' + xhtmlspecialchars[ord] + ';') : this.charAt(count));
        count += 1;     
    }

    return(returnstr);
}

function html2xhtml(elmnt){
    if(elmnt && elmnt.nodeType && (elmnt.nodeType == 1)){
        var xhtml = '';
        for(i in elmnt.childNodes){
            var child = elmnt.childNodes[i];
            
            if(child && ((typeof(child.nodeType)).toLowerCase() != 'undefined')){
                switch(child.nodeType){
                    case 1: // Element
                        var tagname = (child.tagName).toLowerCase();
                        switch(tagname){
                            case '':
                            case '!':
                                continue;
                            break;
                        }
                        
                        if(tagname.indexOf(':') != -1){
                            tagname = tagname.substring(tagname.indexOf(':') + 1);
                        }
                        
                        xhtml += '<' + tagname;
                        for(a in child.attributes){
                            var attribute = child.attributes[a];
                            if(attribute && attribute.nodeName){
                                var attrname = attribute.nodeName.toLowerCase();
                                var value = (((typeof(attribute.nodeValue)).toLowerCase() == 'string')? attribute.nodeValue : '');
                                
                                if(attribute.specified && (attrname != 'class') && (attrname.indexOf('_moz') == -1) && ((tagname != 'br') && (attrname != 'type')) && (value.indexOf('_moz') != 0) && (attrname != 'style')){
                                    if(value == ''){
                                        switch(attrname){
                                            case 'noshade':
                                            case 'checked':
                                            case 'selected':
                                            case 'nowrap':
                                            case 'disabled':
                                                value = attrname;
                                            break;
                                            case 'src':
                                            break;
                                        }
                                    }
                                    
                                    if(value != ''){
                                        xhtml += ' ' + attrname.xhtmlEntities() + '="' + value.xhtmlEntities() + '"';
                                    }
                                }
                            }
                        }
                        
                        var value = child.style.cssText;
                        if(((typeof(value)).toLowerCase() == 'string') && (value != '')){
                            xhtml += ' style="' + value.xhtmlEntities() + '"';
                        }
    
                        switch(tagname){
                            case 'br':
                            case 'hr':
                            case 'input':
                            case 'meta':
                            case 'link':
                            case 'base':
                            case 'basefont':
                            case 'img':
                            case 'bgsound':
                                xhtml += ' />';
                            break;
                            default:
                                xhtml += '>' + html2xhtml(child) + '</' + tagname + '>';
                            break;
                        }
                    break;
                    case 3: // Text
                        xhtml += child.nodeValue.xhtmlEntities();
                    break;
                }
            }
        }
    }
    
    return(xhtml);
}

//  End of XHTML-functionallity

/*
 *  Start of CMS-functionallity
 *
 *  @author Jan Willem van der Veer <jwvdveer@gmail.com>
 */

function cms_action(id, action, value){
    var cmsframe, cmswindow;
    if(cmsframe = document.getElementById('cms_' + id)){
        cmswindow = cmsframe.contentWindow;
        switch(action){
            case 'formatblock':
                if((typeof(value)).toLowerCase() == 'string'){
                    cmswindow.document.execCommand('formatblock', false, '<' + value + '>');
                }
            break;
            case 'insertlink':
                var href = window.prompt('Locatie van de link (zoals http://www.server.nl/, mailto:mail@domein.nl?subject=onderwerp, o.i.d.)', ':');
                if(href.indexOf(':') != -1){
                    var selection = new selectionObject(cmswindow);
                    if(!selection.text()){
                        var text = window.prompt('Tekst van de link', href);
                        if(((typeof(text)).toLowerCase() == 'string') && (text != '')){
                            cms_action(id, 'inserthtml', '<a href="' + href.xhtmlEntities() + '">' + text.xhtmlEntities() + '</a>');
                        }
                    }
                    else{
                        cmswindow.document.execCommand('createlink', false, href);
                    }
                }
            break;
            case 'inserthtml':
                if((typeof(value)).toLowerCase() == 'string'){
                    var selection = new selectionObject(cmswindow);
                    selection.pasteHTML(value);
                }
            break;
            case 'inserttable':
                var rows, cols, table = '<table border="1" width="100%">';
                if(((cols = parseInt(window.prompt('Hoeveel kolommen moet de tabel breed zijn?', 'getal'))) > 0) && ((rows = parseInt(window.prompt('Hoeveel rijen moet de tabel hoog zijn?', 'getal'))) > 0)){
                    while(rows > 0){
                        table += '<tr>';
                        var count = 0;
                        while(count < cols){
                            table += '<td>&nbsp;</td>';
                            count += 1;
                        }
                        rows -= 1;
                        table += '</tr>';
                    }
                    table += '</table>';
                    
                    cms_action(id, 'inserthtml', table);
                }
            break;
            case 'insertimage':
                if((typeof(value)).toLowerCase() != 'string'){
                    value = window.prompt('Geef de URL van het plaatje dat u wilt invoegen (begin met http:// of https://)', 'http://');
                }
                if(((typeof(value)).toLowerCase() == 'string') && (value.toLowerCase().indexOf('http:') != -1) || (value.toLowerCase().indexOf('https://') != -1)){
                    cmswindow.document.execCommand('insertimage', false, value);
                }
            break;
            case 'save':
                var cmselement, content;
                if(cmselement = document.getElementById(id)){
                    content = html2xhtml(cmswindow.document.body);
                    if((typeof(cmselement.value)).toLowerCase() != 'undefined'){
                        cmselement.value = content;
                    }
                    else{
                        cmselement.innerHTML = content;
                    }
                }
                return;
            break;
            default:
                cmswindow.document.execCommand(action, false, '');
            break;
        }
        cmswindow.focus();
    }
}

function cms_currentstyle(elmnt, style){
    if(((typeof(elmnt)).toLowerCase() == 'object') && ((typeof(style)).toLowerCase() == 'string')){
        if(window.getComputedStyle){
            var realstyle = window.getComputedStyle(elmnt);
            return(style.getPropertyValue(style));
        }
        else if(elmnt.currentStyle){
            return(elmnt.currentStyle[style]);
        }
    }
}

function cms_create(id, cmsimagesdir){
    if((document.getElementById(id)) && ((typeof(cmsimagesdir)).toLowerCase() == 'string')){
        var actions = [
            {'bold': 'Vet', 'italic': 'Schuin', 'underline': 'Onderstreept', 'strikethrough': 'Doorstreept', 'subscript': 'Subscript', 'superscript': 'Superscript', 'removeformat': 'Opmaak verwijderen'},
            {'cut': 'Knippen', 'copy': 'Kopi&euml;ren', 'paste': 'Plakken'},
            {'undo': 'Ongedaan maken', 'redo': 'Herhalen'},
            {'justifyleft': 'Links uitlijnen', 'justifycenter': 'Centreren', 'justifyright': 'Rechts uitlijnen'},
            {'indent': 'Insringen', 'outdent': 'Uitspringen'},
            {'insertorderedlist': 'Geordende lijst', 'insertunorderedlist': 'Ongeordende lijst'},
            {'formatblock_p': 'Normale paragraaf', 'formatblock_h1': 'Kop 1', 'formatblock_h2': 'Kop 2', 'formatblock_h3': 'Kop 3', 'formatblock_h4': 'Kop 4',  'formatblock_h5': 'Kop 5',  'formatblock_h6': 'Kop 6', 'formatblock_pre': 'Voorgeformatterd typemachineschrift (alleen tekst)'},
            {'inserthorizontalrule': 'Horizontale balk invoegen', 'insertlink': 'Link invoegen', 'inserttable': 'Tabel invoegen', 'insertimage': 'Plaatje invoegen'}
        ];
        var cmshtml = '<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background: #DDEEFF; border-top: 1px solid #336699;">';
        for(a in actions){
            cmshtml += '<table cellpadding="0" cellspacing="0" border="0" style="padding: 1px; float: left; border: 1px solid #336699; margin-top: -1px; margin-right: 3px; border-right-width: 2px; background: #FFFFFF;"><tr>';
            for(b in actions[a]){
                cmshtml += content = '<td><img src="' + cmsimagesdir + b + '.gif" alt="Klik voor actie" title="' + actions[a][b] + '" onclick="cms_action(\'' + id + '\', \'' + ((b.indexOf('_') != -1)? b.substring(0, b.indexOf('_')) : b) + '\'' + ((b.indexOf('_') == -1)? '' : (', \'' + b.substring((b.indexOf('_') +1), b.length) + '\'')) + ');" onmousemove="this.style.background=\'#FFCC66\'; this.style.borderColor=\'#336699\';" onmouseout="this.style.background=\'#FFFFFF\'; this.style.borderColor=\'#FFFFFF\';" style="border: 1px solid #FFFFFF; background: #FFFFFF;" /></td>';
            }
            cmshtml += '</tr></table>';
        }
        cmshtml += '</td></tr><tr><td><iframe id="cms_' + id + '" style="border: 1px solid #336699; padding: 0px; margin: 0px; height: 250px" width="100%" frameborder="0"></iframe><div id="cms_' + id + '_propertybox" style="border: 1px solid #336699; display: none; background: #99CCFF; overflow: auto;"></div></td></tr></table><div id="cms_' + id + '_contextmenu" style="border: 1px solid #003366; width: 150px; background: #DDEEFF; font: 14px Arial; position: absolute; display: none; overflow: hidden" onmouseout="cms_hidecontextmenu(\'' + id + '\', true);" onmousemove="cms_hidecontextmenu(\'' + id + '\', false);"></div>';
        document.write(cmshtml);
        cms_prepare(id);
    }
}

var cmscontextmenus = {}, cmscontextmenustimeouts = {};
function cms_prepare(id){
    var cmsframe, cmselement;
    
    if((cmsframe = document.getElementById('cms_' + id)) && (cmselement = document.getElementById(id))){
        var cmswindow = cmsframe.contentWindow;
        
        var content = (cmselement.value? cmselement.value : cmselement.innerHTML);
        if(cmswindow.document.open && cmswindow.document.close){
            cmswindow.document.open('text/html', 'replace');
            cmswindow.document.write("<html><head><title>CMS - Writer</title><style><!--\nbody { font: 14px Arial; margin: 0px; padding: 0px; }\n--></style></head><body>" + content + "</body></html>");
            cmswindow.document.close();
        }

        cmswindow.document.designMode = 'on';
        
        cmswindow.document.oncontextmenu = function(evt){
            var event = (this.event? this.event : evt);
            
            if(event){
                event.cancelBubble = true;
                if(event.stopPropagation){
                    event.stopPropagation();
                }
                
                var x = 0, y = 0, cmsframe, contextmenu;
                if((cmsframe = document.getElementById('cms_' + id)) && (contextmenu = document.getElementById('cms_' + id + '_contextmenu'))){
                    var object = cmsframe;
                    while(object && ((typeof(object.offsetLeft)).toLowerCase() == 'number') && ((typeof(object.offsetTop)).toLowerCase() == 'number')){
                        x += object.offsetLeft;
                        y += object.offsetTop;
                        object = (object.offsetParent? object.offsetParent : object.parentNode);
                    }
                    
                    x += (event.clientX? event.clientX : event.pageX);
                    y += (event.clientY? event.clientY : event.pageY);
                    elmnt = (event.srcElement? event.srcElement : (event.target? event.target : event.currentTarget));
                    var documentWidth = ((document.documentElement && document.documentElement.offsetWidth)? document.documentElement.offsetWidth : ((document.body && document.body.offsetWidth)? document.body.offsetWidth : false));
                    var documentHeight = ((document.documentElement && document.documentElement.offsetHeight)? document.documentElement.offsetHeight : (document.body && document.body.offsetHeight)? document.body.offsetHeight : false);
                    
                    contextmenu.innerHTML = '';
                    cmscontextmenus[id] = [];
                    while(elmnt && elmnt.nodeName && (elmnt.nodeName.toLowerCase() != 'body')){
                        contextmenu.innerHTML += '<a style="display: block; padding: 3px; width: 100%;" onmousemove="this.style.backgroundColor=\'#6699CC\'; this.style.color=\'#FFFFFF\'; this.style.textDecoration=\'underline\';" onmouseout="this.style.backgroundColor=\'\'; this.style.color=\'\'; this.style.textDecoration=\'\';" onclick="cms_showstyles(\'' + id + '\', cmscontextmenus[\'' + id + '\'][' + cmscontextmenus[id].length + ']); this.parentNode.style.display=\'none\';" onmouseover="cms_highlightobject(\'' + id + '\', cmscontextmenus[\'' + id + '\'][' + cmscontextmenus[id].length + ']);">' + elmnt.nodeName.toLowerCase() + '</div>';
                        cmscontextmenus[id][cmscontextmenus[id].length] = elmnt;
                        contextmenu.style.display = 'block';
                        elmnt = elmnt.parentNode;
                    }

                    contextmenu.style.left = (documentWidth && ((((x + 3) + contextmenu.offsetWidth) > documentWidth) && ((x - contextmenu.offsetWidth - 3) > 0))? (x - contextmenu.offsetWidth - 3) : (x + 3)) + 'px';
                    contextmenu.style.top = ((documentHeight && (((y + 3) + contextmenu.offsetHeight) > documentHeight) && ((y - 3 - contextmenu.offsetHeight) > 0))? (y - 3 - contextmenu.offsetHeight) : (y + 3)) + 'px';
                    cms_hidecontextmenu(id, true);
                }

                return(false);
            }
            
            return(true);
        }
        if(cmswindow.attachEvent){
            cmswindow.document.attachEvent('oncontextmenu', cmswindow.document.oncontextmenu);
        }
        if(cmswindow.addEventListener){
            cmswindow.document.addEventListener('contextmenu', cmswindow.document.oncontextmenu, false);
        }
        window.setInterval(function(){ cms_action(id, 'save'); }, 250);
    }
    else{
        window.setTimeout(function(){ cms_prepare(id); }, 500);
    }
}

function cms_hidecontextmenu(id, hide){
    if((typeof(cmscontextmenustimeouts[id])).toLowerCase() != 'undefined'){
        window.clearTimeout(cmscontextmenustimeouts[id]);
        cmscontextmenustimeouts[id] = null;
    }
    if(hide){
        cmscontextmenustimeouts[id] = window.setTimeout(function(){
            var contextmenu;
            if(contextmenu = document.getElementById('cms_' + id + '_contextmenu')){
                contextmenu.style.display = 'none';
            }
        }, 750);
    }
}

function cms_highlightobject(id, elmnt){
    var cmsframe;
    if(cmsframe = document.getElementById('cms_' + id)){
        var selection = new selectionObject(cmsframe.contentWindow);
        selection.select(elmnt);
    }
}

function cms_showstyles(id, elmnt){
    var propertybox, cmsframe;
}

//  End of cms-functionallity


Je mag dit wat mij betreft gebruiken. Maar liever niet copy&paste... Ik moet het namelijk ook nog aan iemand verpatsen... :D

Acties:
  • 0 Henk 'm!

Verwijderd

BTW: De bovenstaande code is nog lang niet af (enkel een tussenstandje)... Jammer genoeg kan ik de post niet meer wijzigen omdat ie op de één of andere manier te lang is... (hoe het kan dat ie er dan wel staat weet ik dan ook niet maar ja) :D

Om ergens in je pagina een cms-editor te maken, moet je bij mij dit doen:
code:
1
cms_create('id_van_element_met_html_voor_je_editor', './path/naar/plaatjes/van/cms-editor/');

[ Voor 28% gewijzigd door Verwijderd op 22-08-2007 21:00 ]


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Bedankt allesinds voor je code, ik snap er nog weinig van, maar ik geraak er wel uit :). 'k Denk niet dat ik er heel veel van ga gebruiken, vermits mijn CMS ook voor commercieel gebruik ontwikkeld wordt en ben ook geen copy - paste man.

Thx! Ik hou je op de hoogte.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Goed, natuurlijk bij het verder werken en ontwikkelen van WYSIWYG editor kom ik weer op een ander soort probleem.

Wanneer ik in IE in het <iframe> op enter duw (om een nieuwe regel te beginnen) gaat hij ineens 2 regels lager schrijven. Na controle van de code merk ik dus dat in IE telkens er op enter wordt geduwt in de <iframe> een <p>-tagg wordt aangemaakt, wat dus met zich meebrengt, 2 regels lager.

Niet goed dus, maar vermits een <iframe> geen even afhandeling heeft 'onkeydown' - 'onkeypress' enz... zit ik een beetje in de problemen, want ik vind hier op GoT wel topic over hetzelfde probleem maar dit is dan ofwel voor <input> velden of <div>'s die dus wel JS acties hebben.

Topics:
[js] nabootsen van de keycombinatie (shift+enter)
[javascript] Shift toets simuleren

'k Weet nu niet juist wat ik hier verkeerd doe, maar bij mij lukt het dus niet.

PS: JWvdv, vraagje... gebruik jij ook een <iframe> of gebruik jij een <div> en als je dus het laatste gebruikt hoe van je dit op in FireFox, vermits contentEditable toch nog niet ondersteunt wordt hierin.
Had beter moeten kijken in je cms_create functie, staat duidelijk een <iframe> stupid me 8)7

[ Voor 14% gewijzigd door imp4ct op 23-08-2007 09:46 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • sopsop
  • Registratie: Januari 2002
  • Laatst online: 14:36

sopsop

[v] [;,,;] [v]

imp4ct schreef op woensdag 22 augustus 2007 @ 23:53:
Goed, natuurlijk bij het verder werken en ontwikkelen van WYSIWYG editor kom ik weer op een ander soort probleem.

Wanneer ik in IE in het <iframe> op enter duw (om een nieuwe regel te beginnen) gaat hij ineens 2 regels lager schrijven. Na controle van de code merk ik dus dat in IE telkens er op enter wordt geduwt in de <iframe> een <p>-tagg wordt aangemaakt, wat dus met zich meebrengt, 2 regels lager.
Dit is default-behaviour. Enter geeft een nieuwe paragraaf, Shift+Enter geeft een <br/>. Daar moet je niets aan willen wijzigen. Dit is het zelfde als bijvoorbeeld in Word als je bullits aan het schrijven bent. Als je in een bullit regel op enter tikt, krijg je een nieuwe bullit, Duw je op Shift+Enter, krijg je een nieuwe regel in dezelfde bullit.

Zo hoort het overigens ook in Firefox te werken.

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
sopsop schreef op donderdag 23 augustus 2007 @ 09:49:
[...]

Dit is default-behaviour. Enter geeft een nieuwe paragraaf, Shift+Enter geeft een <br/>. Daar moet je niets aan willen wijzigen. Dit is het zelfde als bijvoorbeeld in Word als je bullits aan het schrijven bent. Als je in een bullit regel op enter tikt, krijg je een nieuwe bullit, Duw je op Shift+Enter, krijg je een nieuwe regel in dezelfde bullit.

Zo hoort het overigens ook in Firefox te werken.
Ah dat wist ik nog niet. Nu goed, dat het dus dan normaal is wat IE doet mag dan zo zijn. Mijn gebruikers zijn mega leken en gaan zich dus afvragen hoe het komt dat hij dus een dubbele "enter" plaats i.p.v. gewoon naar de nieuwe regel te gaan. Daar "normaal" gedrag van IE wil ik dus via een of andere manier omzijlen als dat mogelijk is.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • sopsop
  • Registratie: Januari 2002
  • Laatst online: 14:36

sopsop

[v] [;,,;] [v]

je kunt in de css de top-margin (en evt bottom-margin) van de <p></p> aanpassen.

Verwijderd

1. JW gebruikt een een iframe, gezien dat op alle browsers supported is, en dus ook in FF, Safari en Opera.
2. Jouw probleem met die enters is in FF heel makkelijk, weet niet of IE ook werkt:
JavaScript:
1
document.execCommand('insertbronreturn', false, true);

Als dit in IE niet werkt zul je het op IE wat anders moeten gaan doen:
JavaScript:
1
2
3
4
5
6
iframe.contentWindow.onkeydown = function(e){
  alert('er is op een toets geduwd, en nu kan ik gaan kijken of dit nr. 10 of 13 is en ipv een nieuwe paragraaf even een \'<br />\' invoegen');
}
if(window.attachEvent){
  iframe.contentWindow.attachEvent('onkeydown', iframe.contentWindow.onkeydown);
}

Zoals je ziet plak ik die events niet aan het iframe, maar aan de window dat in het iframe zit.
Overigens: die oplossingen die in die topics aangedragen worden zijn IE-only, en dus totaal niet compatible met één van de andere browsers

Kijk zelf ook eens een keertje hier: http://developer.mozilla.org/en/docs/Midas
En bekijk ook rustig eens de code van andere WYSIWYG-editors online.
Ik ben het persoonlijk eens met sopsop dat je daar niets aan moet willen veranderen. Zeker omdat in Office-2007 het ook op die manier werkt. Dus zo gauw Office-2007 ingeburgerd is, is dat voor iedereen gewoon de standaard manier van enter en leert men snel genoeg de [SHIFT] + [ENTER] kennen.
In FF werkt het trouwens bij mij standaard ook gewoon zo...

@imp4ct:
Weet jij überhaupt de beginselen van JavaScript al wel? Elke keer als er hier iets gepost wordt zit jij met een opmerking als: ik snap er nog niets van...

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Verwijderd schreef op donderdag 23 augustus 2007 @ 10:53:
@imp4ct:
Weet jij überhaupt de beginselen van JavaScript al wel? Elke keer als er hier iets gepost wordt zit jij met een opmerking als: ik snap er nog niets van...
De beginselen weet ik wel, maar dit gaat in mijn ogen soms als iets verder dan beginselen. Nu ik ben me al wel een tijdje aan't verdiepen in JS, boek gekocht van O'Reilly 'The Defenitive Guide' waar'k ook wel redelijk wat uithaal en W3CSchool is wel een vaste zoekstek geworden, maar t'is op dit ogenblik een enorm leerproces.

't Is dus niet dat ik niet zoek en m'n gedachtegang ligt ook vaak juist, maar om het dan juist uit te voeren in JS daar zit vaak nog het probleem. Maar goed, vind het heel tof dat je me zo helpt, maar ik snap ook dat het vervelend moet zijn telkens (voor jou) zo'n eenvoudige dingen uit te leggen.

Maar in broncode snuffelen doe'k echt wel veel, maar als je het niet altijd snapt wat er juist staat is dat natuurlijk moeilijk.

http://developer.mozilla.org/en/docs/Midas daar ben ik gisteren en vandaag nog steeds op aan't kijken, doorlezen enz... is natuurlijk weer een hele brok info, maar hier raak ik wel wijs uit. Zeer nuttige pagina overigens!
Verwijderd schreef op donderdag 23 augustus 2007 @ 10:53:
1. JW gebruikt een een iframe, gezien dat op alle browsers supported is, en dus ook in FF, Safari en Opera.
2. Jouw probleem met die enters is in FF heel makkelijk, weet niet of IE ook werkt:
JavaScript:
1
document.execCommand('insertbronreturn', false, true);

Als dit in IE niet werkt zul je het op IE wat anders moeten gaan doen:
[CODE=javascript]
Dit had ik idd wel mogen opmerken in de lijst van functies, maar goed. 's Avonds als'k thuis kom van't werk begint de vermoeidheid al vaak goed door te wegen en dan ga je snel dingen overslaan. Maar soit, straks zal ik je laten weten of het werkt. Thx again!

[ Voor 33% gewijzigd door imp4ct op 23-08-2007 11:29 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Weer de hele avond bezig geweest om gewoon nog maar een alert() te laten werken als er op een toets werd gedrukt in het <iframe> maar na meer dan 3 uur zoeken, ploeteren en prullen geef ik het op.

Langs een kant snap ik totaal niet meer wat er fout loopt en waarom het zo enorm moeilijk is een event los te laten op een <iframe>. Ik las in m'n boek dat binnen HTML <iframe> dus geen evenHandlers heeft, 't kan dus daar natuurlijk veel mee te maken hebben vermits ik HTML 4.01 gebruik en niet xHTML, misschien dat het daar iets mee te maken heeft, ik weet het niet zeker.

Nu, was ik dus op wat grotere sites gaan kijken en blijkt dat zelfs eBay hetzelfde "probleem" heeft, hoewel het dus geen probleem is maar absoluut normaal gedrag van IE. Ergens heb ik dan maar besloten om het hierbij te laten en me echt niet verder te gaan verdiepen hoe het dan wel te kunnen oplossen, wat ergens werd ik er gewoon zot van (André kan getuigen :)).

Een goede melding bovenaan de WYSIWYG die zegt hoe je dus naar een nieuwe lijn gaat zal dan moeten volstaan. Hoewel ik nu tegen enorm veel problemen aanloop bij de ontwikkeling van de WYSIWYG-editor toch vind ik het enorm interessant en ben ik ook van plan (als het mag van GoT admins) om echt een volledige soort "tutorial" hier te plaatsen met vooral mogelijk fouten die je kan tegenkomen, lijkt me voor veel mensen zeer interessant en zeker voor diegene die nog niet zo enorm veel kennis van JavaScript hebben.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Acties:
  • 0 Henk 'm!

Verwijderd

Nee, je moet ook geen events op het iframe loslaten, maar op het window wat in het iframe zit. Dus:
iframe.contentWindow.onkeyup = function(){}
if(iframe.contentWindow.attachEvent){
iframe.contentWindow.attachEvent('onkeyup', iframe.contentWindow.onkeyup);
}
else if(iframe.contentWindow.addEventListener){
iframe.contentWindow.addEventListener('keyup', iframe.contentWindow.onkeyup, false);
}

Acties:
  • 0 Henk 'm!

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Verwijderd schreef op woensdag 29 augustus 2007 @ 14:35:
Nee, je moet ook geen events op het iframe loslaten, maar op het window wat in het iframe zit. Dus:
iframe.contentWindow.onkeyup = function(){}
if(iframe.contentWindow.attachEvent){
iframe.contentWindow.attachEvent('onkeyup', iframe.contentWindow.onkeyup);
}
else if(iframe.contentWindow.addEventListener){
iframe.contentWindow.addEventListener('keyup', iframe.contentWindow.onkeyup, false);
}
'k Vind het tof dat je me zo wilt helpen en deze keer snap ik nu dus echt wel wat je bedoelt. Maar m'n contentWindow reageert dus totaal op niets. Wat ik ook niet weet is, zet je deze code bv. in een init function die je uitvoert bij de load van de body, of gewoon in de HTML tussen <script> tags.

Allé 'k weet dat het misschien domme vragen zijn, maar ik probeer dus echt vanalles uit, maar ik krijg dus totaal geen resultaat. Ik probeer nu meestal een alert functie erbij te gebruiken, zodat ik alerts zou krijgen bij elke keer dat ik een toets indruk in de contentWindow, maar dat werkt dus niet.

Fouten krijg ik welliswaar niet dus de code is juist maar, daar blijft het dus bij. 'k Denk persoonlijk dat ik dit onderdeel beter kan laten vallen en met een degelijk regEx de code kan zuiveren ofzo.

Een lichtpuntje misschien :). Heb nogal wat zitten zoeken met getSelection, en nu met die contentWindow eraan toe te voegen werkt het eindelijk, raar want ik dacht dat ik het zoal geprobeerd had, maar waarschijnlijk toch iets fout gedaan, as usual!

Volgende zoektocht is het proberen achterhalen als m'n cursus langs een letter staat of tussen een hoop tekst staat die cursief geschreven is dat de nodige knopje dan ook automatisch worden aangevinkt.

Hoe dan ook, JWvdV weer erg bedankt! _/-\o_

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Verwijderd

Wel, laat ik het zo uitleggen: Aan iframes kun je geen window-events verbinden (alleen HTML-events). Nu is het zo dat er in een frame altijd een window zit. Dit window kun je opvragen via iframe.contentWindow (waarbij de variabele iframe verwijst naar het iframe wat jij moet hebben, in jouw geval is
JavaScript:
1
iframe = document.getElementById('wysiwyg_textarea')
).
Ik zou zeggen probeer dit eens:
JavaScript:
1
2
3
4
5
6
7
8
9
10
var iframe, iWindow;
if((iframe = document.getElementById('wysiwyg_textarea')) && (iWindow = iframe.contentWindow)){
  iWindow.designMode = 'On'; // Belangrijk dat je dit doet voor dat je events gaat zetten.

  // Events
  iWindow.onkeyup = function(evt){
    alert('Je liet een toets opkomen');
  }
  if(iWindow.attachEvent) iWindow.attachEvent('onkeyup', iWindow.onkeyup);
  else if(iWindow.addEventListener) iWindow.addEventListener('keyup', iWindow.onkeyup, false);


BTW: Voor die selectie mag je gewoon mijn selection-class gebruiken. Die heb ik namelijk ook op PHPFreakz gepubliceerd (daar krijg je trouwens beter/sneller hulp dan hier, omdat je daar meer mensen hebben die zich met dit soort dingen bezighouden).
http://www.phpfreakz.nl/library.php?sid=25857

[ Voor 16% gewijzigd door Verwijderd op 30-08-2007 10:02 ]


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Vraag blijft dus bij mij "waar" zet ik die code. Want ik veronderstel dat toch niet bij elke toetsaanslag m'n document gaat kijken of er een script is die iets moet doen bij een toetsaanslag.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


Verwijderd

quote: imp4ct
Vraag blijft dus bij mij "waar" zet ik die code. Want ik veronderstel dat toch niet bij elke toetsaanslag m'n document gaat kijken of er een script is die iets moet doen bij een toetsaanslag.
Nee, dat doe jij ook niet, maar dat doet je script :D
Maar effe serieus, je gaat echt per toetsaanslag kijken wat er ingetoets is, en als het een enter of iets anders is, dan kun je em afvangen. Ik zou dan trouwens wel met onkeypress werken ipv. onkeyup.

Ik snap sowieso niet wat jij bedoelt met de vraag `waar?`. Waar je die code zet heb ik op deze manier al laten zien.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
var iframe, iWindow;
if((iframe = document.getElementById('wysiwyg_textarea')) && (iWindow = iframe.contentWindow)){
  iWindow.designMode = 'On'; // Belangrijk dat je dit doet voor dat je events gaat zetten.

  // Events
  iWindow.onkeypress = function(evt){
    alert('Ik krijg een keypress binnen');
  }
  if(iWindow.attachEvent) iWindow.attachEvent('onkeypress', iWindow.onkeypress);
  else if(iWindow.addEventListener) iWindow.addEventListener('keypress', iWindow.onkeypress, false);
}

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Nene, die alert is gewoon om te zien of het werkt. Ik ga echt niet nagaan, wanneer welke toets wordt ingedrukt enzo. Maar 'k moet het gewoon werkend zien te krijgen en eens dat in orde is, dan weet ik wel wat ik ermee kan doen.

Zit nu op't werk dus kan jammer genoeg niets testen. Zal voor deze avond zijn.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19
Verwijderd schreef op donderdag 30 augustus 2007 @ 13:12:
[...]
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
var iframe, iWindow;
if((iframe = document.getElementById('wysiwyg_textarea')) && (iWindow = iframe.contentWindow)){
  iWindow.designMode = 'On'; // Belangrijk dat je dit doet voor dat je events gaat zetten.

  // Events
  iWindow.onkeypress = function(evt){
    alert('Ik krijg een keypress binnen');
  }
  if(iWindow.attachEvent) iWindow.attachEvent('onkeypress', iWindow.onkeypress);
  else if(iWindow.addEventListener) iWindow.addEventListener('keypress', iWindow.onkeypress, false);
}
't Werkt perfect! Maar mja enkel in FireFox spijtig genoeg. Ga straks eens verder zoeken hoe'k het kan laten werken in IE.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

Pagina: 1