bridge:troeftekens-in-dokuwiki
Dit is een oude revisie van het document!
Inhoud
Troef tekens in Dokuwiki
Troeftekens lopen niet lekker in Dokuwiki. Het kan via smileys, zoals op de site van Hans. Rendert traag (alleen merkbaar voor grote documenten), werkt niet in kopjes, en past zich niet aan de fontgrootte aan (geen probleem, het werkt toch niet in kopjes). Het is daarentegen simpel te implementeren en werkt op alle grafische browsers. Op tekstbrowsers worden de troeftekens in principe vervangen door letters.
Een alternatieve oplossing gaat via entities.conf, daar kun je vervangingen definiëren. Een voorbeeld:
[s] <font size="+1" color="black">♠</font> [h] <font size="+1" color="red">♥</font> [r] <font size="+1" color="red">♦</font> [k] <font size="+1" color="black">♣</font>
Het probleem van deze methode is dat de parser van Dokuwiki entities.conf zo ongeveer alleen voor platte tekst gebruikt. Op veel plaatsen (in elk geval de kopjes weer) wordt niet vervangen.
Knoppen en keyboard shortcuts in de Dokuwiki editor maken
Beide voorgaande oplossingen hebben als nadeel dat zij niet goed combineren met de DokuTexit plugin voor export naar LaTeX/PDF (ze werken wel met het alternatief pdfex). Het laatste alternatief, de troef tekens via knoppen en de toets combinaties beschikbaar maken op de wiki, is wel te combineren met DokuTexit. Dit is met afstand de ingewikkeldste oplossing. Om de troef tekens te gebruiken in de editor moeten drie dingen gebeuren:
- De volgende pngtjes moeten worden gekopieerd naar /usr/share/dokuwiki/lib/images/toolbar.
(klaveren)
(ruiten)
(harten)
(schoppen)
- /usr/share/docuwiki/inc/toolbar.php worden aangepast. Het volgende stuk code moet worden ingevoegd:
array( 'type' => 'insert', 'title' => 'klaveren', 'icon' => 'clubs.png', 'insert' => html_entity_decode('♣', ENT_QUOTES, 'UTF-8'), 'key' => 'k', ), array( 'type' => 'insert', 'title' => 'ruiten', 'icon' => 'diamonds.png', 'insert' => html_entity_decode('♦', ENT_QUOTES, 'UTF-8'), 'key' => 'r', ), array( 'type' => 'insert', 'title' => 'harten', 'icon' => 'hearts.png', 'insert' => html_entity_decode('♥', ENT_QUOTES, 'UTF-8'), 'key' => 'h', ), array( 'type' => 'insert', 'title' => 'schoppen', 'icon' => 'spades.png', 'insert' => html_entity_decode('♠', ENT_QUOTES, 'UTF-8'), 'key' => 's', ),
De complete toolbar.php:
<?php /** * Editing toolbar functions * * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) * @author Andreas Gohr <andi@splitbrain.org> */ if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../').'/'); require_once(DOKU_INC.'inc/JSON.php'); /** * Prepares and prints an JavaScript array with all toolbar buttons * * @todo add toolbar plugins * @param string $varname Name of the JS variable to fill * @author Andreas Gohr <andi@splitbrain.org> */ function toolbar_JSdefines($varname){ global $ID; global $conf; global $lang; // build button array $menu = array( array( 'type' => 'format', 'title' => $lang['qb_bold'], 'icon' => 'bold.png', 'key' => 'b', 'open' => '**', 'close' => '**', ), array( 'type' => 'format', 'title' => $lang['qb_italic'], 'icon' => 'italic.png', 'key' => 'i', 'open' => '//', 'close' => '//', ), array( 'type' => 'format', 'title' => $lang['qb_underl'], 'icon' => 'underline.png', 'key' => 'u', 'open' => '__', 'close' => '__', ), array( 'type' => 'format', 'title' => $lang['qb_code'], 'icon' => 'mono.png', 'key' => 'c', 'open' => "''", 'close' => "''", ), array( 'type' => 'format', 'title' => $lang['qb_strike'], 'icon' => 'strike.png', 'key' => 'd', 'open' => '<del>', 'close' => '</del>', ), array( 'type' => 'format', 'title' => $lang['qb_h1'], 'icon' => 'h1.png', 'key' => '1', 'open' => '====== ', 'close' => ' ======\n', ), array( 'type' => 'format', 'title' => $lang['qb_h2'], 'icon' => 'h2.png', 'key' => '2', 'open' => '===== ', 'close' => ' =====\n', ), array( 'type' => 'format', 'title' => $lang['qb_h3'], 'icon' => 'h3.png', 'key' => '3', 'open' => '==== ', 'close' => ' ====\n', ), array( 'type' => 'format', 'title' => $lang['qb_h4'], 'icon' => 'h4.png', 'key' => '4', 'open' => '=== ', 'close' => ' ===\n', ), array( 'type' => 'format', 'title' => $lang['qb_h5'], 'icon' => 'h5.png', 'key' => '5', 'open' => '== ', 'close' => ' ==\n', ), array( 'type' => 'format', 'title' => $lang['qb_link'], 'icon' => 'link.png', 'key' => 'l', 'open' => '[[close]]', ), array( 'type' => 'format', 'title' => $lang['qb_extlink'], 'icon' => 'linkextern.png', 'open' => '[[close]]', 'sample' => 'http://example.com|'.$lang['qb_extlink'], ), array( 'type' => 'format', 'title' => $lang['qb_ol'], 'icon' => 'ol.png', 'open' => ' - ', 'close' => '\n', ), array( 'type' => 'format', 'title' => $lang['qb_ul'], 'icon' => 'ul.png', 'open' => ' * ', 'close' => '\n', ), array( 'type' => 'insert', 'title' => $lang['qb_hr'], 'icon' => 'hr.png', 'insert' => '----\n', ), array( 'type' => 'mediapopup', 'title' => $lang['qb_media'], 'icon' => 'image.png', 'url' => DOKU_BASE.'lib/exe/mediamanager.php?ns=', 'name' => 'mediaselect', 'options'=> 'width=750,height=500,left=20,top=20,scrollbars=yes,resizable=yes', ), array( 'type' => 'picker', 'title' => $lang['qb_smileys'], 'icon' => 'smiley.png', 'list' => getSmileys(), 'icobase'=> 'smileys', ), array( 'type' => 'picker', 'title' => $lang['qb_chars'], 'icon' => 'chars.png', 'list' => explode(' ','À à Ã? á  â à ã Ä ä Ç? ÇŽ Ä‚ ă Ã… Ã¥ Ä€ Ä? Ä„ Ä… Æ æ Ć ć Ç ç ÄŒ Ä? Ĉ ĉ ÄŠ Ä‹ Ã? Ä‘ ð ÄŽ Ä? È è É é Ê ê Ë ë Äš Ä› Ä’ Ä“ Ä– Ä— Ę Ä™ Ä¢ Ä£ Äœ Ä? Äž ÄŸ Ä Ä¡ Ĥ Ä¥ ÃŒ ì Ã? à Î î Ã? ï Ç? Ç? Ī Ä« Ä° ı Ä® į Ä´ ĵ Ķ Ä· Ĺ ĺ Ä» ļ Ľ ľ Å? Å‚ Ä¿ Å€ Ń Å„ Ñ ñ Å… ņ Ň ň Ã’ ò Ó ó Ô ô Õ õ Ö ö Ç‘ Ç’ ÅŒ Å? Å? Å‘ Å’ Å“ Ø ø Å” Å• Å– Å— Ř Å™ Åš Å› Åž ÅŸ Å Å¡ Åœ Å? Å¢ Å£ Ť Å¥ Ù ù Ú ú Û û Ãœ ü Ç“ Ç” Ŭ ŠŪ Å« Å® ů Ç– ǘ Çš Çœ Ų ų Å° ű Å´ ŵ Ã? ý Ÿ ÿ Ŷ Å· Ź ź Ž ž Å» ż Þ þ ß Ħ ħ ¿ ¡ ¢ £ ¤ Â¥ € ¦ § ª ¬ ¯ ° ± ÷ ‰ ¼ ½ ¾ ¹ ² ³ µ ¶ †‡ · • º ∀ ∂ ∃ Æ? É™ ∅ ∇ ∈ ∉ ∋ âˆ? ∑ ‾ − ∗ √ âˆ? ∞ ∠∧ ∨ ∩ ∪ ∫ ∴ ∼ ≅ ≈ ≠≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ â‹… â—Š ℘ â„‘ â„œ ℵ ♠♣ ♥ ♦ α β Γ γ Δ δ ε ζ η Θ θ ι κ Λ λ μ Ξ ξ Ππ Ï? Σ σ Τ Ï„ Ï… Φ φ χ Ψ ψ Ω ω ★ ☆ ☎ ☚ ☛ ☜ â˜? ☞ ☟ ☹ ☺ ✔ ✘'), ), array( 'type' => 'signature', 'title' => $lang['qb_sig'], 'icon' => 'sig.png', 'key' => 'y', ), array( 'type' => 'insert', 'title' => 'klaveren', 'icon' => 'clubs.png', 'insert' => 'âY£', 'key' => 'k', ), array( 'type' => 'insert', 'title' => 'ruiten', 'icon' => 'diamonds.png', 'insert' => 'âY¦', 'key' => 'r', ), array( 'type' => 'insert', 'title' => 'harten', 'icon' => 'hearts.png', 'insert' => 'âY¥', 'key' => 'h', ), array( 'type' => 'insert', 'title' => 'schoppen', 'icon' => 'spades.png', 'insert' => 'âY ', 'key' => 's', ), ); // use JSON to build the JavaScript array $json = new JSON(); print "var $varname = ".$json->encode($menu).";\n"; } /** * prepares the signature string as configured in the config * * @author Andreas Gohr <andi@splitbrain.org> */ function toolbar_signature(){ global $conf; $sig = $conf['signature']; $sig = strftime($sig); $sig = str_replace('@USER@',$_SERVER['REMOTE_USER'],$sig); $sig = str_replace('@NAME@',$_SESSION[DOKU_COOKIE]['auth']['info']['name'],$sig); $sig = str_replace('@MAIL@',$_SESSION[DOKU_COOKIE]['auth']['info']['mail'],$sig); $sig = str_replace('@DATE@',date($conf['dformat']),$sig); $sig = str_replace('\\\\n','\\n',addslashes($sig)); return $sig; } //Setup VIM: ex: et ts=4 enc=utf-8 :
- Geef in een shell: touch /etc/dokuwiki/local.php. Dit zorgt ervoor dat de javascript cache wordt weggegooid.
En klaar is uw kunstgebit. Als HTML is toegestaan kun je ook <font color> tags toevoegen.
Als plugin
De indexmenu en de highlight plugins bevatten javascript om een toolbar/button toe te voegen. Dit is een mooiere oplossing, want dan worden de wijzigingen niet weggegooid na iedere update van de dokuwkik software. Bovendien is de code makkelijk op andere machines te installeren. Voorbeeld: http://wiki.splitbrain.org/plugin:highlight.
De syntax.php zou er ze uit kunnen zien:
<?php /** * Plugin base links: Creates links relative to site root for all links beginni * * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) * @author Robert Meerman <robert.meerman@gmail.com> * @based_on "externallink" plugin by Otto Vainio <plugins@valjakko.net> */ if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../' if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/'); require_once(DOKU_PLUGIN.'syntax.php'); /** * All DokuWiki plugins to extend the parser/rendering mechanism * need to inherit from this class */ class syntax_plugin_trumpsigns extends DokuWiki_Syntax_Plugin { /** * return some info */ function getInfo(){ return array( 'author' => 'Pieter van der Meulen', 'email' => 'pieter@vdmeulen.net', 'date' => '2007-08-09', 'name' => 'trumpsigns', 'desc' => 'Adds toolbar buttons in editor for trumpsigns. Display 'url' => 'http://www.vdmeulen.net/wiki/bridge/troeftekens-in-dok ); } /** * What kind of syntax are we? */ function getType(){ return 'substition'; } //This must be implemented function getSort(){ return 123; } } ?>
Voorbeeld van script.js. Let hierop: http://wiki.splitbrain.org/wiki:devel:javascript.
//create a single toolbutton with desired properties function plugin_trumpsigns_createToolbutton (id, tooltipText, imgFile, insText, accKey) { var indx_ico = document.createElement('img'); indx_ico.src = DOKU_BASE + 'lib/plugins/trumpsigns/images/spades.png'; var indx_btn = document.createElement('button'); var btn_id = 'syntax_plugin_trumpsign_' + id; indx_btn.id = btn_id; indx_btn.className = 'toolbutton'; indx_btn.appendChild(indx_ico); indx_btn.title = 'Ik ben het maar'; indx_btn.accessKey = accKey; eval("onclick = function(){insertAtCarret('wiki__text', 'Ik ben het weer'); return false;}"); return(indx_btn); } //if this is an "edit" page, add toolbuttons function plugin_trumpsigns_toolbar_additions() { var toolbar = document.getElementById('tool__bar'); if(!toolbar) {return;} var edbtn = document.getEelementById('edbtn__save'); if(!edbtn) {return;} var index_btn = plugin_trumpsigns_createToolbutton('spades', 'Spades', 'spades.png', '[s]', 's'); toolbar.appendChild(indx_btn); index_btn = plugin_trumpsigns_createToolbutton('hearts', 'Hearts', 'hearts.png', '[h]', 'h'); toolbar.appendChild(indx_btn); index_btn = plugin_trumpsigns_createToolbutton('ruiten', 'Diamonds', 'diamonds.png', '[d]', 'd'); toolbar.appendChild(indx_btn); index_btn = plugin_trumpsigns_createToolbutton('clubs', 'Clubs', 'clubs.png', '[c]', 'c'); toolbar.appendChild(indx_btn); } addInitEvent(plugin_trumpsigns_toolbar_additions);
Vergroot in rood en zwart weergeven
<?php /** * Plugin Trumpsigns: Inserts <font size="+1" color="..."> tags into the document when trumpsigns are encountered * * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) * @author Pieter van der Meulen <dev@vdmeulen.net> */ if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/'); if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/'); require_once(DOKU_PLUGIN.'syntax.php'); /** * All DokuWiki plugins to extend the parser/rendering mechanism * need to inherit from this class */ class syntax_plugin_tab extends DokuWiki_Syntax_Plugin { /** * return some info */ function getInfo(){ return array( 'author' => 'Pieter van der Meulen', 'email' => 'dev@vdmeulen.net', 'date' => '2006-11-20', 'name' => 'Trumpsigns Plugin', 'desc' => 'Inserts <font size="+1" color="..."> tags into the html around trump signs', 'url' => 'http://www.vdmeulen.net/wiki/bridge/troeftekens_in_dokuwiki#vergroot_in_rood_en_wart_weergeven', ); } /** * What kind of syntax are we? */ function getType(){ return 'substition'; } /** * Where to sort in? */ function getSort(){ return 789; } /** * Connect pattern to lexer */ function connectTo($mode) { $this->Lexer->addSpecialPattern('♣',$mode,'plugin_trumpsigns'); $this->Lexer->addSpecialPattern('♦',$mode,'plugin_trumpsigns'); $this->Lexer->addSpecialPattern('♥',$mode,'plugin_trumpsigns'); $this->Lexer->addSpecialPattern('♠',$mode,'plugin_trumpsigns'); } /** * Handle the match */ function handle($match, $state, $pos, &$handler){ switch ($state) { case DOKU_LEXER_ENTER : break; case DOKU_LEXER_MATCHED : break; case DOKU_LEXER_UNMATCHED : break; case DOKU_LEXER_EXIT : break; case DOKU_LEXER_SPECIAL : break; } return array(); } /** * Create output */ function render($mode, &$renderer, $data) { if($mode == 'xhtml'){ $renderer->doc .= "<FONT SIZE=\"+1\" COLOR=\"RED\">XXX+"; $renderer->doc .= $data; $renderer->doc .= "-XXX</FONT>"; return true; } return false; } } //Setup VIM: ex: et ts=4 enc=utf-8 :
Ruitenprobleem onder Internet Explorer
Onder IE worden de ruitentekens niet goed weergegeven, de andere troeftekens wel. Zie http://www.xs4all.nl/~zanstra/inTec/diamondBug.htm Kennelijk gebruikt FF niet dezelfde verdana font als IE, want met FF doet het probleem zich niet voor.
Kijken of het mogelijk is voor IE een andere font op te geven (arial of times).
Voorlopig gepatched door via entities.conf ruitentekens in arial weer te geven. Dit verdient echter geen schoonheidsprijs, en het werkt niet in kopjes..
bridge/troeftekens-in-dokuwiki.1608394486.txt.gz · Laatst gewijzigd: (Externe bewerking)