[js] cmsje wysiwyg in textarea

[RSD]

Ok, ik ben nu zo ver dat ik met wat knoppen, makkelijk html tags kan maken in een text area. Nu zou het mooi zijn als ik dmv een andere knop een soort van preview kan maken zonder dat het form gesubmit wordt, dus dat bijv de text area het uiteindelijke resultaat laat zien. is dit mogelijk en zo ja hoe?

[Morrar]

Inhoud van het textarea opvragen met javascript en dan bijvoorbeeld wegschrijven naar de innerHTML van een div-je (dat divje kun je dan mooi op dezelfde plek neerzetten zodat het over het textarea valt). Dus zoiets:

code:

function Preview()
{    oEditArea = document.getElementById("EditArea");
     if(!oEditArea) { alert("Editable textarea not found!"); return; }
    sHTML = oTextarea.value;
 
     oPrevDiv = document.getElementById("PrevDiv");
     if(!oPrevDiv) { alert("Preview div not found!"); return; }
     oPrevDiv.innerHTML = sHTML;
}

@mabit: misschien voor de lol? Om er iets van te leren? Of omdat hij misschien een "betere" (als in meer aaneigen wensen aangepaste) versie wil? Er zijn honderden redenen te verzinnen...

[ Voor 72% gewijzigd door Morrar op 11-03-2005 01:33 ]

[Verwijderd]

niet om het een of ander, maar de volgende 3 woorden kwamen in me op; wiel, opnieuw, uitvinden.

Oftewel, waarom iets zelf in elkaar zetten als het gratis op internet te vinden is? FCK Editor?

[HawVer]

Kennis is vind ik een erg goede reden om een wysiwyg editor te maken. Overigens is deze tutorial zeer aan te raden. http://www.webreference.c...g/javascript/gr/column11/ Als het goed is is er ook een part twee ergens op de website.

[Verwijderd]

Verwijderd schreef op vrijdag 11 maart 2005 @ 01:31:
niet om het een of ander, maar de volgende 3 woorden kwamen in me op; wiel, opnieuw, uitvinden.

Oftewel, waarom iets zelf in elkaar zetten als het gratis op internet te vinden is? FCK Editor?

1.) Zelf het wiel uitvinden zorgt er voor dat je de materie volledig doorgrondt. Wanneer je zo'n editor puur in elkaar wil zetten om er van te leren - als hobby - dan is er geen enkel probleem.

2.) FCK Editor is een half uitgevonden wiel. Dat ding is om te janken... Ik kan me best voorstellen dat TS zelf een betere editor wil maken.


TS > Ik snap je probleem niet helemaal. Wat voor preview wil je hebben? Van het design of van de HTML? Ik vermoed van de HTML aangezien je in een tekstarea het resultaat wil weergeven. Je kan gewoon de HTML opvragen van het iframe en die in je textarea gooien.

[Verwijderd]

Verwijderd schreef op vrijdag 11 maart 2005 @ 12:22:
[...]


1.) Zelf het wiel uitvinden zorgt er voor dat je de materie volledig doorgrondt. Wanneer je zo'n editor puur in elkaar wil zetten om er van te leren - als hobby - dan is er geen enkel probleem.

2.) FCK Editor is een half uitgevonden wiel. Dat ding is om te janken... Ik kan me best voorstellen dat TS zelf een betere editor wil maken.


TS > Ik snap je probleem niet helemaal. Wat voor preview wil je hebben? Van het design of van de HTML? Ik vermoed van de HTML aangezien je in een tekstarea het resultaat wil weergeven. Je kan gewoon de HTML opvragen van het iframe en die in je textarea gooien.

[offtopic] Wat is er mis met FCKeditor???

Als je zelf een goed werkende web-based HTML editor zou ik er alvast een jaartje voor uittrekken (bij wijze van spreken). Gezien het aantal editors op internet lijkt het me een beetje verspilde tijd.

[ Voor 13% gewijzigd door Verwijderd op 11-03-2005 14:07 ]

[Verwijderd]

Verwijderd schreef op vrijdag 11 maart 2005 @ 14:05:
[...]


[offtopic] Wat is er mis met FCKeditor???

Als je zelf een goed werkende web-based HTML editor zou ik er alvast een jaartje voor uittrekken (bij wijze van spreken). Gezien het aantal editors op internet lijkt het me een beetje verspilde tijd.

Een goede editor maken vreet tijd. Ik zal even wat punten opnoemen aan FCKEditor.

2.) Niet semantisch gestuurd worden, de gebruiker kan het hele design verklooien waarna jij als programmeur alles weer recht mag breien.
3.) Selecteer tekst, pas in de demo de Title Style toe. Je selection wordt vernaggeld in FF.
4.) Ik vind de toolbar niet overzichtelijk. Te veel opties.
5.) Ben van mening dat een editor content moet beheren en geen complete formulieren.
6.) Voeg een tabel in, klik in een cell. Klik rechter muisknop. Het context menu wordt verkeerd weergegeven. Verkeerd berekent. De offsetLeft van het iframe wordt er niet van af getrokken.
7.) Voeg een complexe tabel in. Ga vervolgens rijen invoegen. Je structuur wordt vernaggeld.
8.) Klik op een dropdown. Klik er nog een keer op. Het dropdown sluit zich dan niet.

Hoelang moet ik nog doorgaan?

[ Voor 5% gewijzigd door Verwijderd op 11-03-2005 14:24 ]

[mullah]

Verwijderd schreef op vrijdag 11 maart 2005 @ 14:24:
[...]
2.) Niet semantisch gestuurd worden, de gebruiker kan het hele design verklooien waarna jij als programmeur alles weer recht mag breien.

Geldt voor 99,9% van de rich html editors die ik heb gezien.. en die 0,1% die overblijft doet het niet in meer dan de helft van de browsers die van belang zijn.

4.) Ik vind de toolbar niet overzichtelijk. Te veel opties.

Je kunt de toolbar customizen..

5.) Ben van mening dat een editor content moet beheren en geen complete formulieren.

Dan wil je dus gewoon een textarea

Hoelang moet ik nog doorgaan?

Je mag nog wel even doorgaan, maar op de een of andere manier verwacht je van FCKEdit dat het je tekstverwerker vervangt - en aan de andere kant vind je hem te ingewikkeld.

Voorlopig vind ik FCKEditor de beste / makkelijkst te implementeren wysywig html tool. Ik zet alleen een heleboel van de extra functies zoals tables en styles het liefste uit, omdat de layout inderdaad niet goed voorspelbaar is, en ze in een CMS ook vaak niet nodig zijn.

[Verwijderd]

Tegenwoordig valt er wel wat voor te zeggen We zitten nu zelf intern ook te bekijken of we er zelf een gaan maken nu htmlArea zichzelf dood heeft verklaard.

Er zitten voor ons geen risico's aan, omdat we zelf de kennis in huis hebben voor het schrijven van een editor. Voordelen zijn wel dat we in full control zijn, makkelijk bugfixes kunnen toepassen waarbij we weten wat we doen (in tegenstelling tot de bloated htmlArea code) en niet meer afhankelijk zijn.

Er valt dus wat voor te zeggen.

[Verwijderd]

mullah schreef op vrijdag 11 maart 2005 @ 14:40:
[...]

Geldt voor 99,9% van de rich html editors die ik heb gezien.. en die 0,1% die overblijft doet het niet in meer dan de helft van de browsers die van belang zijn.

Beter zoeken. Ik ken editors die wel via semantiek werken en in zowel IE als Gecko gebaseerde browsers werken.

[...]

Je kunt de toolbar customizen..

Mijn fout

[...]

Dan wil je dus gewoon een textarea

Nee

[...]

Hier stond een mooi verhaal.

We moeten eerst eens bekijken wat een rich text editor zou moeten kunnen. Wanneer de designer z'n design heeft gemaakt ligt het stramien vast. De klant weet *niets* van HTML, maar wil wel z'n site aan kunnen passen.
Een rich text editor zou alleen belangrijke semantische elementen aan moeten kunnen passen. De klant moet een nieuwe paragraaf in kunnen voegen, hx elementen, een blockquote. Eventueel zou je een template parser kunnen maken zodat je editor ook structuren van semantische elementen kan invoegen: het invoegen van epigrafen, uitgebreide quotes etc.

Je klant wil je niet het lettertype laten bepalen, hij moet niet aan de kleuren zitten, hij moet geen formulieren invoegen. Een rich text editor is bedoelt om enkel en alleen content op te maken volgens het stramien gekozen door de designer.

De meeste editors die verkocht worden zijn gewoon fout - volgens dit paradigma. Ze redeneren: hoe meer opties, hoe beter. Maar dat *is* niet zo. Een goede editor stuurt de gebruiker. Laat hem keuzes maken en dwingt hem zo onbewust goede elementen te gebruiken. Semantiek is heel belangrijk, belangrijker dan de meeste mensen beseffen.

Er wordt veel gekotst op de huidige editors, maar het kan gewoon beter. Het is mogelijk een editor zo in elkaar te zetten, dat hij volgens de semantiek werkt. Zulke editors bestaan al, maar zijn vaak niet gratis. Zulke editors zullen de editors van de toekomst worden.

Wil je dat je klant alles kan, dan geef je hem toch lekker contribute of schrijf je een plugin voor DreamWeaver zodat de content geintegreerd kan worden in je CMS. Een webeditor hoort alleen de basale opties te hebben. CSS en Semantiek zijn daarbij heilig.

Ik vermoed dat de grotere webdesign bedrijven die inzien hoe belangrijk semantiek is, over zullen stappen op mijn paradigma voor editors. Ze zullen editors als FCK Editor, htmlArea of DevEdit overboord zetten. Ze zullen zelf zo'n editor ontwikkelen, of bij extern zo'n editor aanschaffen. De markt op het gebied van wysiwyg editors lijkt verzadigd, maar editors die uitgaan van mijn paradigma zijn er niet veel.

[ Voor 13% gewijzigd door Verwijderd op 11-03-2005 15:08 ]

[RwD]

Verwijderd schreef op vrijdag 11 maart 2005 @ 14:48:
Tegenwoordig valt er wel wat voor te zeggen We zitten nu zelf intern ook te bekijken of we er zelf een gaan maken nu htmlArea zichzelf dood heeft verklaard.

Er zitten voor ons geen risico's aan, omdat we zelf de kennis in huis hebben voor het schrijven van een editor. Voordelen zijn wel dat we in full control zijn, makkelijk bugfixes kunnen toepassen waarbij we weten wat we doen (in tegenstelling tot de bloated htmlArea code) en niet meer afhankelijk zijn.

Er valt dus wat voor te zeggen.

Klinkt interessant. Misschien moeten jullie hem ook gratis aanbieden

Ik ben nu zelf FCKEditor aan aan het passen zodat een aantal van de bugs er uit zijn en het wat meer toegespitst is op wat ik nodig heb. Maar om te zeggen dat FCKEditor erg duidelijk in elkaar zit... Nee... Soms moet ik echt zoeken waar iets in godsnaam vandaan komt omdat de ene helft wel js is en de andere helft weer niet. bovendien zitten er inline stijlen of stoute attributen in zo hier en daar...

offtopic:
Ik heb nog steeds die xmlhttp boomstructuur van jou niet aangepast voor drag and drop. Heb het ergens opgegeven; te veel "this" toen werd ik gek (Jij had gezegd er nog op terug te komen trouwens)

[RwD]

Verwijderd schreef op vrijdag 11 maart 2005 @ 14:58:
Je klant wil je niet het lettertype laten bepalen, hij moet niet aan de kleuren zitten, hij moet geen formulieren invoegen. Een rich text editor is bedoelt om enkel en alleen content op te maken volgens het stramien gekozen door de designer.

Ik ben het helemaal met je eens. Ik had daarom al die zooi uit FCKEditors toolbar gehaald. En een paar styles er in gezet en dan doet ie het aardig. Maar verre van ideaal.

Jij zegt dat je wel goede wysiwyg editors hebt gevonden. Ik ben benieuwd!

[BtM909]

RwD schreef op vrijdag 11 maart 2005 @ 15:14:
[...]
Jij zegt dat je wel goede wysiwyg editors hebt gevonden. Ik ben benieuwd!

Weet niet op welke Quist doelt (please, enlighten us ), maar Jorgen (ook WG-er) heeft zelf zo'n editor ontwikkeld.

[ Voor 18% gewijzigd door BtM909 op 11-03-2005 15:22 ]

[Verwijderd]

RwD schreef op vrijdag 11 maart 2005 @ 15:08:

offtopic:
Ik heb nog steeds die xmlhttp boomstructuur van jou niet aangepast voor drag and drop. Heb het ergens opgegeven; te veel "this" toen werd ik gek (Jij had gezegd er nog op terug te komen trouwens)

Euhm.. dat zit er al een tijdje native in hoor Voeg me anders even toe op MSN voor vragen.