I min egen TODO-lista har jag länge haft på tapeten att fixa en egen wiki (programvara), eftersom alla jag stött på innan saknat något. Så idag gick jag igång på en reflektion som diskuterades (med Peter Lindh) kring wikis – varför skall det vara så omständligt att korrigera något litet, som t ex stavfel? Hela sidan skall laddas om, man skall rulla fram till rätt ställe och i värsta fall även se till att ha lite av markup-syntaxen i huvudet + hålla ordning på var i markup-stacken man befinner sig. Nej tack.
Så wiki.wendt.se föddes, jag tankade hem CKEditor (istället för TinyMCE som jag använt många gånger tidigare) och tittade även på andra editorer. CKEditor fungerade dock fortfarande bra även på sidor med mycket innehåll – den blev inte slö efter att man skrivit in tillräckligt mycket text.
Ctrl+X för snabb redigering
En sak som jag verkligen uppskattat med wordpress är det lilla stöd man försökte ge den som skall skriva in sin text. Det går t ex att trycka CTRL+1 för att göra ett stycke till en rubrik av storlek 1 (h1), 2 för h2, …
Detta saknades i CKEditor så det lade jag en dryg timme på innan jag hittade korrekt lösning till.
Keystrokes kallas kortkommandon i CKEditor och de kan justeras genom konfigurationsobjektet som anges när man via JavaScript drar igång editorn. En keystroke består av sifferkombination (1049 för Control+1 t ex) och namn på ett kommando att exekvera (editor.execCommand). Första problemet var att endast bold, italic och liknande icke-blocks-stilar fanns som kommandon.
I plugins/format/plugin.js lade jag till följande rad för att registrera kommandon “globalt”:
editor.addCommand(tag, new CKEDITOR.styleCommand(style));
Det var inte trivialt att hitta var man skulle jacka in sig, men trivialt när det väl var hittat :) En försvårande faktor är att CKEditor nyss kom i ny utgåva (version 3.x) och all dokumentation inte riktigt är lika uppdaterad som den varit för den förra utgåvan (version 2.x).
Packningsverktyget saknas, samt instruktioner
När man väl ändrat i _source-katalogen och vill få allt packat igen får man dra hem en jar från http://svn.fckeditor.net/CKPackager/trunk/bin/ och exekvera denna. Instruktioner om att “det är så man får göra” går bara att hitta på forumet …
http://cksource.com/forums/viewtopic.php?p=46072#p46072
Lista saknas
Det saknas en sammanställning över vilka tangentbindningar som används från början, och vilka kommandon man faktiskt kan binda upp (att byta till h1 fanns alltså inte out of the box).
* Enklast är att bryta (med ckeditor_source.js som källa, dvs icke-minifierat) i core/editor.js i metoden addCommand.
* JavaDocen för CKEditor har lista på default bindings (keystrokes).
Jag saknar korrekt bindning för
* image
* outdent (motsats till indent), pga att svensk tangentbordslayout saknar dedikerad tangent för tecknet <,
* numbered list, och
* bullet list.
Följande är dock konfigurerade manuellt och fungerar fint:
[ CKEDITOR.CTRL + 90 /*Z*/, ‘undo’ ],
[ CKEDITOR.CTRL + 89 /*Y*/, ‘redo’ ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, ‘redo’ ],
[ CKEDITOR.CTRL + 76 /*L*/, ‘link’ ],
[ CKEDITOR.CTRL + 66 /*B*/, ‘bold’ ],
[ CKEDITOR.CTRL + 73 /*I*/, ‘italic’ ],
[ CKEDITOR.CTRL + 85 /*U*/, ‘underline’ ],
[ CKEDITOR.CTRL + 48 /*0*/, ‘p’ ],
[ CKEDITOR.CTRL + 49 /*1*/, ‘h1’ ],
[ CKEDITOR.CTRL + 50 /*2*/, ‘h2’ ],
[ CKEDITOR.CTRL + 51 /*3*/, ‘h3’ ],
[ CKEDITOR.CTRL + 52 /*4*/, ‘h4’ ],
[ CKEDITOR.CTRL + 53 /*5*/, ‘h5’ ],
[ CKEDITOR.CTRL + 54 /*6*/, ‘h6’ ]
En av CKEditors fördelar är att länk-dialogen som visas är ett lager och inte ett eget fönster som TinyMCE använder. Fördelen är att det går snabbare att skriva in en URL pga att man slipper vänta på att en sida skall laddas.
Vanlig bläddring först: “läsläge”
Nästa problem att tackla var att editorn inte skall störa det vanliga läsande förrän man faktiskt vill ändra något. CKEditor har inget readonly läge som supportas. Forumet bjuder dock på ett par hack, men det var inte felfritt.
Tappar höjd
Tyvärr lider dpck CKEditor.replace() av att höjden på det element som ersätts inte bevaras. Så jag har nu gjort så att när en sida på wikin laddas så lyssnar jag efter dblclick-event (med ExtJS Core) och när det kommer drar jag iväg anropet till CKEditor.replace(divID, config) och populerar config.height med rätt höjd.
var replaceDivwithEditor = function() {
var el = Ext.get(‘editorDiv’);
var height = el.getHeight();
var padding = el.getPadding(‘tb’);
var scroll = el.getScroll();
var toolbarheight = 60;
ckConfig.height = height + padding + toolbarheight;
CKEDITOR.replace(‘editorDiv’, ckConfig);
};
Börja redigering automatiskt
Allra helst hade jag velat att det man dubbelklickade på i läsläge skulle vara markerat när man hamnar i skrivläge. Men dagen har blivit efter midnatt och det är dags att fortsätta en annan dag.
Multipla redigerare
Ett annat önskemål är att kunna stödja flera upphovsmäns petande i samma sida samtidigt, såsom EtherPad fungerar. Andra har visat att det inte är omöjligt att göra, jag har dock inte hittat någon som integrerat det med CKEditor eller annan icke-radbaserad plain text editor.
http://etherpad.wendt.se/
Roadmap
En liten snabb roadmap för att byta ut bloggen/Fredriks anteckningar mot en egen blogg igen:
Must haves:
# säkerhet
# versionshanterad lagring (kanske CouchDB)
# RSS-feed (enklare med SQL?)
# hantering av nuvarande material, dvs dess URL:er – innehållet är ju redan HTML
# mediauppladdningsplugin (CKFind är tydligen inte OSS)
Och optional:
* SEO (taggar borde räcka)
* ev kommentarsfunktion
* arkivfunktioner
* OpenID
* syntaxfärgning av kod
Google får ta hand om sökning.