mirror of
https://github.com/Hopiu/django-markdownx.git
synced 2026-03-17 14:00:22 +00:00
244 lines
11 KiB
HTML
244 lines
11 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 http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
<link rel="shortcut icon" href="../img/favicon.ico">
|
||
<title>JavaScript - Django Markdownx</title>
|
||
<link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
|
||
|
||
<link rel="stylesheet" href="../css/theme.css" type="text/css" />
|
||
<link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
|
||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
|
||
|
||
<script>
|
||
// Current page data
|
||
var mkdocs_page_name = "JavaScript";
|
||
var mkdocs_page_input_path = "javascript.md";
|
||
var mkdocs_page_url = "/django-markdownx/javascript/";
|
||
</script>
|
||
|
||
<script src="../js/jquery-2.1.1.min.js" defer></script>
|
||
<script src="../js/modernizr-2.8.3.min.js" defer></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/bash.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/django.min.js"></script>
|
||
<script>hljs.initHighlightingOnLoad();</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 stickynav">
|
||
<div class="wy-side-nav-search">
|
||
<a href=".." class="icon icon-home"> Django Markdownx</a>
|
||
<div role="search">
|
||
<form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
|
||
<input type="text" name="q" placeholder="Search docs" title="Type search term here" />
|
||
</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="" href="..">Django MarkdownX</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../installation/">Installation</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../getting_started/">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../example/">Example</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../customization/">Customization</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1 current">
|
||
|
||
<a class="current" href="./">JavaScript</a>
|
||
<ul class="subnav">
|
||
|
||
<li class="toctree-l2"><a href="#javascript">JavaScript</a></li>
|
||
|
||
<ul>
|
||
|
||
<li><a class="toctree-l3" href="#events">Events</a></li>
|
||
|
||
<li><a class="toctree-l3" href="#compatibility">Compatibility</a></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../translations/">Translations</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../contributions/">Contributions</a>
|
||
</li>
|
||
|
||
<li class="toctree-l1">
|
||
|
||
<a class="" href="../license/">License</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</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="..">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="..">Docs</a> »</li>
|
||
|
||
|
||
|
||
<li>JavaScript</li>
|
||
<li class="wy-breadcrumbs-aside">
|
||
|
||
<a href="https://github.com/neutronX/django-markdownx/edit/master/docs/javascript.md"
|
||
class="icon icon-github"> Edit on GitHub</a>
|
||
|
||
</li>
|
||
</ul>
|
||
<hr/>
|
||
</div>
|
||
<div role="main">
|
||
<div class="section">
|
||
|
||
<h1 id="javascript">JavaScript<a class="headerlink" href="#javascript" title="Permanent link">¶</a></h1>
|
||
<h2 id="events">Events<a class="headerlink" href="#events" title="Permanent link">¶</a></h2>
|
||
<p>Some MarkdownX processes trigger events that may be utilized for different purposes. To handle such events in JavaScript, you may take advantage of event listeners as exemplified below:</p>
|
||
<ul>
|
||
<li><a href="#markdownxinit"><code>markdownx.init</code></a></li>
|
||
<li><a href="#markdownxupdate"><code>markdownx.update</code></a></li>
|
||
<li><a href="#markdownxupdateerror"><code>markdownx.updateError</code></a></li>
|
||
<li><a href="#markdownxmarkdownxfileuploadbegin"><code>markdownx.markdownx.fileUploadBegin</code></a></li>
|
||
<li><a href="#markdownxfileuploadend"><code>markdownx.fileUploadEnd</code></a></li>
|
||
<li><a href="#markdownxfileuploaderror"><code>markdownx.fileUploadError</code></a></li>
|
||
</ul>
|
||
<h3 id="markdownxinit"><code>markdownx.init</code><a class="headerlink" href="#markdownxinit" title="Permanent link">¶</a></h3>
|
||
<p>Triggered after jQuery plugin init. <code>markdownx.init</code> is an event that does <em>not</em> return a response.</p>
|
||
<p>JavaScript ECMA 2015+:</p>
|
||
<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">'markdownx'</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="p">=></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">'markdownx.init'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"MarkdownX initialized."</span><span class="p">))</span>
|
||
|
||
<span class="p">);</span>
|
||
</pre></div>
|
||
|
||
<h3 id="markdownxupdate"><code>markdownx.update</code><a class="headerlink" href="#markdownxupdate" title="Permanent link">¶</a></h3>
|
||
<p>Triggered when editor text is markdownified. Returns: <strong>response</strong> (<em>string</em>) variable containing markdownified text.</p>
|
||
<p>JavaScript ECMA 2015+:</p>
|
||
<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">'markdownx'</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="p">=></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">'markdownx.update'</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=></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>
|
||
|
||
<h3 id="markdownxupdateerror"><code>markdownx.updateError</code><a class="headerlink" href="#markdownxupdateerror" title="Permanent link">¶</a></h3>
|
||
<p>Triggered when a problem occurred during markdownify.</p>
|
||
<h3 id="markdownxmarkdownxfileuploadbegin"><code>markdownx.markdownx.fileUploadBegin</code><a class="headerlink" href="#markdownxmarkdownxfileuploadbegin" title="Permanent link">¶</a></h3>
|
||
<p>Triggered when the file is posted.</p>
|
||
<h3 id="markdownxfileuploadend"><code>markdownx.fileUploadEnd</code><a class="headerlink" href="#markdownxfileuploadend" title="Permanent link">¶</a></h3>
|
||
<p>Triggered when the file has been uploaded.</p>
|
||
<h3 id="markdownxfileuploaderror"><code>markdownx.fileUploadError</code><a class="headerlink" href="#markdownxfileuploaderror" title="Permanent link">¶</a></h3>
|
||
<p>Triggered if the upload didn’t work.</p>
|
||
<h2 id="compatibility">Compatibility<a class="headerlink" href="#compatibility" title="Permanent link">¶</a></h2>
|
||
<p>We rely on JavaScript to handle front-end events (e.g. trans-compilation of Markdown to HTML, uploading image).</p>
|
||
<p>MarkdownX's JavaScript code is written in TypeScript using Pure JavaScript and under ECMA 2016 standard.</p>
|
||
<p>Currently, the code is trans-compiled into ECMA 5 (approved in 2011) to provide support for older browsers, specifically IE 10+. See additional detailed on <a href="https://kangax.github.io/compat-table/es5/">browser compatibilities</a>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
|
||
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
|
||
|
||
<a href="../translations/" class="btn btn-neutral float-right" title="Translations">Next <span class="icon icon-circle-arrow-right"></span></a>
|
||
|
||
|
||
<a href="../customization/" class="btn btn-neutral" title="Customization"><span class="icon icon-circle-arrow-left"></span> Previous</a>
|
||
|
||
</div>
|
||
|
||
|
||
<hr/>
|
||
|
||
<div role="contentinfo">
|
||
<!-- Copyright etc -->
|
||
|
||
</div>
|
||
|
||
Built with <a href="http://www.mkdocs.org">MkDocs</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>
|
||
|
||
<div class="rst-versions" role="note" style="cursor: pointer">
|
||
<span class="rst-current-version" data-toggle="rst-current-version">
|
||
|
||
<a href="https://github.com/neutronX/django-markdownx/" class="fa fa-github" style="float: left; color: #fcfcfc"> GitHub</a>
|
||
|
||
|
||
<span><a href="../customization/" style="color: #fcfcfc;">« Previous</a></span>
|
||
|
||
|
||
<span style="margin-left: 15px"><a href="../translations/" style="color: #fcfcfc">Next »</a></span>
|
||
|
||
</span>
|
||
</div>
|
||
<script>var base_url = '..';</script>
|
||
<script src="../js/theme.js" defer></script>
|
||
<script src="../search/main.js" defer></script>
|
||
|
||
</body>
|
||
</html>
|