Table of Contents
InlineJS Plugin
Compatible with DokuWiki
2014-09-29, 2015-08-10, 2016-06-26, 2017-02-19
Allow inline JavaScript and StyleSheet in wiki pages
Installation
Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.
Even though this plugin installed successfully, you may need additional configuration in the configuration manager in order to make the plugin effective (except Macro syntax). Please see Configuration and Settings section below.
Examples/Usage
This plugin was initially developed to incorporate some JavaScript Chart/Plot in a DokuWiki page. In such case, you may need to 1) load several library files in <head> section of HTML, 2) prepare chart box or canvas, and 3) write inline JavaScript to produce a chart.
The inlineJS plugin enables step 1) and 3) inside your DW page by “<PRELOAD>” and “<JS>” tag markup, respectively. For example, to draw a X-Y graph using jqPlot – a plotting and charting plugin for the jQuery JavaScript framework, the DW page source looks like:
<PRELOAD>
# Step 1: load several library files in <head> section
/js/jquery.jqplot.css # css
# /js/jquery.min.js (not required since DokuWiki 2012-01-25 Angua uses jQuery)
/js/jquery.jqplot.min.js # js
</PRELOAD>
<HTML>
<!-- Step 2 : prepare chart box (canvas) -->
<p>Figure. line chart example</p>
<div id="chartbox" style="width:300px; height:300px;"></div>
</HTML>
<JS>
// Step 3 : inline JavaScript to produce a chart
// ! do not forget to replace "$.jqplot" to "jQuery.jqplot"
var data = [[0,0.0],[1,1.0],[2,1.414],[5,2.236],[7,2.646],[11,3.317]];
jQuery.jqplot('chartbox', [data]);
</JS>
Syntax
PRELOAD tag
JavaScript and Stylesheet preloader in <head> section of HTML.
<PRELOAD> /path/to/javascript.js /path/to/stylesheet.css <link rel="stylesheet" href="http://example.com/css?key=value"> </PRELOAD>
HTML output:
<head> <script type="text/javascript" charset="utf-8" src="/path/to/javascript.js"></script> <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css"/> <link rel="stylesheet" type="text/css" href="http://example.com/css?key=value"/> </head>
- Those files will be loaded only for specific pages, instead for all pages.
- one line for one file to be loaded.
- use “#” for comment
- external .js or .css using URL
- If
<PRELOAD debug>used, filename(s) to be loaded in <head> section are displayed in the DW page.
JS tag
Inline JavaScript embedder in <body> section of HTML.
<JS> ... </JS> or <js> ... </js>
HTML output:
<script type="text/javascript"> /*<![CDATA[*/ ... /*!]]>*/ </script>
- DokuWiki (conf/userscript.js) supports a “site-wide” JavaScript solution. Please refer javascript for detail.
- This plugin provides a “per-page” solution for inline JavaScript.
- Your JavaScript between
<JS>and</JS>is enclosed inside CDATA section in accordance with the guidance in javascript.
CSS tag
Configuration and Settings
By default, both “<JS>” and “<PRELOAD>” markup in the page will be ignored if htmlok is disabled in the configuration manager.
The “follow_htmlok” option of this plugin is available to these markup effective independently from htmlok. The default value of “follow_htmlok” = 1.
Note that if embedding HTML using the “<html>” tag is allowed, users who can edit a page is also able to write inline JavaScript in the page without this plugin.
 This is a security risk when used on a freely accessible site because it enables Cross Site Scripting attacks! Prior to use this plugin, you are strongly recommended to refer htmlok, plugin_security and syntax pages. |
|---|
Development
Change Log
- Merge pull request #8 from ssahara/PSR-12 (2019-10-05 13:54)
- Coding style (2019-10-05 10:41)
- Merge pull request #6 from ssahara/dev2 (2017-12-06 12:31)
- version up (2017-12-06 12:18)
- change intro text used in preloader (2017-12-06 12:08)
ToDo
no plan…