D'abord pourquoi WYSIWYG ? la syntaxe Wiki c'est le must

Je ne sais pas pour vous, mais la syntaxe wiki, c'est sympa, ça permet d'utiliser des macros, mais c'est vraiment pas terrible pour de longs Tiddlers sur lesquels on revient régulièrement, il faut arriver à déchiffrer le texte, trouver la ligne que l'on souhaite modifier au milieu de cette masse de caractères. Bref ça peut vite devenir très très chiant.

J'ai donc cherché une solution WYSIWYG de l'édition des Tiddlers et ma foi il n'y a pas foule et en plus c'est plein de bug, du genre ça marche pas en local. Ce qui d'ailleurs me permet de vous rappelez de toujours tester les plugins avant de les mettre en action sur les copies de vos documents.

J'ai donc au détour de mes recherches sur la toile, trouvé une solution qui a l'air de fonctionner, c'est une version modifiée de l'original par une personne dont j'ai oublié de prendre les références, toutes mes excuses. Au départ elle ne permettait d'éditer que les Tiddlers ne contenant pas d'espace dans leur titre, mais j'ai trouvé le code pour éviter ça, et maintenant c'est ok ! LOL

Attention

Par contre il y a des choses à savoir un Tiddler édité avec CKEditor devient un Tiddler HTML, avec effacement parfois de la partie Wiki qu'il ne comprend pas. Il ne faut surtout pas éditer les Tiddlers sans précaution, en particulier les systemConfig.

Sinon vous allez tout casser, voir perdre une partie importante de votre prose.

On crée le Tiddler en Wiki, on le sauve vide et après on l'édite systématiquement et définitivement en HTML. Cette règle vous permettra d'éviter de mauvaise surprise.

Le code CKEditor

CKEditor c'est un ensemble de fichiers JS, Images, etc ... J'ai donc décidé de mettre le pack de fichier complet, sans faire de tri de ce qui sert ou pas et puis comme ça il reste toutes les informations de crédit, licence, etc ...

Vous allez donc copier tous les fichiers de l'archive ckeditor.3.3.1.zip en pièce jointe dans un dossier ckeditor au même niveau de l'arborescence que votre fichier HTML TiddlyWiki.

Bon en l’occurrence je vous propose la version 3.3.1, ce pack marche chez moi, à vous de voir si vous voulez essayer avec un plus récent.

Le Tiddler MarkupPreHead

Comme il faut que le fichier JS de ckeditor soit chargé au chargement du TiddlyWiki, on l'indique dans le Tiddler MarkupPreHead en ajoutant la ligne

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

Capture091.PNG

Le Tiddler ToolbarCommands

Maintenant si on veut éditer un Tiddler en utilisant CKEditor, il nous faut ajouter un bouton editHtml dans la barre d'action des Tiddlers, que l'on trouve dans le Tiddler ToolbarCommands.

Capture092.PNG

Le plugin

Enfin il faut créer un plugin CKeditorPlugin avec le tag systemConfig

Capture093.PNG

Vous pouvez modifiez le texte du bouton, ici editHTML, et aussi le tooltip ici Editez en WYSIWYG. Je suppose que l'on doit pouvoir aussi réduire le nombre de bouton apparaissant lors de l'édition d'un Tidller, etc ...

Fin

Sauvez, rechargé et hop à vous les joies de l'édition WYSIWYG de Tiddler ! ;-)

Capture094.PNG

C'est mieux que l'ancienne syntaxe HTML, non ?

Capture095.PNG

Bon il y aurait pleins d'autres chose à faire, comme empêcher la modification de certains Tiddlers en WYSIWYG, créer un bouton pour créer un Tidller WYSIWIG, etc ...

Mais pour l'instant je vais voir à l'utilisation ce que tout cela donne :-)

Bye