[Jquery] Ubb bar maken

[devhouse]

Hallo allemaal,

Ik ben bezig met een website, en ik heb hiervoor nu een goed werkende UBB Parser. Nu wil ik het voor gebruikers makkelijk maken, en daarom wil ik net zoals ze bij GoT hebben, zo'n ubb bar maken. Dit doe ik nu nog met de volgende code:

code:

function ubbTag(tagName, textareaId) {
        var textarea = document.getElementById(''+textareaId+'');
        textarea = $('#'+textareaId);
        textarea.val(textarea.val() + '['+tagName+'][/'+tagName+']');
}

Deze code doet zijn werkt. het voegt de tag toe aan de textarea.

Nu wil ik graag dat het stukje javascript de tags invoert, op de plaatst waar de muis is(dat knipperende ding, ben naam vergeten). Nu heb ik geen flauw idee waar ik op moet zoeken, of hoe ik dit moet maken. Kan iemand mij een trefwoord geven, of misschien zelfs een voorbeeld?

Een ander dingetje is dat ik wil wanneer iemand een stuk text selecteerd, dat de tags dan om dat geselecteerde stuk worden gezet. Nu weet ik niet hoe je dat kan uitlezen, en hoe je dat moet vervangen.

Weet iemand dit?

[Bozozo]

Dat ding heet de caret. Om dat crossbrowser werkend te krijgen is nog best tricky, maar waarschijnlijk heeft jQuery er wel iets voor.

Google op 'jquery insert text at caret position' bracht me hier (demo)

[ Voor 18% gewijzigd door Bozozo op 15-08-2009 13:00 ]

[devhouse]

Bozozo schreef op zaterdag 15 augustus 2009 @ 12:58:
Dat ding heet de caret. Om dat crossbrowser werkend te krijgen is nog best tricky, maar waarschijnlijk heeft jQuery er wel iets voor.

Google op 'jquery insert text at caret position' bracht me hier (demo)

Thanx! het lost ook meteen me tweede vraag op, heel erg bedankt!

[_Thanatos_]

Waarom niet gewoon een html editor gebruiken à la tinyMCE of FCKeditor? Die kan veel meer en is tenminste echt gebruikersvriendelijk. Want als je die knopjes gebruikt, dan zal het je ook niet meer boeien welke codes er gebruikt worden. Daarbij, als ik een tekstje selecteer waar de codes al omheen staan en ik klik weer op die knop, verwacht ik dat ze verdwijnen, terwijl het waarschijnlijk grondig fout gaat in de uiteindelijke opmaak.

Ja, de methodiek die GoT erop nahoudt vind ik dan net zo goed ruk. Zelf codes tiepen is niet meer van deze tijd, en simpele knopjes om de codes te inserten is een oplossing voor een probleem dat er helemaal niet hoeft te zijn.

[Manuel]

_Thanatos_ schreef op dinsdag 18 augustus 2009 @ 02:51:
Waarom niet gewoon een html editor gebruiken à la tinyMCE of FCKeditor? Die kan veel meer en is tenminste echt gebruikersvriendelijk. Want als je die knopjes gebruikt, dan zal het je ook niet meer boeien welke codes er gebruikt worden. Daarbij, als ik een tekstje selecteer waar de codes al omheen staan en ik klik weer op die knop, verwacht ik dat ze verdwijnen, terwijl het waarschijnlijk grondig fout gaat in de uiteindelijke opmaak.

Ja, de methodiek die GoT erop nahoudt vind ik dan net zo goed ruk. Zelf codes tiepen is niet meer van deze tijd, en simpele knopjes om de codes te inserten is een oplossing voor een probleem dat er helemaal niet hoeft te zijn.

Omdat hier nog meer werk voor nodig is? Waarom zou je nog meer naar de client-side gooien terwijl je het heel simpel kan houden, zie het nut er niet echt van in. Verder als je naar 'Bekijk bericht' gaat zie ik toch echt een leuke UBB bar

[_Thanatos_]

Ik zie geen UBB-bar op GoT, maar misschien heb ik em uitgezet

Daarnaast, verplaats je nou es in de huid van een bezoeker. Dikke kans dat een bezoeker niet snapt wat die codes doen, en het ook niet interesseert. In zijn belevenis komen er rare codes in de tekst terecht die het alleen maar onleesbaar maken. En een "bekijk bericht" knopje is alleen maar getuige van het feit dat dat dus inhandig is, anders zou zo'n knopje niet nodig zijn.

Ik zeg het dan ook niet vanuit technisch oogpunt, maar vanuit usability. Bovendien is een embedded XHTML editor technisch helemaal niet zo slecht, en usability-wise gewoon uitstekend, omdat het goed werkt en wysiwyg is.

[R4gnax]

_Thanatos_ schreef op woensdag 19 augustus 2009 @ 00:38:
Ik zeg het dan ook niet vanuit technisch oogpunt, maar vanuit usability. Bovendien is een embedded XHTML editor technisch helemaal niet zo slecht, en usability-wise gewoon uitstekend, omdat het goed werkt en wysiwyg is.

Ja, en kijk je er vanuit technisch oogpunt naar dan is het gewoon dom, punt.

De HTML die door de WYSIWYG editor gevormd wordt kan script tags en andere security-gevoelige content bevatten, wat dus onder andere cross-site scripting gaten kan opengooien. Daarnaast sta je met een WYSIWYG editor ook compleet arbitraire 'normale' content toe. Bijvoorbeeld van die leuke schermvullende absoluut gepositioneerde meuk, waardoor de rest van je site niet meer te zien is. Of niet goed gevormde HTML waardoor de complete structuur van je site kapot springt.

Dat soort fratsen is natuurlijk wel af te vangen: je kunt bijvoorbeeld elk individueel berichtje in z'n eigen iframe hangen. Wordt je site alleen beslist niet beter op en helpt nog steeds niet veel tegen malicious scripts. Dan maar de gegenereerde HTML parsen en ongewenste constructies verwijderen? Je kunt tenslotte XHTML zo met een XML parser uitlezen en bewerken toch? Ja. Ware het niet dat Internet Explorer's versie van contentEditable verschrikkelijke HTML uit het HTML 3 tagsoup tijdperk genereert, waar je XML parser in zal stikken. Dan maar eventjes een complete SGML parser gebruiken? Oh ja: moet natuurlijk ook verkeerd gevormde HTML 'corrigeren', net zoals IE dat doet.

Realiseer je je wel wat voor een enorme idioterie dit allemaal oplevert?

Nee, dan is het toch gewoon beter om ubb tags te gebruiken op een publiek toegankelijk forum. Houd die fancy WYSIWIG editors maar voor CMS backend systemen waar 'beheerders' pagina's uit Word in plakken.

[--MeAngry--]

Jongens, niet vechten, TinyMCE heeft namelijk ook een UBB plugin. Het beste van twee werelden dus.

Daarnaast kun je TinyMCE erg gemakkelijk zo aanpassen dat hij bijvoorbeeld alleen de knoppen voor bold, cursief, centreren, etc... laat zien. Dat gebruik ik ook op een communitysite en dat werkt perfect! (Overigens zonder de UBB plugin dus daar heb ik niet veel ervaring mee.)

[ Voor 58% gewijzigd door --MeAngry-- op 19-08-2009 01:10 ]

[HaTe]

TinyMCE is leuk, maar het wordt lastiger als de gebruiker Javascript uit heeft staan. Dan moet je dus zelf detecteren of de gebruiker gebruik heeft gemaakt van TinyMCE of niet en dan moet je serverside nog <p> tags plaatsen.
Of zijn er dan andere oplossingen?

[_Thanatos_]

Als javascript uit staat en tinyMCE gebruikt wordt, krijg je een kale textarea te zien. Meer is er ook niet mogelijk.

[crisp]

tinyMCE en the like zijn gewoon draconische scripts. Helaas moet dat ook wel om de boel cross-browser compliant te maken, maar het is echt een mokerslag op je pagina's (met name qua performance). Daarbij los je een aantal dingen niet op door je gebruikers (impliciet) arbitraire HTML te laten genereren. Je zal toch 'plugins' moeten gaan schrijven als je gebruikers bijvoorbeeld code wilt laten posten die gehighlight moet worden als een bepaalde taal, of als je <h1> wilt mappen naar <h3>, of als je een bepaalde tag wilt laten expanden naar iets anders (/me bijvoorbeeld). WYSIWYG is het dan ook niet meer (tenzij je ook nog een complete parser in javascript erbij schrijft).

Al met al zal je uiteindelijk serverside ook nog een complete parsing-slag moeten maken, want client-side restricties kan je serverside niet op aan. Da's dus een hoop extra werk voor enkel wat visuele gismo. Een simpele 'Ubb-bar' en een preview-modus is aanzienlijk makkelijker te realiseren, zeker als je al een server-side UBB parser hebt. Daarbij denk ik dat je met enige 'ervaring' met UBB-codes je minstens net zo snel dingen als een link maken kan doen als met een volledige WYSIWYG editor.

[zwippie]

Even voorbijgaand aan de wellus/nietus discussie, dit is eventueel een leuke jQuery bbcode editor om wat inspiratie bij op te doen: http://markitup.jaysalvat.com/examples/bbcode/