2018-11-16 22:02:06 +00:00
<!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 >
2019-12-26 19:22:57 +00:00
< pre class = "highlight" > < code class = "language-javascript" > let element = document.getElementsByClassName('markdownx');
2018-11-16 22:02:06 +00:00
2019-12-26 19:22:57 +00:00
Object.keys(element).map(key =>
2018-11-16 22:02:06 +00:00
2019-12-26 19:22:57 +00:00
element[key].addEventListener('markdownx.init', () => console.log("MarkdownX initialized."))
2018-11-16 22:02:06 +00:00
2019-12-26 19:22:57 +00:00
);< / code > < / pre >
2018-11-16 22:02:06 +00:00
< 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 >
2019-12-26 19:22:57 +00:00
< pre class = "highlight" > < code class = "language-javascript" > let element = document.getElementsByClassName('markdownx');
2018-11-16 22:02:06 +00:00
2019-12-26 19:22:57 +00:00
Object.keys(element).map(key =>
2018-11-16 22:02:06 +00:00
2019-12-26 19:22:57 +00:00
element[key].addEventListener('markdownx.update', event => console.log(event.detail))
2018-11-16 22:02:06 +00:00
2019-12-26 19:22:57 +00:00
);< / code > < / pre >
2018-11-16 22:02:06 +00:00
< 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’ < / 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 >
