django-markdownx/docs/js/events.html
Pouria Hadjibagheri a9f010dc45 documentations.
2017-04-23 13:52:52 +01:00

352 lines
No EOL
12 KiB
HTML

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events &mdash; Django Markdownx 2.0.0 documentation</title>
<link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
<link rel="index" title="Index"
href="../genindex.html"/>
<link rel="search" title="Search" href="../search.html"/>
<link rel="top" title="Django Markdownx 2.0.0 documentation" href="../index.html"/>
<link rel="up" title="JavaScript" href="js.html"/>
<link rel="next" title="MarkdownX Modules" href="../markdownx/markdownx.html"/>
<link rel="prev" title="Utilities" href="docs/utils.html"/>
<script src="../_static/js/modernizr.min.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="../index.html" class="icon icon-home"> Django Markdownx
</a>
<div class="version">
2.0
</div>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../installation.html">Installation</a></li>
<li class="toctree-l1"><a class="reference internal" href="../getting_started.html">Getting Started</a></li>
<li class="toctree-l1"><a class="reference internal" href="../example.html">Example</a></li>
<li class="toctree-l1"><a class="reference internal" href="../customization.html">Customization</a></li>
<li class="toctree-l1"><a class="reference internal" href="../translation.html">Translation</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="js.html">JavaScript</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="docs.html">JavaScript Code</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#reference">Reference</a></li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="js.html#compatibility">Compatibility</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../markdownx/markdownx.html">MarkdownX Modules</a></li>
<li class="toctree-l1"><a class="reference internal" href="../license.html">License</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="../index.html">Django Markdownx</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="../index.html">Docs</a> &raquo;</li>
<li><a href="js.html">JavaScript</a> &raquo;</li>
<li>Events</li>
<li class="wy-breadcrumbs-aside">
<!-- User defined GitHub URL -->
<a href="https://github.com/adi-/django-markdownx/tree/master/markdownx/static/markdownx/js" class="fa fa-github"> Edit on GitHub</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="events">
<h1>Events<a class="headerlink" href="#events" title="Permalink to this headline"></a></h1>
<p>Some <strong>MarkdownX</strong> processes trigger events that may be utilized for to different purposes. To handle such events in
JavaScript, you may take advantage of event listeners as exemplified below.</p>
<hr class="docutils" />
<div class="section" id="reference">
<h2>Reference<a class="headerlink" href="#reference" title="Permalink to this headline"></a></h2>
<table border="1" class="docutils">
<colgroup>
<col width="18%" />
<col width="35%" />
<col width="47%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Event</th>
<th class="head">JavaScript handler</th>
<th class="head">Description</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Initialization</td>
<td><code class="docutils literal"><span class="pre">markdownx.init</span></code></td>
<td>Triggered after jQuery plugin init.</td>
</tr>
<tr class="row-odd"><td>Update</td>
<td><code class="docutils literal"><span class="pre">markdownx.update</span></code></td>
<td><p class="first">Triggered when editor text is markdownified.</p>
<dl class="last docutils">
<dt>Returns: <strong>response</strong> (<em>string</em>)</dt>
<dd>variable containing markdownified text.</dd>
</dl>
</td>
</tr>
<tr class="row-even"><td>Update error</td>
<td><code class="docutils literal"><span class="pre">markdownx.updateError</span></code></td>
<td>Triggered when a problem occurred during markdownify.</td>
</tr>
<tr class="row-odd"><td>Beginning to upload</td>
<td><code class="docutils literal"><span class="pre">markdownx.markdownx.fileUploadBegin</span></code></td>
<td>Triggered when the file is posted.</td>
</tr>
<tr class="row-even"><td>File upload end</td>
<td><code class="docutils literal"><span class="pre">markdownx.fileUploadEnd</span></code></td>
<td>Triggered when the file has been uploaded.</td>
</tr>
<tr class="row-odd"><td>File upload error</td>
<td><code class="docutils literal"><span class="pre">markdownx.fileUploadError</span></code></td>
<td>Triggered if the upload didn&#8217;t work.</td>
</tr>
</tbody>
</table>
</div>
<hr class="docutils" />
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline"></a></h2>
<dl class="docutils">
<dt>Initialization</dt>
<dd><code class="docutils literal"><span class="pre">markdownx.init</span></code> is an event that does <em>not</em> return a response.</dd>
</dl>
<p>JavaScript ECMA 2015+:</p>
<div class="highlight-javascript"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7</pre></div></td><td class="code"><div class="highlight"><pre><span></span><span class="kd">let</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;markdownx&#39;</span><span class="p">);</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">map</span><span class="p">(</span><span class="nx">key</span> <span class="o">=&gt;</span>
<span class="nx">element</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;markdownx.init&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;MarkdownX initialized.&quot;</span><span class="p">))</span>
<span class="p">);</span>
</pre></div>
</td></tr></table></div>
<dl class="docutils">
<dt>Update</dt>
<dd><code class="docutils literal"><span class="pre">markdownx.update</span></code> is an event that returns a response.</dd>
</dl>
<p>JavaScript ECMA 2015+:</p>
<div class="highlight-javascript"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7</pre></div></td><td class="code"><div class="highlight"><pre><span></span><span class="kd">let</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;markdownx&#39;</span><span class="p">);</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">map</span><span class="p">(</span><span class="nx">key</span> <span class="o">=&gt;</span>
<span class="nx">element</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;markdownx.update&#39;</span><span class="p">,</span> <span class="nx">event</span> <span class="o">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">detail</span><span class="p">))</span>
<span class="p">);</span>
</pre></div>
</td></tr></table></div>
</div>
</div>
</div>
<div class="articleComments">
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../markdownx/markdownx.html" class="btn btn-neutral float-right" title="MarkdownX Modules" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="docs/utils.html" class="btn btn-neutral" title="Utilities" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<p>
&copy; Copyright 2017 - Adi, Pouria Hadjibagheri.
</p>
</div>
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT:'../',
VERSION:'2.0.0',
COLLAPSE_INDEX:false,
FILE_SUFFIX:'.html',
HAS_SOURCE: true,
SOURCELINK_SUFFIX: '.txt'
};
</script>
<script type="text/javascript" src="../_static/jquery.js"></script>
<script type="text/javascript" src="../_static/underscore.js"></script>
<script type="text/javascript" src="../_static/doctools.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="../_static/js/theme.js"></script>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
</script>
</body>
</html>