- Meny
- Hovedsiden
- Om Martin
- Ta kontakt
- Foto
- RSS
Kommentarformatering
I lengre tid har jeg lett etter et WordPress-tillegg som lar deg som kommenterer formatere din kommentar på en enklere måte. Tidligere har man måtte gjøre all formatering med XHTML-elementer manuelt, noe som er særdeles lite brukervennlig.
Borte hos Thomas Karlsen snublet jeg i går over noe som lignet på det jeg lette etter. En kjapp titt i kildekoden avslørte et tillegg ved navn Quicktags. Tillegget benytter deler av det samme JavaScriptet WordPress selv benytter seg av, men da kun for de elementer man tillater i et kommentarfelt. Ønsker du å gjøre endringer i dette JavaScriptet finnes det en egen guide som forklarer hvordan du går frem. Selv tenkte jeg å fjerne ordboken og «Lukk alle elementer».
For øyeblikket benytter jeg tillegget slik det leveres som standard, men det er mulig å stilsette enten alle knappene eller hver enkelt knapp for seg med CSS. Jeg kommer sannsynligvis til å gjøre noen mindre endringer i utseendet, men ikke mer enn at det blir intuitivt og lettforståelig. Jeg kommer også til å skrive en tilhørende hjelpeside til de som trenger starthjelp.
Som bruker kan du merke tekst og trykke på en knapp for å formatere den merkede teksten. Alternativt kan du trykke på knappen for å starte formatering, for så å trykke på knappen igjen for å avslutte formatering. Formateringen setter inn XHTML-elementer i kommentaren du er i ferd med å skrive.
I et rent brukervennlighetsperspektiv skulle jeg gjerne hatt en skikkelig WYSIWYG-funksjon, men ettersom jeg har en del teknologiorienterte lesere, som vet å verdsette full kontroll over kode i kommentaren, håper jeg dette er en løsning som fungerer bra for alle.
Kildekoden er tilgjengelig på forfatterens nettsted. Hvis det er interesse for det deler jeg selvfølgelig ut min modifiserte versjon, hvor jeg kun har gjort oversettelse til norsk.
Uansett er det du som bruker og leser som feller den endelige dommen over løsningen. Prøv den ut og legg igjen en kommentar hvor du sier hva du synes. Kom gjerne med forslag til forbedringer, dersom du mener jeg kan gjøre noe annerledes.
13 kommentarer til «Kommentarformatering»
-
Du har ikke vurdert en “what you see is what you mean” variant? Den typen som fokuserer på “semantics” i språket mer enn utseendet. For eksempel kan du ha elementer som “egennavn” (som for eksempel ville blitt stylet i kursiv), “fremmedord”, og andre meningsvariasjoner i språket.
Fet og kursiv tekst sier ingenting om innholdet.
-
Pussig at du nevner det, for jeg tenkte faktisk på den semantiske betydningen til elementene når jeg implementerte denne funksjonen.
Du har helt rett i at fet og kursiv tekst ikke sier noe om innholdet, men det sier derimot masse om hvordan vi leser det, og det er tross alt svært viktig i et skriftlig medium.
Jeg kom for øvrig over en interessant diskusjon på Accessify Forum.
-
Det ser bra ut Martin, jeg skulle definitivt hatt noe slikt selv. Spørs om jeg skal laste ned kildekoden og se om jeg finner ut hvordan dette kan brukes utenfor Wordpress.
-
Jeg foretrekker å skrive HTML-kode selv og direkte, men knappene indikerer jo godt hvilke HTML-elementer som er tillatt, noe som er en grei veiviser. Noe jeg har begynt å sette pris på der det er implementert er “live preview”, det vil si en AJAX-løsning som forhåndsviser dét man skriver enten over eller under kommentarfeltet, slik at man kjapt får en visuell tilbakemelding på hvordan det man skriver vil ta seg ut før det blir postet.
-
Jeg synes dette er en veldig god løsning, jeg.
ettersom jeg har en del teknologiorienterte lesere, som vet å verdsette full kontroll over kode i kommentaren, håper jeg dette er en løsning som fungerer bra for alle
Det har du nok veldig rett i.
Fet og kursiv tekst sier ingenting om innholdet.
Det er selvfølgelig like riktig, men de før nevnte teknologiorienterte leserne er nok også «semantiske nok» til å se at det er semantiske tagger som settes inn, altså elementene em og strong, ikke de «trykktekniske» elementene i og b, mens de ikke-tekniske, som ikke er klar over forskjellen på semantikk og presentasjon, kanskje synes det er mer forståelig med kursiv og fet skrift - som vi tross alt kjenner igjen fra skrivemaskinen!
Jeg liker også veldig godt den elegante måten dette scriptet skiller mellom tilfeller hvor du allerede har merket tekst, og der hvor du bare klikker på en av knappene mens du skriver inn. Det eneste som mangler nå, er at knappene er tilgjengelig også på forhåndsvisningssiden, og så gjerne hurtigtaster …
Forøvrig lover jeg å være litt mer tilbakeholden med å bruke alle knappene så ofte som mulig heretter
-
Takk for hyggelige tilbakemeldinger, Audun, Asbjørn og Lasse!
Jeg skal vurdere å bytte ut den eksisterende forhåndsvisningsfunksjonen med en umiddelbar forhåndsvisning basert på AJAX, slik du foreslår, Asbjørn. Alternativt som et supplement, dersom noen ser det som nødvendig.
Lasse skrev:
Forøvrig lover jeg å være litt mer tilbakeholden med å bruke alle knappene så ofte som mulig heretter
Vel, jeg har nok bedt om det selv når jeg legger opp til det med denne funksjonen.
-
Hei, dette er interessant stoff!
Løsningen som nå brukes her på bekkelund.net fungerer ypperlig for de av oss som kjenner til HTML, men antakelig ikke noe mer enn «greit nok» for de som ikke er vært borti det før. Jeg ser for meg at en del klippe-og-lime-feil vil kunne forekomme, uten at det nødvendigvis er noen katastrofe. Men, altså, i den sammenheng ser jeg ikke hvorfor TinyMCE vil være ypperlig? TinyMCE vil som standard gi et visuelt bilde av kommentaren med tydelige knapper (fet skrift, kursiv, understreket o.l.), samt at den har mulighet for «forhåndsvisning» og «HTML» — sistnevnte åpner det som er skrevet i et sprettopp-vindu med HTML-koden «synlig», og da skal vel alle behov være dekket?)
(Og sist, en liten kommentar på din nåværende løsning, Martin: Tar du og legger inn et lite mellomrom mellom de ulike knappene over kommentarfeltet? De ligger veldig klistret inntil hverandre i sin nåværende form.)
-
Espen skrev:
Løsningen som nå brukes her på bekkelund.net fungerer ypperlig for de av oss som kjenner til HTML [...]
Det vil jeg tro. Som nevnt er de fleste av mine lesere teknologiorienterte, og foretrekker sannsynligvis muligheten for å redigere koden manuelt, fremfor et verktøy som gjør det for dem.
[...] antakelig ikke noe mer enn «greit nok» for de som ikke er vært borti det før
Jeg vet. Derfor kunne det være kjekt om noen som anser seg som ikke-teknologiorienterte også kom med noen innspill.
Men, altså, i den sammenheng ser jeg ikke hvorfor TinyMCE vil være ypperlig?
Sist jeg testet TinyMCE var den noe feilbefengt på enkelte kombinasjoner av nettleser og OS, men jeg skal ærlig innrømme at det er lenge siden jeg testet det. Det ser sågar ut til å eksistere et tillegg til WordPress basert på TinyMCE. Skal i hvert fall kikke på det.
Tar du og legger inn et lite mellomrom mellom de ulike knappene over kommentarfeltet? De ligger veldig klistret inntil hverandre i sin nåværende form.
Det står på planen. Måtte bare sikre meg at dette var noe folk ville ha, før jeg eventuelt kaster bort tiden på å pynte på det.
Takk for innspill, Espen!
-
Sist jeg testet TinyMCE var den noe feilbefengt på enkelte kombinasjoner av nettleser og OS, men jeg skal ærlig innrømme at det er lenge siden jeg testet det. Det ser sågar ut til å eksistere et tillegg til WordPress basert på TinyMCE. Skal i hvert fall kikke på det.
Det hører nok fortiden til. Jeg jobber aktivt med TinyMCE daglig, både med implementering, men også buglesing relatert til de ulike nettleserne. Opera 9.5x fungerer ypperlig med siste versjon, Firefox likeså og Internet Explorer er jo noe som nesten må fungere. Safari vet jeg har litt problemer på den fronten, men det forbedres stadig. Det er egentlig ikke vanskeligere å teste enn ved å gå til den offisielle nettsiden og ta en titt på demonstrasjonene som ligger ute
Jeg vet forøvrig av erfaring at TinyMCE-utvikleren/erne er raske til å fikse feil (det kommer som regel minimum en oppgradering i måneden) og implementerer til stadighet workarounds for nettleserspesifikke problemer. Det er liksom litt enklere å ta i bruk et eksternt verktøy man ser og erfarer undergår kontinuerlig arbeid.
-
Jeg holder på å implementere TinyMCE i et CMS jeg holder på med, og det fungerer veldig bra. Nå er jeg ikke en racer i javascript, men jeg vurderer også å ta i bruk det på kommentering hos meg.
Siden du tydeligvis kan litt om dette Espen, har du noe imot at jeg stiller deg noen spørsmål rundt TinyMCE skulle det dukke opp problemer?
-
Det skal vi kunne ordne, Audun.
-
Jeg har aldri benyttet TinyMCE til annet enn testing i funksjonalitetsøyemed, men denne uken snakket jeg med en Drupal-utvikler som fortalte meg at TinyMCE er standardverktøyet som følger med Drupal. Han fortalte videre at TinyMCE har en del problemer med å fjerne strukturelle elementer og inline CSS. For meg høres dette ut som et problem relatert til Drupal og ikke til TinyMCE, men det kunne uansett være greit å få noen tanker og innspill relatert til akkurat dette.
For øvrig har jeg gjort meg noen tanker om implementering av design for disse knappene. Skal se om jeg får skrudd til resultatet i løpet av de nærmeste dagene.
-
Jeg har ikke jobbet nevneverdig mye med de problemstillingene du trekker frem, Martin, men uansett er vel det totalt irrelevant i dette tilfellet? Dersom TinyMCE er et alternativ for kommentarposting, antar jeg at unødige knapper som tabeller, høyrejustering av tekst, smilefjes, fontfarger etc. fjernes, og at du sitter igjen med grunnleggende funksjonalitet som de knappene du har nå dekker. Det eneste som da trengs gjøres, er å strippe alle former for attributter, og dersom det skaper problemer innad i TinyMCE, kan jo det løses med ett regulæruttrykk i PHP.
Ett trackback / pingback til «Kommentarformatering»
Legg igjen en kommentar
Før du poster en kommentar må du være kjent med retningslinjene for kommentarposting, samt personvernpolitikken for bekkelund.net.
Felter merket med * må fylles ut. Din e-postadresse vil ikke være synlig.
Formatering med XHTML: Du kan bruke disse elementene til formatering: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Tekstbaserte uttrykksikoner konverteres automatisk til bilder. Hjelp til formatering.
Martin Bekkelund er fornøyd bruker av WordPress med hjemmelaget tema.
Du kan abonnere på både artikler som Atom, RSS 2.0 eller RSS 0.92, samt kommentarer som RSS 2.0.
Denne artikkelen ble til ved hjelp av 13 kopper espresso konsumert på 0.528 minutter.