Snygga artiklar utan WYSIWYG-editors

Events happening in the community are now at Drupal community events on www.drupal.org.
Fredde's picture

Tänkte skapa lite WYSIWYG-debatt här.
Det är många som sätter sig emot att använda WYSIWYG-editors. Efter att ha gjort en rad sajter med WYSIWYG-editors (TinyMCE och FCKeditor) har jag snubblat över en del märkliga fenomen som ofta uppstår när en sådan editor är inblandad. Speciellt om skribenten kopierat in material från en extern källa (annan hemsida, worddokument etc).
Mellanslag som hamnar helknepigt och som möblerar om texten när man försöker rätta till dem är ett vanligt problem.
Slutanvändarna får psykbryt på alla knasigheter och det känns som det inte är så klockrent att bädda in en massa HTML-kod i nod-datan.

Så. Hur ska man då klara av att göra snygga artiklar utan WYSIWYG-editor?

Jag tycker det är toktråkigt att ha bilder etc. antingen över eller under texten. Jag vill ha dem mer i texten. Kollar man på en vanlig nyhetssajt som aftonbladet, expressen, idg etc. så ligger det ofta en bild bredvid titeln, sammanfattningen eller rent av i texten.

Hur kan man få till något sådan utan att blanda in en WYSIWYG-editor och helst utan att behöva vara PHP och CSS-hacker?

Comments

Imagefield

NiklasBr's picture

Om det räcker med en bild t.ex. går det utmärkt har jag märkt att låta användarna ladda upp en bild via Imagefield och styra views eller templates för att visa den bifogade bilden bredvid texten. En enkel float som CSS-regel för bilden samt lite padding löser placeringen av bilden i texten. Gjorde detta först i Drupal 6 men det har blivit mycket enklare i Drupal 7.

Vad gäller WYSIWYG och Word et al så kan jag inte annat än att hålla med, det är inte ovanligt heller att man ser att Webkit-baserade webbläsare lämnar skräp i editorn. Ett alternativ är Markdown eller liknande enkla uppmärkningar i ren text. Trots detta kör jag TinyMCE som standard åt de som behöver formateringsmöjligheter, på senare tid har det blivit rätt bra ändå.

--
fyrkantigt.se av Niklas Brunberg

Vi kör CKEditor med en

adamgerthel's picture

Vi kör CKEditor med en egenknåpad modul som plockar bort allting på paste (man slipper "paste from ..." knapparna). Då kan slutanvändaren inte över huvudtaget klistra in något annat, och det konverteras till paragrafer och radbrytningar. Sen tillåter vi som standard bara länkar, fetstil, listor, h2, h3. Det räcker rätt långt. Tidigare körde vi helt utan wysiwyg, men efter att kunder velat har fler alternativ (länkar och fetstil är det inte många som vill vara utan) har vi valt en totalt strippad wysiwyg, där det alltså knappt kan gå fel alls.

Gällande bilder så finns det inget sätt som är vettigt för att få det in i texter. Man kan köra css-styling för bilder som ligger i paragrafer, så att det blir bättre utan att användaren vet varför.. men efter att ha testat det mesta kan jag ärligt säga att det inte finns något bra sätt. Jag håller dock inte med dig gällande större nyhetssajter osv. De flesta vars sajter byggts på senare tid kör bildspel eller dylikt. Ytterst få har bilder i artiklar - annat än i stil med Niklas förslag ovan.

/Adam Gerthel - Projektledare, Odd Hill

Även vi använder en strippad

dhas's picture

Även vi använder en strippad version av CKeditor till våra kunder. Det fungerar bra. För att få till bilder i texten använder vi oss av Insert och Image Resize Filter moduler. Till nyhetsartiklar använder vi som mest Resize och Crop moduler. Vanliga undersidor klarar sig med Insert eller vanliga ImageCache upload.

Det som är bra med Insert modulen är att du kan koppla på vänster samt höger justerade marginaler med hjälp av CSS. Works great.

Exemplet som Damir tar är nog

adamgerthel's picture

Exemplet som Damir tar är nog det bästa alternativet, eftersom man kan återanvända CCK-bilderna i views etc. Dessutom bäddar det för en enklare match om man vill designa om en sida.

Media ser lovande ut och kommer kunna ersätta en del CCK-fält när den väl är buggfri.

/Adam Gerthel - Projektledare, Odd Hill

Tack för bra svar! Jag är

Fredde's picture

Tack för bra svar!
Jag är inte helt ute o cyklar märker jag. Jag använder just cck imagefield för att ladda upp bilder och insert i kombination med imagecache för att infoga bilderna i texten. Väl där används Image Resize Filter för att anpassa storleken.
Möjligheten finns kvar att i nerkortade vyer använda bilden/bilderna i anpassat format eller slideshows. Så att använda Imagefield för för uppladdning är klockrent på alla sätt

Jag har tittat på Markdown som nämns. Får man till en bra lösning för bilder utan WYSIWYG så räcker funktionaliteten i Markdown.

insats - Er egenknåpade modul till CKEditor lät intressant! Inget ni funderat på att dela med er av? ;-)

Kolla in

dhas's picture

Kolla in http://drupal.org/project/ckeditor Den kan du strippa ner till det mest nödvändiga.

Absolut, det är en väldigt

adamgerthel's picture

Absolut, det är en väldigt enkel modul :)

wysiwyg_alter.module :

<?php
/**
* Implementation of hook_wysiwyg_editor_settings_alter().
*/
function wysiwyg_alter_wysiwyg_editor_settings_alter(&$settings, $context) {
  if($context['profile']->editor == 'ckeditor') {
    $settings['forcePasteAsPlainText'] = TRUE;
  }
}

Vi kör den med Wysiwyg API

/Adam Gerthel - Projektledare, Odd Hill

Samma funktionalitet mot TinyMCE

adamevertsson's picture

Intressant tråd, kul att läsa.

Vi kör nästan uteslutande TinyMCE och har naturligtvis haft samma problem med inklistrad text som ställer till det. Är det någon som försökt sig på samma metod som mot CKEditor, alltså som i AdamGerthels senaste inlägg.

/Adam




✄-----------------------------------------------------
Adam Evertsson - Came for the code, stayed for the community!

En störig grej som jag har

ChristianP's picture

En störig grej som jag har upptäckt med t.ex. CKEditor är editerande av bild. Om man vill ha vänster/höger-padding så går det inte välja åt vilket håll, utan bara horisontell eller vertikal padding. Detta skapar oreda för om man vill t.ex. ha 15px marginal mellan en floatad vänsterbild och text så blir det marginal på båda sidorna om bilden vilket ser fult ut om man t.ex. har en vänster-alignment som man vill hålla genom hela sidan. Visst, man kan gå in under "advanced" och manuellt skriva "padding-right:15px" under CSS, men det är ju inte så användarvänligt. Några tips? Jag brukar använda CkFinder för inlägg av bilder då jag tycker det funkar bättre och är mer logiskt än att kunden måste ställa markören i brödtexten sen leta efter en "Insert"-knapp. Sen är det inte så användarvänligt om kunden vill ha kanske 10-15 bilder på en sida, då får man ju sitta och scrolla ner i redigerarläget för att komma till den bilden man vill inserta.

Sweden

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: