plugin:wrap [DokuWiki]

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="utf-8" /> <title>plugin:wrap [DokuWiki]</title> <meta name="generator" content="DokuWiki"/> <meta name="theme-color" content="#008800"/> <meta name="robots" content="index,follow"/> <meta name="keywords" content="plugin,wrap"/> <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="DokuWiki"/> <link rel="start" href="/"/> <link rel="contents" href="/plugin:wrap?do=index" title="Sitemap"/> <link rel="manifest" href="/lib/exe/manifest.php"/> <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php"/> <link rel="alternate" type="application/rss+xml" title="Current namespace" href="/feed.php?mode=list&ns=plugin"/> <link rel="edit" title="Edit this page" href="/plugin:wrap?do=edit"/> <link rel="alternate" type="text/html" title="Plain HTML" href="/_export/xhtml/plugin:wrap"/> <link rel="alternate" type="text/plain" title="Wiki Markup" href="/_export/raw/plugin:wrap"/> <link rel="canonical" href="https://www.dokuwiki.org/plugin:wrap"/> <link rel="stylesheet" href="/lib/exe/css.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e"/> <script >var NS='plugin';var JSINFO = {"plugins":{"edittable":{"default columnwidth":""}},"id":"plugin:wrap","namespace":"plugin","ACT":"show","useHeadingNavigation":0,"useHeadingContent":0};(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer="defer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" defer="defer"></script> <script src="/lib/exe/js.php?t=dokuwiki&tseed=f1005bad3d81fc9c803c7f93d32a390e&lang=en" defer="defer"></script> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="shortcut icon" href="/lib/tpl/dokuwiki/images/favicon.ico" /> <link rel="apple-touch-icon" href="/lib/tpl/dokuwiki/images/apple-touch-icon.png" /> <meta name="verify-v1" content="OVxl3gsCv2MhZqh1cBQyl0JytWXSwXMjyvwc+4w3WtA=" /> <meta name="google-site-verification" content="YhTVK69hW94ZXUtc2zSLPxTkZKbZIn0zK67mz5WQB-E" />  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83791-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83791-1', { 'anonymize_ip': true }); </script> </head> <body> <div id="dokuwiki__site"><div id="dokuwiki__top" class="site dokuwiki mode_show tpl_dokuwiki showSidebar hasSidebar">  <header id="dokuwiki__header"><div class="pad group"> <div class="headings group"> <ul class="a11y skip"> <li><a href="#dokuwiki__content">skip to content</a></li> </ul> <h1 class="logo"><a href="/start" accesskey="h" title="Home [h]"><img src="/lib/tpl/dokuwiki/images/logo.png" width="64" height="64" alt="" /><span>DokuWiki</span></a></h1> <p class="claim">It's better when it's simple</p> </div> <div class="tools group">  <div id="dokuwiki__usertools"> <h3 class="a11y">User Tools</h3> <ul> <li class="action login"><a href="/plugin:wrap?do=login&sectok=" title="Log In" rel="nofollow"><span>Log In</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 17.25V14H3v-4h7V6.75L15.25 12 10 17.25M8 2h9a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-4h2v4h9V4H8v4H6V4a2 2 0 0 1 2-2z"/></svg></a></li> </ul> </div>  <div id="dokuwiki__sitetools"> <h3 class="a11y">Site Tools</h3> <form action="/start" method="get" role="search" class="search doku_form" id="dw__search" accept-charset="utf-8"><input type="hidden" name="do" value="search" /><input type="hidden" name="id" value="plugin:wrap" /><div class="no"><input name="q" type="text" class="edit" title="[F]" accesskey="f" placeholder="Search" autocomplete="on" id="qsearch__in" value="" /><button value="1" type="submit" title="Search">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form> <div class="mobileTools"> <form action="/doku.php" method="get" accept-charset="utf-8"><div class="no"><input type="hidden" name="id" value="plugin:wrap" /><select name="do" class="edit quickselect" title="Tools"><option value="">Tools</option><optgroup label="Page Tools"><option value="edit">Edit this page</option><option value="revisions">Old revisions</option><option value="backlink">Backlinks</option></optgroup><optgroup label="Site Tools"><option value="recent">Recent Changes</option><option value="media">Media Manager</option><option value="index">Sitemap</option></optgroup><optgroup label="User Tools"><option value="login">Log In</option></optgroup></select><button type="submit">></button></div></form> </div> <ul> <li class="action recent"><a href="/plugin:wrap?do=recent" title="Recent Changes [r]" rel="nofollow" accesskey="r">Recent Changes</a></li><li class="action media"><a href="/plugin:wrap?do=media&ns=plugin" title="Media Manager" rel="nofollow">Media Manager</a></li><li class="action index"><a href="/plugin:wrap?do=index" title="Sitemap [x]" rel="nofollow" accesskey="x">Sitemap</a></li> </ul> </div> </div>  <div class="breadcrumbs"> <div class="trace"><span class="bchead">Trace:</span> <span class="bcsep">•</span> <span class="curid"><bdi><a href="/plugin:wrap" class="breadcrumbs" title="plugin:wrap">wrap</a></bdi></span></div> </div> <hr class="a11y" /> </div></header> <div class="wrapper group">  <nav id="dokuwiki__aside" aria-label="Sidebar"><div class="pad aside include group"> <h3 class="toggle">Sidebar</h3> <div class="content"><div class="group"> <p> <strong>Learn about DokuWiki</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/features" class="wikilink1" title="features" data-wiki-id="features">Features</a> & <a href="/blogroll" class="wikilink1" title="blogroll" data-wiki-id="blogroll">reviews</a> </div> </li> <li class="level1"><div class="li"> <a href="/install" class="wikilink1" title="install" data-wiki-id="install">Installation guide</a></div> </li> <li class="level1"><div class="li"> <a href="/manual" class="wikilink1" title="manual" data-wiki-id="manual">User manual</a> & <a href="/wiki:syntax" class="wikilink1" title="wiki:syntax" data-wiki-id="wiki:syntax">syntax</a></div> </li> <li class="level1"><div class="li"> <a href="/changes" class="wikilink1" title="changes" data-wiki-id="changes">Release notes</a></div> </li> <li class="level1"><div class="li"> <a href="/faq" class="wikilink1" title="faq" data-wiki-id="faq">FAQ</a></div> </li> </ul> <p> <strong>Advanced Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/extensions" class="wikilink1" title="extensions" data-wiki-id="extensions">Extensions</a></div> </li> <li class="level1"><div class="li"> <a href="/development" class="wikilink1" title="development" data-wiki-id="development">Development manual</a></div> </li> </ul> <p> <strong>Corporate Use</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/faq:support" class="wikilink1" title="faq:support" data-wiki-id="faq:support">Get support</a></div> </li> <li class="level1"><div class="li"> <a href="/donate" class="wikilink1" title="donate" data-wiki-id="donate">Donations</a></div> </li> </ul> <p> <strong>Our Community</strong> </p> <ul> <li class="level1"><div class="li"> <a href="/teams:getting_involved" class="wikilink1" title="teams:getting_involved" data-wiki-id="teams:getting_involved">Get involved</a></div> </li> <li class="level1"><div class="li"> <a href="/dokuinstall" class="wikilink1" title="dokuinstall" data-wiki-id="dokuinstall">Users</a></div> </li> <li class="level1"><div class="li"> <a href="http://forum.dokuwiki.org" class="urlextern" title="http://forum.dokuwiki.org">User forum</a></div> </li> <li class="level1"><div class="li"> <a href="/mailinglist" class="wikilink1" title="mailinglist" data-wiki-id="mailinglist">Development mailinglist</a></div> </li> </ul> <hr /> <p> Follow us on <a href="https://phpc.social/@dokuwiki" class="urlextern" title="https://phpc.social/@dokuwiki">Mastodon</a> and other <a href="/social" class="wikilink1" title="social" data-wiki-id="social">social networks</a>. </p> <p> <a href="/privacy" class="wikilink1" title="privacy" data-wiki-id="privacy">Our Privacy Policy</a> </p> </div></div> </div></nav>  <main id="dokuwiki__content"><div class="pad group"> <div class="pageId"><span>plugin:wrap</span></div> <div class="page group">   <div id="dw__toc" class="dw__toc"> <h3 class="toggle">Table of Contents</h3> <div> <ul class="toc"> <li class="level1"><div class="li"><a href="#wrap_plugin">Wrap Plugin</a></div> <ul class="toc"> <li class="level2"><div class="li"><a href="#one_plugin_to_rule_them_all">One plugin to rule them all</a></div></li> <li class="level2"><div class="li"><a href="#installation">Installation</a></div></li> <li class="level2"><div class="li"><a href="#syntax">Syntax</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#examples">Examples</a></div></li> <li class="level3"><div class="li"><a href="#classes">Classes</a></div></li> <li class="level3"><div class="li"><a href="#widths">Widths</a></div></li> <li class="level3"><div class="li"><a href="#anchor">Anchor</a></div></li> <li class="level3"><div class="li"><a href="#languages_and_text_directions">Languages and Text Directions</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#demo">Demo</a></div></li> <li class="level2"><div class="li"><a href="#configuration_options">Configuration options</a></div></li> <li class="level2"><div class="li"><a href="#odt_support">ODT Support</a></div></li> <li class="level2"><div class="li"><a href="#toolbar_picker">Toolbar picker</a></div></li> <li class="level2"><div class="li"><a href="#extend_with_custom_styles">Extend with custom styles</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#examples1">Examples</a></div></li> <li class="level3"><div class="li"><a href="#add_former_typography_classes">Add former typography classes</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#how_to_use_the_helper">How to use the helper</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#example_how_to_get_just_one_kind_of_attribute">Example how to get just one kind of attribute</a></div></li> <li class="level3"><div class="li"><a href="#example_how_to_get_all_attributes">Example how to get all attributes</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#development">Development</a></div> <ul class="toc"> <li class="level3"><div class="li"><a href="#done">Done</a></div></li> <li class="level3"><div class="li"><a href="#localization">Localization</a></div></li> </ul> </li> <li class="level2"><div class="li"><a href="#credits">Credits</a></div></li> <li class="level2"><div class="li"><a href="#see_also">See also</a></div></li> <li class="level2"><div class="li"><a href="#discussion">Discussion</a></div></li> </ul></li> </ul> </div> </div>  <h1 class="sectionedit1" id="wrap_plugin">Wrap Plugin</h1> <div class="level1"> <div class="pluginrepo_entry"><div class="usageInfo"><div class="compatibility"><p class="label">Compatible with DokuWiki</p><div class="versions"><ul><li class="yes">2024-02-06 "Kaos" <strong><span>yes</span></strong></li><li class="yes">2023-04-04 "Jack Jackrum" <strong><span>yes</span></strong></li><li class="yes">2022-07-31 "Igor" <strong><span>yes</span></strong></li><li class="yes">2020-07-29 "Hogfather" <strong><span>yes</span></strong></li></ul></div></div><ul class="actions"><li><a class="download" href="https://github.com/selfthinker/dokuwiki_plugin_wrap/archive/stable.zip">Download</a></li><li><a class="bugs" href="https://github.com/selfthinker/dokuwiki_plugin_wrap/issues">Report bugs</a></li><li><a class="donate" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=11071728">Donate</a></li></ul><div class="clearer"></div></div><div class="mainInfo"><p class="description"><a class="media" href="/plugins"><img alt="plugin" class="medialeft" src="/lib/plugins/pluginrepo/images/dwplugin.png" width="60" height="60" /></a> Universal plugin which combines the functionality of many other plugins. Wrap wiki text inside containers (divs or spans) and give them a class (choose from a variety of preset classes), a width and/or a language with its associated text direction.</p></div><div class="metaInfo"><dl><dt>Last updated on</dt><dd>2023-08-13</dd><dt>Provides</dt><dd><a href="/plugins?plugintype=1#extension__table" class="wikilink1" title="List all Syntax plugins">Syntax</a>, <a href="/plugins?plugintype=16#extension__table" class="wikilink1" title="List all Helper plugins">Helper</a>, <a href="/plugins?plugintype=4#extension__table" class="wikilink1" title="List all Action plugins">Action</a></dd><dt>Repository</dt><dd><a class="urlextern" href="https://github.com/selfthinker/dokuwiki_plugin_wrap">Source</a></dd><dt>Conflicts with</dt><dd><a href="/plugin:adhocwrap" class="wikilink1" title="plugin:adhocwrap" data-wiki-id="plugin:adhocwrap">adhocwrap</a></dd></dl></div><div class="moreInfo"><p class="similar">Similar to <a href="/plugin:adhoctags" class="wikilink1" title="plugin:adhoctags" data-wiki-id="plugin:adhoctags">adhoctags</a>, <a href="/plugin:adhocwrap" class="wikilink1" title="plugin:adhocwrap" data-wiki-id="plugin:adhocwrap">adhocwrap</a>, <a href="/plugin:admnote" class="wikilink1" title="plugin:admnote" data-wiki-id="plugin:admnote">admnote</a>, <a href="/plugin:alertbox" class="wikilink1" title="plugin:alertbox" data-wiki-id="plugin:alertbox">alertbox</a>, <a href="/plugin:alignment" class="wikilink1" title="plugin:alignment" data-wiki-id="plugin:alignment">alignment</a>, <a href="/plugin:anchor" class="wikilink1" title="plugin:anchor" data-wiki-id="plugin:anchor">anchor</a>, <a href="/plugin:block" class="wikilink1" title="plugin:block" data-wiki-id="plugin:block">block</a>, <a href="/plugin:bootnote" class="wikilink1" title="plugin:bootnote" data-wiki-id="plugin:bootnote">bootnote</a>, <a href="/plugin:bootswrapper" class="wikilink1" title="plugin:bootswrapper" data-wiki-id="plugin:bootswrapper">bootswrapper</a>, <a href="/plugin:box" class="wikilink1" title="plugin:box" data-wiki-id="plugin:box">box</a>, <a href="/plugin:box2" class="wikilink1" title="plugin:box2" data-wiki-id="plugin:box2">box2</a>, <a href="/plugin:button" class="wikilink1" title="plugin:button" data-wiki-id="plugin:button">button</a>, <a href="/plugin:class" class="wikilink1" title="plugin:class" data-wiki-id="plugin:class">class</a>, <a href="/plugin:clearer" class="wikilink1" title="plugin:clearer" data-wiki-id="plugin:clearer">clearer</a>, <a href="/plugin:clearfloat" class="wikilink1" title="plugin:clearfloat" data-wiki-id="plugin:clearfloat">clearfloat</a>, <a href="/plugin:color" class="wikilink1" title="plugin:color" data-wiki-id="plugin:color">color</a>, <a href="/plugin:columnlist" class="wikilink1" title="plugin:columnlist" data-wiki-id="plugin:columnlist">columnlist</a>, <a href="/plugin:columns" class="wikilink1" title="plugin:columns" data-wiki-id="plugin:columns">columns</a>, <a href="/plugin:comment" class="wikilink1" title="plugin:comment" data-wiki-id="plugin:comment">comment</a>, <a href="/plugin:commentsrc" class="wikilink1" title="plugin:commentsrc" data-wiki-id="plugin:commentsrc">commentsrc</a>, <a href="/plugin:commentsyntax" class="wikilink1" title="plugin:commentsyntax" data-wiki-id="plugin:commentsyntax">commentsyntax</a>, <a href="/plugin:div_span_shorthand" class="wikilink1" title="plugin:div_span_shorthand" data-wiki-id="plugin:div_span_shorthand">div_span_shorthand</a>, <a href="/plugin:divalign" class="wikilink1" title="plugin:divalign" data-wiki-id="plugin:divalign">divalign</a>, <a href="/plugin:divalign2" class="wikilink1" title="plugin:divalign2" data-wiki-id="plugin:divalign2">divalign2</a>, <a href="/plugin:emphasis" class="wikilink1" title="plugin:emphasis" data-wiki-id="plugin:emphasis">emphasis</a>, <a href="/plugin:floatdiv" class="wikilink1" title="plugin:floatdiv" data-wiki-id="plugin:floatdiv">floatdiv</a>, <a href="/plugin:fontcolor" class="wikilink1" title="plugin:fontcolor" data-wiki-id="plugin:fontcolor">fontcolor</a>, <a href="/plugin:fontfamily" class="wikilink1" title="plugin:fontfamily" data-wiki-id="plugin:fontfamily">fontfamily</a>, <a href="/plugin:fontsize" class="wikilink1" title="plugin:fontsize" data-wiki-id="plugin:fontsize">fontsize</a>, <a href="/plugin:fontsize2" class="wikilink1" title="plugin:fontsize2" data-wiki-id="plugin:fontsize2">fontsize2</a>, <a href="/plugin:hide" class="wikilink1" title="plugin:hide" data-wiki-id="plugin:hide">hide</a>, <a href="/plugin:highlight" class="wikilink1" title="plugin:highlight" data-wiki-id="plugin:highlight">highlight</a>, <a href="/plugin:htmlcomment" class="wikilink1" title="plugin:htmlcomment" data-wiki-id="plugin:htmlcomment">htmlcomment</a>, <a href="/plugin:htmldetailstag" class="wikilink1" title="plugin:htmldetailstag" data-wiki-id="plugin:htmldetailstag">htmldetailstag</a>, <a href="/plugin:important_paragraf" class="wikilink1" title="plugin:important_paragraf" data-wiki-id="plugin:important_paragraf">important_paragraf</a>, <a href="/plugin:importanttext" class="wikilink1" title="plugin:importanttext" data-wiki-id="plugin:importanttext">importanttext</a>, <a href="/plugin:instructions" class="wikilink1" title="plugin:instructions" data-wiki-id="plugin:instructions">instructions</a>, <a href="/plugin:jokuwiki" class="wikilink1" title="plugin:jokuwiki" data-wiki-id="plugin:jokuwiki">jokuwiki</a>, <a href="/plugin:lang" class="wikilink1" title="plugin:lang" data-wiki-id="plugin:lang">lang</a>, <a href="/plugin:layout" class="wikilink1" title="plugin:layout" data-wiki-id="plugin:layout">layout</a>, <a href="/plugin:ltr" class="wikilink1" title="plugin:ltr" data-wiki-id="plugin:ltr">ltr</a>, <a href="/plugin:mikioplugin" class="wikilink1" title="plugin:mikioplugin" data-wiki-id="plugin:mikioplugin">mikioplugin</a>, <a href="/plugin:noprint" class="wikilink1" title="plugin:noprint" data-wiki-id="plugin:noprint">noprint</a>, <a href="/plugin:note" class="wikilink1" title="plugin:note" data-wiki-id="plugin:note">note</a>, <a href="/plugin:outdent" class="wikilink1" title="plugin:outdent" data-wiki-id="plugin:outdent">outdent</a>, <a href="/plugin:pagebreak" class="wikilink1" title="plugin:pagebreak" data-wiki-id="plugin:pagebreak">pagebreak</a>, <a href="/plugin:passwordgrey" class="wikilink1" title="plugin:passwordgrey" data-wiki-id="plugin:passwordgrey">passwordgrey</a>, <a href="/plugin:qna" class="wikilink1" title="plugin:qna" data-wiki-id="plugin:qna">qna</a>, <a href="/plugin:side_note" class="wikilink1" title="plugin:side_note" data-wiki-id="plugin:side_note">side_note</a>, <a href="/plugin:spoiler" class="wikilink1" title="plugin:spoiler" data-wiki-id="plugin:spoiler">spoiler</a>, <a href="/plugin:styler" class="wikilink1" title="plugin:styler" data-wiki-id="plugin:styler">styler</a>, <a href="/plugin:tab" class="wikilink1" title="plugin:tab" data-wiki-id="plugin:tab">tab</a>, <a href="/plugin:tablelayout" class="wikilink1" title="plugin:tablelayout" data-wiki-id="plugin:tablelayout">tablelayout</a>, <a href="/plugin:tablewidth" class="wikilink1" title="plugin:tablewidth" data-wiki-id="plugin:tablewidth">tablewidth</a>, <a href="/plugin:tip" class="wikilink1" title="plugin:tip" data-wiki-id="plugin:tip">tip</a>, <a href="/plugin:typography" class="wikilink1" title="plugin:typography" data-wiki-id="plugin:typography">typography</a>, <a href="/plugin:wpre" class="wikilink1" title="plugin:wpre" data-wiki-id="plugin:wpre">wpre</a></p><p class="tags">Tagged with <a href="/plugins?plugintag=anchor#extension__table" class="wikilink1" title="List all plugins with this tag">anchor</a>, <a href="/plugins?plugintag=annotations#extension__table" class="wikilink1" title="List all plugins with this tag">annotations</a>, <a href="/plugins?plugintag=bookmark#extension__table" class="wikilink1" title="List all plugins with this tag">bookmark</a>, <a href="/plugins?plugintag=boxes#extension__table" class="wikilink1" title="List all plugins with this tag">boxes</a>, <a href="/plugins?plugintag=columns#extension__table" class="wikilink1" title="List all plugins with this tag">columns</a>, <a href="/plugins?plugintag=formatting#extension__table" class="wikilink1" title="List all plugins with this tag">formatting</a>, <a href="/plugins?plugintag=hide#extension__table" class="wikilink1" title="List all plugins with this tag">hide</a>, <a href="/plugins?plugintag=highlight#extension__table" class="wikilink1" title="List all plugins with this tag">highlight</a>, <a href="/plugins?plugintag=icons#extension__table" class="wikilink1" title="List all plugins with this tag">icons</a>, <a href="/plugins?plugintag=instructions#extension__table" class="wikilink1" title="List all plugins with this tag">instructions</a>, <a href="/plugins?plugintag=language#extension__table" class="wikilink1" title="List all plugins with this tag">language</a>, <a href="/plugins?plugintag=printing#extension__table" class="wikilink1" title="List all plugins with this tag">printing</a>, <a href="/plugins?plugintag=style#extension__table" class="wikilink1" title="List all plugins with this tag">style</a>, <a href="/plugins?plugintag=tabs#extension__table" class="wikilink1" title="List all plugins with this tag">tabs</a>, <a href="/plugins?plugintag=typography#extension__table" class="wikilink1" title="List all plugins with this tag">typography</a></p><p class="needed">Needed for <a href="/plugin:jorgchart" class="wikilink1" title="plugin:jorgchart" data-wiki-id="plugin:jorgchart">jorgchart</a>, <a href="/plugin:lastcomp" class="wikilink1" title="plugin:lastcomp" data-wiki-id="plugin:lastcomp">lastcomp</a>, <a href="/plugin:newsboard" class="wikilink1" title="plugin:newsboard" data-wiki-id="plugin:newsboard">newsboard</a>, <a href="/plugin:orgchart" class="wikilink1" title="plugin:orgchart" data-wiki-id="plugin:orgchart">orgchart</a>, <a href="/plugin:pdftools" class="wikilink1" title="plugin:pdftools" data-wiki-id="plugin:pdftools">pdftools</a>, <a href="/plugin:togglewrap" class="wikilink1" title="plugin:togglewrap" data-wiki-id="plugin:togglewrap">togglewrap</a>, <a href="/plugin:wrapadd" class="wikilink1" title="plugin:wrapadd" data-wiki-id="plugin:wrapadd">wrapadd</a></p></div><div class="authorInfo"><strong>By <a href="mailto:anika%20%5Bat%5D%20selfthinker%20%5Bdot%5D%20org" class="mail" title="anika [at] selfthinker [dot] org">Anika Henke</a></strong><ul><li><a href="/plugin:abc" class="wikilink1" title="plugin:abc" data-wiki-id="plugin:abc">abc</a></li> <li><a href="/plugin:ipa" class="wikilink1" title="plugin:ipa" data-wiki-id="plugin:ipa">ipa</a></li> <li><a href="/plugin:blockquote" class="wikilink1" title="plugin:blockquote" data-wiki-id="plugin:blockquote">blockquote</a></li> <li><a href="/plugin:loadskin" class="wikilink1" title="plugin:loadskin" data-wiki-id="plugin:loadskin">loadskin</a></li> <li><a href="/plugin:purplenumbers" class="wikilink1" title="plugin:purplenumbers" data-wiki-id="plugin:purplenumbers">purplenumbers</a></li> <li><a href="/plugin:wikipediasnippet" class="wikilink1" title="plugin:wikipediasnippet" data-wiki-id="plugin:wikipediasnippet">wikipediasnippet</a></li> <li><a href="/template:ach" class="wikilink1" title="template:ach" data-wiki-id="template:ach">ach</a></li> <li><a href="/plugin:unformattedcode" class="wikilink1" title="plugin:unformattedcode" data-wiki-id="plugin:unformattedcode">unformattedcode</a></li> <li><a href="/plugin:fontface" class="wikilink1" title="plugin:fontface" data-wiki-id="plugin:fontface">fontface</a></li> <li><a href="/template:starter" class="wikilink1" title="template:starter" data-wiki-id="template:starter">starter</a></li> <li>and 6 more</li></ul></div></div> </div> <div class="secedit editbutton_section editbutton_1"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Wrap Plugin] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="wrap_plugin" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1-1382" /><button type="submit" title="Wrap Plugin">Edit</button></div></form></div> <h2 class="sectionedit2" id="one_plugin_to_rule_them_all">One plugin to rule them all</h2> <div class="level2"> <p> This plugin gives you the ability to wrap wiki text inside containers (divs or spans) and give them </p> <ol> <li class="level1"><div class="li"> a certain class (with loads of useful preset classes)</div> </li> <li class="level1"><div class="li"> a width</div> </li> <li class="level1"><div class="li"> a language with its associated text direction</div> </li> </ol> <p> It potentially replaces a lot of other plugins and is <abbr title="In my humble opinion">IMHO</abbr> the better alternative for many. </p> <p> It fully replaces: <a href="/plugin:class" class="wikilink1" title="plugin:class" data-wiki-id="plugin:class">class</a>, <a href="/plugin:clearfloat" class="wikilink1" title="plugin:clearfloat" data-wiki-id="plugin:clearfloat">clearfloat</a>, <a href="/plugin:div_span_shorthand" class="wikilink1" title="plugin:div_span_shorthand" data-wiki-id="plugin:div_span_shorthand">div_span_shorthand</a>, <a href="/plugin:divalign2" class="wikilink1" title="plugin:divalign2" data-wiki-id="plugin:divalign2">divalign2</a>, <a href="/plugin:divalign" class="wikilink1" title="plugin:divalign" data-wiki-id="plugin:divalign">divalign</a>, <a href="/plugin:emphasis" class="wikilink1" title="plugin:emphasis" data-wiki-id="plugin:emphasis">emphasis</a>, <a href="/plugin:hide" class="wikilink1" title="plugin:hide" data-wiki-id="plugin:hide">hide</a>, <a href="/plugin:important_paragraf" class="wikilink1" title="plugin:important_paragraf" data-wiki-id="plugin:important_paragraf">important_paragraf</a>, <a href="/plugin:importanttext" class="wikilink1" title="plugin:importanttext" data-wiki-id="plugin:importanttext">importanttext</a>, <a href="/plugin:lang" class="wikilink1" title="plugin:lang" data-wiki-id="plugin:lang">lang</a>, <a href="/plugin:ltr" class="wikilink1" title="plugin:ltr" data-wiki-id="plugin:ltr">ltr</a>, <a href="/plugin:noprint" class="wikilink1" title="plugin:noprint" data-wiki-id="plugin:noprint">noprint</a>, <a href="/plugin:pagebreak" class="wikilink1" title="plugin:pagebreak" data-wiki-id="plugin:pagebreak">pagebreak</a>, <a href="/plugin:side_note" class="wikilink1" title="plugin:side_note" data-wiki-id="plugin:side_note">side_note</a>, <a href="/plugin:tip" class="wikilink1" title="plugin:tip" data-wiki-id="plugin:tip">tip</a>, <a href="/plugin:wpre" class="wikilink1" title="plugin:wpre" data-wiki-id="plugin:wpre">wpre</a> </p> <p> It partly replaces: <a href="/plugin:box" class="wikilink1" title="plugin:box" data-wiki-id="plugin:box">box</a>, <a href="/plugin:button" class="wikilink1" title="plugin:button" data-wiki-id="plugin:button">button</a>, <a href="/plugin:color" class="wikilink1" title="plugin:color" data-wiki-id="plugin:color">color</a>, <a href="/plugin:columns" class="wikilink1" title="plugin:columns" data-wiki-id="plugin:columns">columns</a>, <a href="/plugin:fontcolor" class="wikilink1" title="plugin:fontcolor" data-wiki-id="plugin:fontcolor">fontcolor</a>, <a href="/plugin:fontfamily" class="wikilink1" title="plugin:fontfamily" data-wiki-id="plugin:fontfamily">fontfamily</a>, <a href="/plugin:fontsize2" class="wikilink1" title="plugin:fontsize2" data-wiki-id="plugin:fontsize2">fontsize2</a>, <a href="/plugin:fontsize" class="wikilink1" title="plugin:fontsize" data-wiki-id="plugin:fontsize">fontsize</a>, <a href="/plugin:highlight" class="wikilink1" title="plugin:highlight" data-wiki-id="plugin:highlight">highlight</a>, <a href="/plugin:layout" class="wikilink1" title="plugin:layout" data-wiki-id="plugin:layout">layout</a>, <a href="/plugin:note" class="wikilink1" title="plugin:note" data-wiki-id="plugin:note">note</a>, <a href="/plugin:styler" class="wikilink1" title="plugin:styler" data-wiki-id="plugin:styler">styler</a>, <a href="/plugin:tab" class="wikilink1" title="plugin:tab" data-wiki-id="plugin:tab">tab</a>, <a href="/plugin:tablewidth" class="wikilink1" title="plugin:tablewidth" data-wiki-id="plugin:tablewidth">tablewidth</a>, <a href="/plugin:typography" class="wikilink1" title="plugin:typography" data-wiki-id="plugin:typography">typography</a> </p> </div> <div class="secedit editbutton_section editbutton_2"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[One plugin to rule them all] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="one_plugin_to_rule_them_all" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="1383-2200" /><button type="submit" title="One plugin to rule them all">Edit</button></div></form></div> <h2 class="sectionedit3" id="installation">Installation</h2> <div class="level2"> <p> Search and install the plugin using the <a href="/plugin:extension" class="wikilink1" title="plugin:extension" data-wiki-id="plugin:extension">Extension Manager</a>. Refer to <a href="/plugins" class="wikilink1" title="plugins" data-wiki-id="plugins">Plugins</a> on how to install plugins manually. </p> </div> <div class="secedit editbutton_section editbutton_3"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Installation] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="installation" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="2201-2365" /><button type="submit" title="Installation">Edit</button></div></form></div> <h2 class="sectionedit4" id="syntax">Syntax</h2> <div class="level2"> <p> Basic Syntax: </p> <pre class="code"><WRAP classes #id width :language> "big" content </WRAP> **or** <block classes #id width :language> "big" content </block> or <div classes #id width :language> "big" content </div></pre> <p> An uppercase <strong><WRAP></strong> (or alternatively <strong><block></strong> or <strong><div></strong>) creates a <strong><code>div</code></strong> and should be used for <strong>“big”</strong> containers, <strong>surrounding</strong> paragraphs, lists, tables, etc. </p> <pre class="code"><wrap classes #id width :language>"small" content</wrap> or <inline classes #id width :language>"small" content</inline> or <span classes #id width :language>"small" content</span></pre> <p> A lowercase <strong><wrap></strong> (or alternatively <strong><inline></strong> or <strong><span></strong>) creates a <strong><code>span</code></strong> and should be used for <strong>“small”</strong> containers, <strong>inside</strong> paragraphs, lists, tables, etc. </p> <p> Since version 2013-06-13 there is also a shorthand syntax (for wraps without content): </p> <pre class="code"><WRAP classes #id /> or <block classes #id /> or <div classes #id /></pre> <p> and </p> <pre class="code"><wrap classes #id /> or <inline classes #id /> or <span classes #id /></pre> <p> <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> Please note, some things <strong>won't work with spans</strong>: <strong>alignments</strong> (including alignments generated by changing the text direction), <strong>multi-columns</strong> and <strong>widths</strong> if the according wrap isn't floated as well. </p> </div> <div class="secedit editbutton_section editbutton_4"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Syntax] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="syntax" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="2366-3652" /><button type="submit" title="Syntax">Edit</button></div></form></div> <h3 class="sectionedit5" id="examples">Examples</h3> <div class="level3"> <p> The plugin comes with an example page, which should explain a lot and looks like this in the default template (see below). </p> </div> <div class="secedit editbutton_section editbutton_5"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Examples] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="examples" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="3653-3796" /><button type="submit" title="Examples">Edit</button></div></form></div> <h3 class="sectionedit6" id="classes">Classes</h3> <div class="level3"> <p> The following classes are currently available: </p> <p> <a href="/_media/plugin:wrap_plugin_example10.png" class="media" title="plugin:wrap_plugin_example10.png"><img src="/_media/plugin:wrap_plugin_example10.png?w=300&tok=bc95ec" class="mediaright" loading="lazy" alt="" width="300" /></a> </p> <div class="table sectionedit7"><table class="inline"> <thead> <tr class="row0"> <th class="col0 leftalign"> class name </th><th class="col1 leftalign"> description/notes </th> </tr> </thead> <tr class="row1"> <th class="col0 leftalign" colspan="2"> <em class="u">columns</em> – similar to <a href="/plugin:columns" class="wikilink1" title="plugin:columns" data-wiki-id="plugin:columns">columns</a>, <a href="/plugin:side_note" class="wikilink1" title="plugin:side_note" data-wiki-id="plugin:side_note">side_note</a>, <a href="/plugin:styler" class="wikilink1" title="plugin:styler" data-wiki-id="plugin:styler">styler</a>, <a href="/plugin:tip" class="wikilink1" title="plugin:tip" data-wiki-id="plugin:tip">tip</a> </th> </tr> <tr class="row2"> <td class="col0 leftalign"> <strong><code>column</code></strong> </td><td class="col1 leftalign"> same as <code>left</code> in LTR languages and same as <code>right</code> in RTL languages </td> </tr> <tr class="row3"> <td class="col0 leftalign"> <strong><code>left</code></strong> </td><td class="col1 leftalign"> same as <code>column</code>, will let you float your container on the left </td> </tr> <tr class="row4"> <td class="col0 leftalign"> <strong><code>right</code></strong> </td><td class="col1 leftalign"> will let the container float right </td> </tr> <tr class="row5"> <td class="col0 leftalign"> <strong><code>center</code></strong> </td><td class="col1 leftalign"> will position the container in the horizontal center of the page </td> </tr> <tr class="row6"> <td class="col0 leftalign"> <strong><code>col2</code></strong>..<strong><code>col5</code></strong> </td><td class="col1 leftalign"> will show the text in multiple columns determined by their amount (2, 3, 4 or 5), only works in modern browsers (no IE9 and below) </td> </tr> <tr class="row7"> <td class="col0 leftalign"> <strong><code>colsmall</code></strong>, <strong><code>colmedium</code></strong>, <strong><code>collarge</code></strong> </td><td class="col1 leftalign"> will also show the text in multiple columns but determined by their width (small, medium or large), only works in modern browsers (no IE9 and below) </td> </tr> <tr class="row8"> <th class="col0 leftalign" colspan="2"> <em class="u">widths</em> – <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> <strong>experimental</strong>, might not work as expected, includes mobile support </th> </tr> <tr class="row9"> <td class="col0 leftalign"> <strong><code>half</code></strong> </td><td class="col1 leftalign"> fits two columns in a row, should be used in pairs </td> </tr> <tr class="row10"> <td class="col0 leftalign"> <strong><code>third</code></strong> </td><td class="col1 leftalign"> fits three or two columns in a row, should be used in triplets or together with <code>twothirds</code> </td> </tr> <tr class="row11"> <td class="col0 leftalign"> <strong><code>twothirds</code></strong> </td><td class="col1 leftalign"> fits two columns in a row when used together with <code>third</code>, one 1/3 wide and another 2/3 wide </td> </tr> <tr class="row12"> <td class="col0 leftalign"> <strong><code>quarter</code></strong> </td><td class="col1 leftalign"> fits four columns in a row, should be used in quads </td> </tr> <tr class="row13"> <th class="col0 leftalign" colspan="2"> <em class="u">alignments</em> – similar to <a href="/plugin:divalign" class="wikilink1" title="plugin:divalign" data-wiki-id="plugin:divalign">divalign</a>, <a href="/plugin:columns" class="wikilink1" title="plugin:columns" data-wiki-id="plugin:columns">columns</a>, <a href="/plugin:styler" class="wikilink1" title="plugin:styler" data-wiki-id="plugin:styler">styler</a> – <img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> don't work with spans! </th> </tr> <tr class="row14"> <td class="col0 leftalign"> <strong><code>leftalign</code></strong> </td><td class="col1 leftalign"> aligns text on the left </td> </tr> <tr class="row15"> <td class="col0 leftalign"> <strong><code>rightalign</code></strong> </td><td class="col1 leftalign"> aligns text on the right </td> </tr> <tr class="row16"> <td class="col0 leftalign"> <strong><code>centeralign</code></strong> </td><td class="col1 leftalign"> centers the text </td> </tr> <tr class="row17"> <td class="col0 leftalign"> <strong><code>justify</code></strong> </td><td class="col1 leftalign"> justifies the text </td> </tr> <tr class="row18"> <th class="col0 leftalign" colspan="2"> <em class="u">boxes and notes</em> – similar to <a href="/plugin:box" class="wikilink1" title="plugin:box" data-wiki-id="plugin:box">box</a>, <a href="/plugin:note" class="wikilink1" title="plugin:note" data-wiki-id="plugin:note">note</a>, <a href="/plugin:tip" class="wikilink1" title="plugin:tip" data-wiki-id="plugin:tip">tip</a> </th> </tr> <tr class="row19"> <td class="col0 leftalign"> <strong><code>box</code></strong> </td><td class="col1 leftalign"> creates a box around the container (uses colours from <code>style.ini</code>) </td> </tr> <tr class="row20"> <td class="col0 leftalign"> <strong><code>info</code></strong> (was <code>information</code> in first version) </td><td class="col1 leftalign"> creates a blue box with an info icon </td> </tr> <tr class="row21"> <td class="col0 leftalign"> <strong><code>important</code></strong> </td><td class="col1 leftalign"> creates an orange box with an important icon </td> </tr> <tr class="row22"> <td class="col0 leftalign"> <strong><code>alert</code></strong> (<img src="/lib/images/smileys/exclaim.svg" class="icon smiley" alt=":!:" /> was <code>warning</code> in previous versions) </td><td class="col1 leftalign"> creates a red box with an alert icon </td> </tr> <tr class="row23"> <td class="col0 leftalign"> <strong><code>tip</code></strong> </td><td class="col1 leftalign"> creates a yellow box with a tip icon </td> </tr> <tr class="row24"> <td class="col0 leftalign"> <strong><code>help</code></strong> </td><td class="col1 leftalign"> creates a violet box with a help icon </td> </tr> <tr class="row25"> <td class="col0 leftalign"> <strong><code>todo</code></strong> </td><td class="col1 leftalign"> creates a cyan box with an todo icon </td> </tr> <tr class="row26"> <td class="col0 leftalign"> <strong><code>download</code></strong> </td><td class="col1 leftalign"> creates a green box with a download icon </td> </tr> <tr class="row27"> <td class="col0 leftalign"> <strong><code>round</code></strong> </td><td class="col1 leftalign"> adds rounded corners to any container with a background colour or a border (only works in modern browsers, i.e. no <abbr title="Internet Explorer">IE</abbr>) </td> </tr> <tr class="row28"> <td class="col0 leftalign"> <strong><code>danger</code></strong> </td><td class="col1 leftalign"> creates a red danger safety note </td> </tr> <tr class="row29"> <td class="col0 leftalign"> <strong><code>warning</code></strong> </td><td class="col1 leftalign"> creates an orange warning safety note </td> </tr> <tr class="row30"> <td class="col0 leftalign"> <strong><code>caution</code></strong> </td><td class="col1 leftalign"> creates a yellow caution safety note </td> </tr> <tr class="row31"> <td class="col0 leftalign"> <strong><code>notice</code></strong> </td><td class="col1 leftalign"> creates a blue notice safety note </td> </tr> <tr class="row32"> <td class="col0 leftalign"> <strong><code>safety</code></strong> </td><td class="col1 leftalign"> creates a green safety note </td> </tr> <tr class="row33"> <th class="col0 leftalign" colspan="2"> <em class="u">marks</em> – similar to <a href="/plugin:emphasis" class="wikilink1" title="plugin:emphasis" data-wiki-id="plugin:emphasis">emphasis</a>, <a href="/plugin:important_paragraf" class="wikilink1" title="plugin:important_paragraf" data-wiki-id="plugin:important_paragraf">important_paragraf</a>, <a href="/plugin:importanttext" class="wikilink1" title="plugin:importanttext" data-wiki-id="plugin:importanttext">importanttext</a> </th> </tr> <tr class="row34"> <td class="col0 leftalign"> <strong><code>hi</code></strong> </td><td class="col1 leftalign"> marks text as highlighted </td> </tr> <tr class="row35"> <td class="col0 leftalign"> <strong><code>lo</code></strong> </td><td class="col1 leftalign"> marks text as less significant </td> </tr> <tr class="row36"> <td class="col0 leftalign"> <strong><code>em</code></strong> </td><td class="col1 leftalign"> marks text as especially emphasised </td> </tr> <tr class="row37"> <th class="col0 leftalign" colspan="2"> <em class="u">miscellaneous</em> </th> </tr> <tr class="row38"> <td class="col0 leftalign"> <strong><code>clear</code></strong> </td><td class="col1 leftalign"> similar to <a href="/plugin:clearfloat" class="wikilink1" title="plugin:clearfloat" data-wiki-id="plugin:clearfloat">clearfloat</a>, should preferably be used with divs, i.e. uppercase <code><WRAP></code>s </td> </tr> <tr class="row39"> <td class="col0 leftalign"> <strong><code>tabs</code></strong> </td><td class="col1 leftalign"> if wrapped around a list of links, will show those as tabs </td> </tr> <tr class="row40"> <td class="col0 leftalign"> <strong><code>hide</code></strong> </td><td class="col1 leftalign"> hides the text per <abbr title="Cascading Style Sheets">CSS</abbr> (the text will still appear in the source code, in non-modern browsers and is searchable) </td> </tr> <tr class="row41"> <td class="col0 leftalign"> <strong><code>noprint</code></strong> </td><td class="col1 leftalign"> displays text on the screen, but not in print, similar to <a href="/plugin:noprint" class="wikilink1" title="plugin:noprint" data-wiki-id="plugin:noprint">noprint</a> </td> </tr> <tr class="row42"> <td class="col0 leftalign"> <strong><code>onlyprint</code></strong> </td><td class="col1 leftalign"> displays text only in print, but not on the screen </td> </tr> <tr class="row43"> <td class="col0 leftalign"> <strong><code>pagebreak</code></strong> </td><td class="col1 leftalign"> forces a new page in printouts (not visible on the screen), similar to <a href="/plugin:pagebreak" class="wikilink1" title="plugin:pagebreak" data-wiki-id="plugin:pagebreak">pagebreak</a> </td> </tr> <tr class="row44"> <td class="col0 leftalign"> <strong><code>nopagebreak</code></strong> </td><td class="col1 leftalign"> tries to avoid a pagebreak in printouts (not visible on the screen) </td> </tr> <tr class="row45"> <td class="col0 leftalign"> <strong><code>spoiler</code></strong> </td><td class="col1 leftalign"> shows white text on a white background, only to be revealed by highlighting it; similar to <a href="/plugin:hide" class="wikilink1" title="plugin:hide" data-wiki-id="plugin:hide">hide</a> </td> </tr> <tr class="row46"> <td class="col0 leftalign"> <strong><code>button</code></strong> </td><td class="col1 leftalign"> when wrapped around a link, styles it like a button </td> </tr> <tr class="row47"> <td class="col0 leftalign"> <strong><code>tablewidth</code></strong> </td><td class="col1 leftalign"> sets widths of tables inside to whichever width the wrap gets, partly replaces <a href="/plugin:tablewidth" class="wikilink1" title="plugin:tablewidth" data-wiki-id="plugin:tablewidth">tablewidth</a> </td> </tr> <tr class="row48"> <td class="col0 leftalign"> <strong><code>indent</code></strong> </td><td class="col1 leftalign"> indents the text, could be used instead of <a href="/plugin:tab" class="wikilink1" title="plugin:tab" data-wiki-id="plugin:tab">tab</a> </td> </tr> <tr class="row49"> <td class="col0 leftalign"> <strong><code>outdent</code></strong> </td><td class="col1 leftalign"> “outdents” the text, could partly be used instead of <a href="/plugin:outdent" class="wikilink1" title="plugin:outdent" data-wiki-id="plugin:outdent">outdent</a> </td> </tr> <tr class="row50"> <td class="col0 leftalign"> <strong><code>prewrap</code></strong> </td><td class="col1 leftalign"> wraps text inside pre-formatted code blocks, similar to <a href="/plugin:wpre" class="wikilink1" title="plugin:wpre" data-wiki-id="plugin:wpre">wpre</a> </td> </tr> </table></div> <div class="secedit editbutton_table editbutton_7"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Table] " /><input type="hidden" name="target" value="table" /><input type="hidden" name="hid" value="table" /><input type="hidden" name="range" value="3916-16869" /><button type="submit" title="Table">Edit</button></div></form></div> </div> <h4 id="known_restrictions">Known restrictions</h4> <div class="level4"> <ul> <li class="level1"><div class="li"> WRAPs export to ODT format but not everything works 100%</div> </li> <li class="level1"><div class="li"> Round corners only work in modern browsers (no IE8 and below).</div> </li> <li class="level1"><div class="li"> Multiple columns only work in modern browsers (no IE9 and below).</div> </li> <li class="level1"><div class="li"> Width classes are experimental and only work in modern browsers (no IE8 and below).</div> </li> <li class="level1 node"><div class="li"> Normal DokuWiki Headlines used to not work and a work-around was added. Now that headlines do work, the work-around is not needed anymore but kept for backwards-compatibility. It was deprecated in version 2018-04-22 and disabled by default. They can be enabled by using the <code>emulatedHeadlines</code> <a href="#configuration_options" title="plugin:wrap ↵" class="wikilink1">config option</a>. The following syntax would then produce two different kinds of emulated headlines inside any wrap:</div> <ul> <li class="level2"><div class="li"> //**__Big Underlined Headline__**// (They will look a bit different in safety notes.)</div> </li> <li class="level2"><div class="li"> //**Small Headline**//</div> </li> </ul> </li> <li class="level1"><div class="li"> do not include ~~DISCUSSION~~ within a WRAP noprint block</div> </li> </ul> <p> You might need to adjust a few of the classes to your template's needs, especially <code>hi</code>, <code>lo</code> and <code>em</code>. If you have a dark or otherwise heavily coloured theme, please use the <code>darkTpl</code> <a href="#configuration_options" title="plugin:wrap ↵" class="wikilink1">config option</a>. </p> <p> The classes are easily adjustable and extensible. Any wishes are welcome. </p> </div> <div class="secedit editbutton_section editbutton_6"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Classes] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="classes" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="3797-18128" /><button type="submit" title="Classes">Edit</button></div></form></div> <h3 class="sectionedit8" id="widths">Widths</h3> <div class="level3"> <p> You can set any valid widths on any uppercase <WRAP> container: <code>%, px, em, rem, ex, ch, vw, vh, pt, pc, cm, mm, in</code>. Just set the width before or after or with the classes, e.g. </p> <pre class="code"><WRAP someclass 50% anotherclass>...</pre> <p> All except percentages will be reduced to have the maximum width available on smaller screens. </p> <p> You can also use the width keywords <code>half</code>, <code>third</code>, <code>twothirds</code> and <code>quarter</code>. To work correctly they need another wrap around them. E.g. </p> <pre class="code"><WRAP group> <WRAP half column>...</WRAP> <WRAP half column>...</WRAP> </WRAP></pre> <p> will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices. </p> </div> <div class="secedit editbutton_section editbutton_8"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Widths] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="widths" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="18129-18830" /><button type="submit" title="Widths">Edit</button></div></form></div> <h3 class="sectionedit9" id="anchor">Anchor</h3> <div class="level3"> <p> To define an anchor, the following syntax applies: </p> <pre class="code"><wrap #ankername /></pre> <p> The anchor is accessible via: <code>#ankername</code> </p> </div> <div class="secedit editbutton_section editbutton_9"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Anchor] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="anchor" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="18831-18968" /><button type="submit" title="Anchor">Edit</button></div></form></div> <h3 class="sectionedit10" id="languages_and_text_directions">Languages and Text Directions</h3> <div class="level3"> <p> You can change the language and the direction of a container by simply adding a colon followed by the language code, like this: </p> <pre class="code"><wrap :en>This text is explicitly marked as English.</wrap></pre> <p> The text direction (<code>rtl</code>, right to left or <code>ltr</code>, left to right) will get inserted automatically and is solely dependent on the language. The list of currently supported languages is taken from: <a href="http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code" class="urlextern" title="http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code">http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code</a> </p> <p> If you like to mark a text with a different text direction than the default one, you should use divs, i.e. uppercase <code><WRAP></code>s. Otherwise the text alignment won't change as well. </p> <p> This makes it a better replacement of <a href="/plugin:ltr" class="wikilink1" title="plugin:ltr" data-wiki-id="plugin:ltr">ltr</a> (and <a href="/plugin:lang" class="wikilink1" title="plugin:lang" data-wiki-id="plugin:lang">lang</a>). </p> </div> <div class="secedit editbutton_section editbutton_10"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Languages and Text Directions] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="languages_and_text_directions" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="18969-19730" /><button type="submit" title="Languages and Text Directions">Edit</button></div></form></div> <h2 class="sectionedit11" id="demo">Demo</h2> <div class="level2"> <p> You can see a demo of the plugin on <a href="http://demo.selfthinker.org/plugin:wrap" class="urlextern" title="http://demo.selfthinker.org/plugin:wrap">demo.selfthinker.org</a>. </p> <p> <a href="https://yadi.sk/i/ycbENWFjWEduTA" class="urlextern" title="https://yadi.sk/i/ycbENWFjWEduTA">“Examples” (demo) in Russian</a> (for v2011-05-15). <a href="http://pastebin.com/C9xjaEH9" class="urlextern" title="http://pastebin.com/C9xjaEH9">Source</a>. </p> <p> <a href="http://mcloud-doc.lonxun.com/wiki/playground/wrap" class="urlextern" title="http://mcloud-doc.lonxun.com/wiki/playground/wrap">a demo of the plugin in China</a> </p> </div> <div class="secedit editbutton_section editbutton_11"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Demo] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="demo" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="19731-20066" /><button type="submit" title="Demo">Edit</button></div></form></div> <h2 class="sectionedit12" id="configuration_options">Configuration options</h2> <div class="level2"> <div class="table sectionedit13"><table class="inline"> <thead> <tr class="row0"> <th class="col0 leftalign"> Option </th><th class="col1 leftalign"> Description </th><th class="col2"> Default value </th> </tr> </thead> <tr class="row1"> <td class="col0 leftalign"><code>noPrefix</code> </td><td class="col1"> Which (comma separated) class names should be excluded from being prefixed with “wrap_” (* and ? wildcards allowed) </td><td class="col2"> tabs, group </td> </tr> <tr class="row2"> <td class="col0"><code>restrictedClasses</code> </td><td class="col1"> Restrict usage of plugin to these (comma separated) classes (* and ? wildcards allowed) </td><td class="col2"> <em>(empty)</em> </td> </tr> <tr class="row3"> <td class="col0 leftalign"><code>restrictionType</code> </td><td class="col1"> Restriction type, specifies if classes above shall be included or excluded </td><td class="col2"> 0 </td> </tr> <tr class="row4"> <td class="col0 leftalign"><code>syntaxDiv</code> </td><td class="col1"> Which syntax should be used in the toolbar picker for block wraps? </td><td class="col2"> WRAP (other choices: div, block) </td> </tr> <tr class="row5"> <td class="col0 leftalign"><code>syntaxSpan</code> </td><td class="col1"> Which syntax should be used in the toolbar picker for inline wraps? </td><td class="col2"> wrap (other choices: span, inline) </td> </tr> <tr class="row6"> <td class="col0 leftalign"><code>darkTpl</code> </td><td class="col1"> Optimise colours for dark templates? </td><td class="col2"> 0 </td> </tr> <tr class="row7"> <td class="col0 leftalign"><code>emulatedHeadlines</code> </td><td class="col1"> Use emulated headings? (deprecated) </td><td class="col2"> 0 </td> </tr> </table></div> <div class="secedit editbutton_table editbutton_13"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Table] " /><input type="hidden" name="target" value="table" /><input type="hidden" name="hid" value="table1" /><input type="hidden" name="range" value="20102-20903" /><button type="submit" title="Table">Edit</button></div></form></div> </div> <div class="secedit editbutton_section editbutton_12"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Configuration options] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="configuration_options" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="20067-20904" /><button type="submit" title="Configuration options">Edit</button></div></form></div> <h2 class="sectionedit14" id="odt_support">ODT Support</h2> <div class="level2"> <p> <img src="/lib/images/smileys/fixme.svg" class="icon smiley" alt="FIXME" /> There have been more updates to the Wrap as well as the ODT plugin, so more stuff works. The below should be updated with what works and what doesn't. </p> <p> Since version 2015-06-13 the Wrap plugin supports exporting most of its functionality/styling to ODT when using at least version 2015-06-29 of the <a href="/plugin:odt" class="wikilink1" title="plugin:odt" data-wiki-id="plugin:odt">ODT Plugin</a>. By default, Wrap syntax will be exported to ODT using 'print' <abbr title="Cascading Style Sheets">CSS</abbr> styles. This means the exported Wrap elements will look the same when printing a wiki page. If you want to have the ODT exported Wrap elements look like displayed in the browser (i.e. with 'screen' <abbr title="Cascading Style Sheets">CSS</abbr> styles), then use the following ODT plugin configuration settings: </p> <ul> <li class="level1"><div class="li"> add wrap to the 'usestyles' config setting</div> </li> <li class="level1"><div class="li"> set the 'media_sel' setting to 'screen'</div> </li> </ul> <p> If you prefer a user defined <abbr title="Cascading Style Sheets">CSS</abbr> style for the Wrap ODT export, then simply place a file 'odt.css' into the Wrap plugin folder with your own <abbr title="Cascading Style Sheets">CSS</abbr> code (and set config setting 'media_sel' to 'print'). </p> <p> Here is what is currently <strong>not</strong> supported: </p> <ul> <li class="level1"><div class="li"> columns: left/right/center/column is partly supported; they are positioned correctly, but content is not floating around them</div> </li> <li class="level1"><div class="li"> widths are not supported except % and half/third/quarter</div> </li> <li class="level1"><div class="li"> boxes and notes: hardly any formatting inside them is supported, therefore emulated headings also don't work</div> </li> <li class="level1"><div class="li"> tabs will just show a list of links</div> </li> <li class="level1"><div class="li"> noprint</div> </li> <li class="level1"><div class="li"> nopagebreak</div> </li> <li class="level1"><div class="li"> onlyprint only works on boxes</div> </li> <li class="level1"><div class="li"> languages are set correctly but do not seem to affect text alignment</div> </li> <li class="level1"><div class="li"> shorthand syntax</div> </li> <li class="level1"><div class="li"> Not supported because not relevant in ODT: clear, prewrap</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_14"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[ODT Support] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="odt_support" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="20905-22491" /><button type="submit" title="ODT Support">Edit</button></div></form></div> <h2 class="sectionedit15" id="toolbar_picker">Toolbar picker</h2> <div class="level2"> <p> <img src="/_media/plugin:wrap_plugin_toolbar_picker.png" class="mediaright" loading="lazy" alt="" /> </p> <p> The wrap picker in the editing toolbar adds the most common wrap syntaxes. </p> <ul> <li class="level1"><div class="li"> “columns” creates a set of half columns</div> </li> <li class="level1"><div class="li"> “simple centered box” creates a standard box (60% wide, centered)</div> </li> <li class="level1"><div class="li"> “info, tip, important, alert, help, download, todo box” creates specifically themed boxes (also 60% wide, centered)</div> </li> <li class="level1"><div class="li"> “clear floats” creates a <code><WRAP clear/></code></div> </li> <li class="level1"><div class="li"> “especially emphasised, highlighted, less significant” creates the respective marks</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_15"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Toolbar picker] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="toolbar_picker" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="22492-23021" /><button type="submit" title="Toolbar picker">Edit</button></div></form></div> <h2 class="sectionedit16" id="extend_with_custom_styles">Extend with custom styles</h2> <div class="level2"> <p> If you like to add your own classes and styles to the plugin, you can simply add the styles for your class preceded by “<code>wrap_</code>” to your <a href="/devel:css#user_styles" class="wikilink1" title="devel:css" data-wiki-id="devel:css">user styles</a>. Please note, any classes need to be <strong>lower case</strong>. </p> <p> E.g. if you need a <code><WRAP myclass></code>, you edit (or create if it doesn't exist) your <code>conf/userstyle.css</code> and add your <code>.wrap_myclass{}</code> with its style definitions to it. (If necessary, edit <code>conf/userprint.css</code><sup><a href="#fn__1" id="fnt__1" class="fn_top">1)</a></sup> for the print view, <code>conf/userrtl.css</code><sup><a href="#fn__2" id="fnt__2" class="fn_top">2)</a></sup> for RTL languages and <code>conf/userall.css</code><sup><a href="#fn__3" id="fnt__3" class="fn_top">3)</a></sup> for all styles as well.) </p> <p> User permissions for every file used must be similar to original DokuWiki files. </p> <p> Since version 2010-03-14 you have the possibility to exclude certain class names from being prefixed with “wrap_”. Just add a comma separated list of class names into the config option “noPrefix” in the configuration manager. </p> </div> <div class="secedit editbutton_section editbutton_16"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Extend with custom styles] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="extend_with_custom_styles" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="23022-24037" /><button type="submit" title="Extend with custom styles">Edit</button></div></form></div> <h3 class="sectionedit17" id="examples1">Examples</h3> <div class="level3"> <p> in userall.css: </p> <pre class="code css"><span class="re1">.dokuwiki</span> div<span class="re1">.wrap_note</span><span class="br0">{</span> <span class="coMULTI">/* added */</span> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#eee</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#000</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">.5em</span> <span class="re3">.5em</span> <span class="re3">.5em</span> <span class="re3">.5em</span><span class="sy0">;</span> <span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span> <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span> <span class="br0">}</span></pre> <p> call in DW-page: </p> <pre class="code"><WRAP note>...</WRAP></pre> <p> Here are some <a href="/plugin:wrap:extensions" class="wikilink1" title="plugin:wrap:extensions" data-wiki-id="plugin:wrap:extensions">useful Wrap extensions</a> created by users of this plugin. </p> </div> <div class="secedit editbutton_section editbutton_17"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Examples] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="examples1" /><input type="hidden" name="codeblockOffset" value="0" /><input type="hidden" name="range" value="24038-24397" /><button type="submit" title="Examples">Edit</button></div></form></div> <h3 class="sectionedit18" id="add_former_typography_classes">Add former typography classes</h3> <div class="level3"> <p> The old typography classes were removed in version 2011-05-15. If you need something similar, use the <a href="/plugin:block" class="wikilink1" title="plugin:block" data-wiki-id="plugin:block">Block</a> plugin instead. Or you can use your own and copy them to your own user styles (see <a href="#extend_with_custom_styles" title="plugin:wrap ↵" class="wikilink1">above</a>). </p> </div> <div class="secedit editbutton_section editbutton_18"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Add former typography classes] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="add_former_typography_classes" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="24398-24673" /><button type="submit" title="Add former typography classes">Edit</button></div></form></div> <h2 class="sectionedit19" id="how_to_use_the_helper">How to use the helper</h2> <div class="level2"> <p> From version 2011-05-15 on the plugin includes a helper plugin which you can use to add classes, width and lang/dir to any other plugin. </p> </div> <div class="secedit editbutton_section editbutton_19"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[How to use the helper] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="how_to_use_the_helper" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="24674-24846" /><button type="submit" title="How to use the helper">Edit</button></div></form></div> <h3 class="sectionedit20" id="example_how_to_get_just_one_kind_of_attribute">Example how to get just one kind of attribute</h3> <div class="level3"> <pre class="code php"><span class="co1">// get lang from wrap helper plugin</span> <span class="re0">$lang</span> <span class="sy0">=</span> <span class="st_h">''</span><span class="sy0">;</span> <span class="kw1">if</span><span class="br0">(</span><span class="sy0">!</span>plugin_isdisabled<span class="br0">(</span><span class="st_h">'wrap'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$wrap</span> <span class="sy0">=</span> plugin_load<span class="br0">(</span><span class="st_h">'helper'</span><span class="sy0">,</span> <span class="st_h">'wrap'</span><span class="br0">)</span><span class="sy0">;</span> <span class="re0">$attr</span> <span class="sy0">=</span> <span class="re0">$wrap</span><span class="sy0">-></span><span class="me1">getAttributes</span><span class="br0">(</span><span class="re0">$data</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">if</span><span class="br0">(</span><span class="re0">$attr</span><span class="br0">[</span><span class="st_h">'dir'</span><span class="br0">]</span><span class="br0">)</span> <span class="re0">$lang</span> <span class="sy0">=</span> <span class="st_h">' lang="'</span><span class="sy0">.</span><span class="re0">$attr</span><span class="br0">[</span><span class="st_h">'lang'</span><span class="br0">]</span><span class="sy0">.</span><span class="st_h">'" xml:lang="'</span><span class="sy0">.</span><span class="re0">$attr</span><span class="br0">[</span><span class="st_h">'lang'</span><span class="br0">]</span><span class="sy0">.</span><span class="st_h">'" dir="'</span><span class="sy0">.</span><span class="re0">$attr</span><span class="br0">[</span><span class="st_h">'dir'</span><span class="br0">]</span><span class="sy0">.</span><span class="st_h">'"'</span><span class="sy0">;</span> <span class="br0">}</span>   <span class="co1">// add lang to your plugin's output</span> <span class="re0">$renderer</span><span class="sy0">-></span><span class="me1">doc</span> <span class="sy0">.=</span> <span class="st_h">'<span '</span><span class="sy0">.</span><span class="re0">$lang</span><span class="sy0">.</span><span class="st_h">' class="foo">'</span><span class="sy0">;</span></pre> <p> <code>getAttributes()</code> expects the string with “classes #id width :language”. It returns an array with </p> <ul> <li class="level1"><div class="li"> <code>$attr['class']</code>: <abbr title="Cascading Style Sheets">CSS</abbr> class(es)</div> </li> <li class="level1"><div class="li"> <code>$attr['id']</code>: <abbr title="Cascading Style Sheets">CSS</abbr> ID</div> </li> <li class="level1"><div class="li"> <code>$attr['width']</code>: width</div> </li> <li class="level1"><div class="li"> <code>$attr['lang']</code> and <code>$attr['dir']</code>: language and text direction</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_20"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Example how to get just one kind of attribute] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="example_how_to_get_just_one_kind_of_attribute" /><input type="hidden" name="codeblockOffset" value="1" /><input type="hidden" name="range" value="24847-25556" /><button type="submit" title="Example how to get just one kind of attribute">Edit</button></div></form></div> <h3 class="sectionedit21" id="example_how_to_get_all_attributes">Example how to get all attributes</h3> <div class="level3"> <pre class="code php"><span class="co1">// get attributes from wrap helper plugin</span> <span class="re0">$attr</span> <span class="sy0">=</span> <span class="st_h">''</span><span class="sy0">;</span> <span class="kw1">if</span><span class="br0">(</span><span class="sy0">!</span>plugin_isdisabled<span class="br0">(</span><span class="st_h">'wrap'</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$wrap</span> <span class="sy0">=</span> plugin_load<span class="br0">(</span><span class="st_h">'helper'</span><span class="sy0">,</span> <span class="st_h">'wrap'</span><span class="br0">)</span><span class="sy0">;</span> <span class="re0">$attr</span> <span class="sy0">=</span> <span class="re0">$wrap</span><span class="sy0">-></span><span class="me1">buildAttributes</span><span class="br0">(</span><span class="re0">$data</span><span class="sy0">,</span> <span class="st_h">'additionalClass'</span><span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span>   <span class="co1">// add those attributes to your plugin's output</span> <span class="re0">$renderer</span><span class="sy0">-></span><span class="me1">doc</span> <span class="sy0">.=</span> <span class="st_h">'<div '</span><span class="sy0">.</span><span class="re0">$attr</span><span class="sy0">.</span><span class="st_h">'">'</span><span class="sy0">;</span></pre> <p> <code>buildAttributes()</code> expects the same string as above (“classes #id width :language”) and an optional string for additional classes, in case your plugin has <abbr title="Cascading Style Sheets">CSS</abbr> classes of its own which it needs to reuse. It returns a string with all the attributes prepared for <abbr title="HyperText Markup Language">HTML</abbr>. </p> </div> <div class="secedit editbutton_section editbutton_21"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Example how to get all attributes] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="example_how_to_get_all_attributes" /><input type="hidden" name="codeblockOffset" value="2" /><input type="hidden" name="range" value="25557-26173" /><button type="submit" title="Example how to get all attributes">Edit</button></div></form></div> <h2 class="sectionedit22" id="development">Development</h2> <div class="level2"> </div> <div class="secedit editbutton_section editbutton_22"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Development] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="development" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="26174-26198" /><button type="submit" title="Development">Edit</button></div></form></div> <h3 class="sectionedit23" id="done">Done</h3> <div class="level3"> <p> <a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom" class="media" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom"><img src="/lib/exe/fetch.php?w=16&h=16&cache=recache&tok=2f4945&media=https%3A%2F%2Fraw.githubusercontent.com%2Flegacy-icons%2Ffamfamfam-silk%2Fmaster%2Fdist%2Fpng%2Ffeed.png" class="medialeft" loading="lazy" title="Recent commits to Wrap Plugin (RSS feed)" alt="Recent commits to Wrap Plugin (RSS feed)" width="16" height="16" /></a> </p> <ul class="rss"><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/81450d7519e8f4da56e6fb2b8dcc98e1a01648ff" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/81450d7519e8f4da56e6fb2b8dcc98e1a01648ff">Merge pull request #278 from dokuwiki-translate/lang_update_827_17092…</a> (2024-02-29 22:51)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/02fb5860e9fb78ae8cd419c3eac2ad0b19e9383e" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/02fb5860e9fb78ae8cd419c3eac2ad0b19e9383e">translation update</a> (2024-02-29 20:25)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/9c6c948e33d880fdf9583545439af9e3c1fabae4" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/9c6c948e33d880fdf9583545439af9e3c1fabae4">Merge pull request #273 from dokuwiki-translate/lang_update_708_16959…</a> (2023-09-28 14:00)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/0bd93cc727bb99334690864103799ecfa5618555" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/0bd93cc727bb99334690864103799ecfa5618555">translation update</a> (2023-09-28 13:50)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/30d92aa19a154091f23372a9a5f3e4958e7a16db" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/30d92aa19a154091f23372a9a5f3e4958e7a16db">Merge pull request #271 from dokuwiki-translate/lang_update_694_16919…</a> (2023-08-14 20:39)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/0d1b453a2d2b5d2dccdc8d5501c34486345dd013" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/0d1b453a2d2b5d2dccdc8d5501c34486345dd013">translation update</a> (2023-08-14 00:55)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/63b6c0187183dad3cc59c74ff1bdd68e133ee089" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/63b6c0187183dad3cc59c74ff1bdd68e133ee089">Update plugin.info.txt</a> (2023-08-13 14:26)</div></li><li><div class="li"><a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/ce2c1d7ecc09211d0c3f6dd44bfa020b094c2fad" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/ce2c1d7ecc09211d0c3f6dd44bfa020b094c2fad">Merge pull request #250 from saschaleib/saschaleib-patch-language-dir</a> (2023-08-13 14:14)</div></li></ul> </div> <div class="secedit editbutton_section editbutton_23"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Done] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="done" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="26199-26523" /><button type="submit" title="Done">Edit</button></div></form></div> <h3 class="sectionedit24" id="localization">Localization</h3> <div class="level3"> <p> You can help me with translations and <a href="https://translate.dokuwiki.org/plugin/wrap" class="urlextern" title="https://translate.dokuwiki.org/plugin/wrap">update the language files</a>. There are two files to translate: </p> <ul> <li class="level1"><div class="li"> <a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php">lang/en/lang.php</a> is for the explaining titles on the picker images.</div> </li> <li class="level1"><div class="li"> <a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/settings.php" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/settings.php">lang/en/settings.php</a> is for the configuration options.</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_24"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Localization] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="localization" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="26524-27000" /><button type="submit" title="Localization">Edit</button></div></form></div> <h2 class="sectionedit25" id="credits">Credits</h2> <div class="level2"> <ul> <li class="level1"><div class="li"> The code reuses parts of the <a href="/plugin:box" class="wikilink1" title="plugin:box" data-wiki-id="plugin:box">box</a> plugin by <a href="mailto:chris%20%5Bat%5D%20jalakai%20%5Bdot%5D%20co%20%5Bdot%5D%20uk" class="mail" title="chris [at] jalakai [dot] co [dot] uk">Christopher Smith</a>.</div> </li> <li class="level1"><div class="li"> The ODT support was implemented by <a href="https://github.com/LarsGit223" class="urlextern" title="https://github.com/LarsGit223">LarsDW223</a>.</div> </li> <li class="level1"><div class="li"> The images for the notes are taken from the <a href="http://schollidesign.deviantart.com/art/Human-O2-Iconset-105344123" class="urlextern" title="http://schollidesign.deviantart.com/art/Human-O2-Iconset-105344123">Human-O2 icon set</a>.</div> </li> <li class="level1"><div class="li"> The toolbar uses images from the <a href="http://www.famfamfam.com/lab/icons/silk/" class="urlextern" title="http://www.famfamfam.com/lab/icons/silk/">Silk Icon Set</a> and the <a href="http://www.damieng.com/icons/silkcompanion" class="urlextern" title="http://www.damieng.com/icons/silkcompanion">Silk Companion Icon Set</a>.</div> </li> <li class="level1"><div class="li"> Thanks to <a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/contributors" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/contributors">all contributors</a>.</div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_25"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Credits] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="credits" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="27001-27615" /><button type="submit" title="Credits">Edit</button></div></form></div> <h2 class="sectionedit26" id="see_also">See also</h2> <div class="level2"> <ul> <li class="level1"><div class="li"> <a href="/plugin:wrap:extensions" class="wikilink1" title="plugin:wrap:extensions" data-wiki-id="plugin:wrap:extensions">Useful extensions for the Wrap Plugin</a></div> </li> <li class="level1"><div class="li"> <a href="/plugin:wrap:extensions?do=index" class="wikilink1" title="plugin:wrap:extensions" data-wiki-id="plugin:wrap:extensions">Sub pages to Wrap Plugin</a></div> </li> </ul> </div> <div class="secedit editbutton_section editbutton_26"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[See also] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="see_also" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="27616-27761" /><button type="submit" title="See also">Edit</button></div></form></div> <h2 class="sectionedit27" id="discussion">Discussion</h2> <div class="level2"> <p> Before reporting any issues (bugs or requests), please first take a look at the <a href="/faq:pluginproblems" class="wikilink1" title="faq:pluginproblems" data-wiki-id="faq:pluginproblems">FAQ on plugin problems</a>. </p> <p> You can report any issues either on the <a href="https://github.com/selfthinker/dokuwiki_plugin_wrap/issues" class="urlextern" title="https://github.com/selfthinker/dokuwiki_plugin_wrap/issues">Issue Tracker</a> or on the separate <a href="/plugin:wrap:discussion" class="wikilink1" title="plugin:wrap:discussion" data-wiki-id="plugin:wrap:discussion">discussion</a> page. </p> <p> Not understand how works “tabs”, I create the tabs but how I add the content of the tabs ? If I click on a tab redirect me to page that not exist. — <a href="https://forum.dokuwiki.org/u/adrianvesa" class="interwiki iw_user" title="https://forum.dokuwiki.org/u/adrianvesa">adrianvesa</a> <em>2016-03-30 19:58</em> </p> <p> Example how to add new button into the picker: <a href="http://webdev.d77.in/downloads/dokuwiki_wrap_prewrap.tar.gz" class="urlextern" title="http://webdev.d77.in/downloads/dokuwiki_wrap_prewrap.tar.gz">DokuWiki wrap plugin prewrap patch</a><br/> This patch adds button for <code><WRAP prewrap></code> code. — <a href="https://forum.dokuwiki.org/u/denisvs" class="interwiki iw_user" title="https://forum.dokuwiki.org/u/denisvs">DenisVS</a> <em>2017-07-11 14:38</em> </p> <p> Is it possible to edit the selection in the 'Toolbar Picker' I would like to add something. — <a href="https://forum.dokuwiki.org/u/stud_med" class="interwiki iw_user" title="https://forum.dokuwiki.org/u/stud_med">stud_med</a> <em>2021-01-19 19:42</em> </p> </div> <div class="secedit editbutton_section editbutton_27"><form class="button btn_secedit" method="post" action="/plugin:wrap"><div class="no"><input type="hidden" name="do" value="edit" /><input type="hidden" name="rev" value="1722878179" /><input type="hidden" name="summary" value="[Discussion] " /><input type="hidden" name="target" value="section" /><input type="hidden" name="hid" value="discussion" /><input type="hidden" name="codeblockOffset" value="3" /><input type="hidden" name="range" value="27762-" /><button type="submit" title="Discussion">Edit</button></div></form></div><div class="footnotes"> <div class="fn"><sup><a href="#fnt__1" id="fn__1" class="fn_bot">1)</a></sup> <div class="content"> <code>conf/printstyle.css</code> in Anteater</div></div> <div class="fn"><sup><a href="#fnt__2" id="fn__2" class="fn_bot">2)</a></sup> <div class="content"> <code>conf/rtlstyle.css</code> in Anteater</div></div> <div class="fn"><sup><a href="#fnt__3" id="fn__3" class="fn_bot">3)</a></sup> <div class="content"> <code>conf/allstyle.css</code> in Anteater</div></div> </div>  </div> <div class="docInfo"><bdi>plugin/wrap.txt</bdi> · Last modified: <time datetime="2024-08-05T19:16:19+0200">2024-08-05 19:16</time> by <bdi>fiwswe</bdi></div> <hr class="a11y" /> </div></main>  <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> <h3 class="a11y" id="dokuwiki__pagetools__heading">Page Tools</h3> <div class="tools"> <ul> <li class="edit"><a href="/plugin:wrap?do=edit" title="Edit this page [e]" rel="nofollow" accesskey="e"><span>Edit this page</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg></a></li><li class="revs"><a href="/plugin:wrap?do=revisions" title="Old revisions [o]" rel="nofollow" accesskey="o"><span>Old revisions</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg></a></li><li class="backlink"><a href="/plugin:wrap?do=backlink" title="Backlinks" rel="nofollow"><span>Backlinks</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg></a></li><li class="top"><a href="#dokuwiki__top" title="Back to top [t]" rel="nofollow" accesskey="t"><span>Back to top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg></a></li> </ul> </div> </nav> </div>  <footer id="dokuwiki__footer"><div class="pad"> <div class="license">Except where otherwise noted, content on this wiki is licensed under the following license: <bdi><a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license" class="urlextern">CC Attribution-Share Alike 4.0 International</a></bdi></div> <div class="buttons"> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" rel="license"><img src="/lib/images/license/button/cc-by-sa.png" alt="CC Attribution-Share Alike 4.0 International" /></a> <a href="https://www.dokuwiki.org/donate" title="Donate" ><img src="/lib/tpl/dokuwiki/images/button-donate.gif" width="80" height="15" alt="Donate" /></a> <a href="https://php.net" title="Powered by PHP" ><img src="/lib/tpl/dokuwiki/images/button-php.gif" width="80" height="15" alt="Powered by PHP" /></a> <a href="//validator.w3.org/check/referer" title="Valid HTML5" ><img src="/lib/tpl/dokuwiki/images/button-html5.png" width="80" height="15" alt="Valid HTML5" /></a> <a href="//jigsaw.w3.org/css-validator/check/referer?profile=css3" title="Valid CSS" ><img src="/lib/tpl/dokuwiki/images/button-css.png" width="80" height="15" alt="Valid CSS" /></a> <a href="https://dokuwiki.org/" title="Driven by DokuWiki" ><img src="/lib/tpl/dokuwiki/images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> <div style="margin-top: 2em; font-size:90%" class="dokuwiki"><div style="float:right"><a href="http://www.splitbrain.org/personal#imprint" style="float:right; text-decoration: none; color:#333">Imprint</a></div></div> <style type="text/css"> @media screen { body { padding-top: 30px; } #global__header { position: absolute; top: 0; left: 0; text-align: left; vertical-align: middle; line-height: 1.5; background-color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 5px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } #global__header h2 { position: absolute; left: -99999em; top: 0; overflow: hidden; display: inline; } #global__header ul, #global__header li { margin: 0; padding: 0; list-style: none; display: inline; line-height: 1.5; } #global__header a { color: #bbb; text-decoration: none; margin-right: 20px; font-size: 14px; font-weight: normal; } #global__header a:hover, #global__header a:active, #global__header a:focus { color: #fff; text-decoration: underline; } #global__header form { float: right; margin: 0 0 0 20px; } #global__header input { background-color: #333; background-image: none; border: 1px solid #bbb; color: #fff; box-shadow: none; border-radius: 2px; margin: 0; line-height: normal; padding: 1px 0 1px 0; height: auto; } #global__header input.button { border: none; color: #bbb; } #global__header input.button:hover, #global__header input.button:active, #global__header input.button:focus { color: #fff; text-decoration: underline; } } /* /@media */ @media only screen and (min-width: 601px) { /* changes specific for www.dokuwiki.org */ #dokuwiki__header { padding-top: 3em; } #dokuwiki__usertools { top: 3em; } /* changes specific for bugs.dokuwiki.org */ div#container div#showtask { top: 40px; } } /* /@media */ @media only screen and (max-width: 600px) { body { padding-top: 0; } #global__header { position: static; white-space: normal; overflow: auto; } #global__header form { float: none; display: block; margin: 0 0 .4em; } } /* /@media */ @media print { #global__header { display: none; } } /* /@media */ </style> <div id="global__header"> <h2>Global DokuWiki Links</h2> <form method="get" action="https://search.dokuwiki.org/" target="_top"> <input type="text" name="q" title="Search all DokuWiki sites at once" class="input" /> <input type="submit" title="Search all DokuWiki sites at once" value="Search" class="button" /> </form> <ul> <li><a href="https://download.dokuwiki.org" title="Download the latest release" target="_top">Download</a></li> <li><a href="https://www.dokuwiki.org" title="Read the DokuWiki documentation" target="_top">Wiki</a></li> <li><a href="https://forum.dokuwiki.org" title="Ask questions in the DokuWiki forum" target="_top">Forum</a></li> <li><a href="https://irc.dokuwiki.org" title="Check IRC chat logs or join the chat" target="_top">IRC</a></li> <li><a href="https://github.com/splitbrain/dokuwiki/issues" title="Report and track bugs" target="_top">Bugs</a></li> <li><a href="https://translate.dokuwiki.org/" title="Help translating the DokuWiki interface" target="_top">Translate</a></li> <li><a href="https://github.com/splitbrain/dokuwiki" title="Access the most recent git commits" target="_top">Git</a></li> <li><a href="https://xref.dokuwiki.org/reference/dokuwiki/" title="Cross-Reference of the DokuWiki source code" target="_top">XRef</a></li> <li><a href="https://codesearch.dokuwiki.org/" title="Search through the sources of DokuWiki, plugins and templates" target="_top">Code Search</a></li> </ul> </div>  </div></footer> </div></div> <div class="no"><img src="/lib/exe/taskrunner.php?id=plugin%3Awrap&1739798833" width="2" height="1" alt="" /></div> <div id="screen__mode" class="no"></div></body> </html>

CINXE.COM

plugin:wrap [DokuWiki]