UNPKG

jodit

Version:

Jodit is awesome and usefully wysiwyg editor with filebrowser

126 lines (119 loc) 4.87 kB
<!doctype html> <!-- * Jodit Editor (https://xdsoft.net/jodit/) * License GNU General Public License version 2 or later; * Copyright 2013-2020 Valeriy Chupurnov https://xdsoft.net --> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>One Instance Jodit Example</title> <link rel="icon" type="image/png" href="assets/icon.png" /> </head> <body> <header> <nav> <ul class="container"> <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li> <li><a href="https://xdsoft.net/jodit/play.html">Playground</a></li> <li><a href="https://xdsoft.net/jodit/doc/">Documentation</a></li> <li><a href="https://github.com/xdan/jodit/">Github</a></li> <li><a href="https://github.com/xdan/jodit/blob/master/CHANGELOG.MD">Changelog</a></li> <li> <a href="javascript:void(0)">Examples</a> <ul id="examples"><!-- see app.js--></ul> </li> <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li> </ul> </nav> </header> <div id="main_container" class="container"> <div id="introduction"> <p>You can create Jodit only when you need.</p> <h3>HTML</h3> <pre><code class="language-markup"> &lt;div class="editor" id="editor1">Some text&lt;/div> &lt;div class="editor" id="editor2">Some text&lt;/div> &lt;div class="editor" id="editor3">Some text&lt;/div> &lt;div class="editor" id="editor4">Some text&lt;/div> &lt;div class="editor" id="editor5">Some text&lt;/div> &lt;div class="editor" id="editor6">Some text&lt;/div> </code></pre> <h3>JavaScript</h3> <pre><code class="language-javascript"> var editors = [].slice.call(document.querySelectorAll('.editor')); editors.forEach(function (div) { div.addEventListener('click', function (e) { if (!Jodit.instances[div.id]) { Object.keys(Jodit.instances).forEach(function (id) { Jodit.instances[id].destruct(); }); var editor = new Jodit(div, { preset: 'inline' }); editor.s.insertCursorAtPoint(e.clientX, e.clientY); } }); }); </code></pre> </div> <div class="result"> <div class="editor" id="editor1">Some text</div> <div class="editor" id="editor2">Some text</div> <div class="editor" id="editor3">Some text</div> <div class="editor" id="editor4">Some text</div> <div class="editor" id="editor5">Some text</div> <div class="editor" id="editor6">Some text</div> </div> </div> <footer> <nav> <ul class="container"> <li><a href="https://xdsoft.net/jodit/">Jodit homepage</a></li> <li><a href="https://xdsoft.net/jodit/play.html">Playground</a></li> <li><a href="https://xdsoft.net/jodit/doc/">Documentation</a></li> <li><a href="https://github.com/xdan/jodit/">Github</a></li> <li><a href="https://github.com/xdan/jodit/blob/master/CHANGELOG.MD">Changelog</a></li> <li style="float:right"><a href="https://github.com/xdan/jodit/releases/latest">Download</a></li> </ul> </nav> </footer> </body> <link rel="stylesheet" href="../build/jodit.min.css"/> <link rel="stylesheet" href="assets/app.css"/> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet"> <script src="../build/jodit.min.js"></script> <script src="assets/prism.js"></script> <script src="assets/app.js"></script> <style> .editor { margin-bottom: 10px; padding: 10px; border: 1px dashed red; } .editor p{ margin: 0 0 10px 0; } .jodit-container, .jodit-container .jodit-workplace { min-height: auto; } </style> <script> var editors = [].slice.call(document.querySelectorAll('.editor')); editors.forEach(function (div) { div.addEventListener('click', function (e) { if (!Jodit.instances[div.id]) { Object.keys(Jodit.instances).forEach(function (id) { Jodit.instances[id].destruct(); }); var editor = new Jodit(div, { preset: 'inline' }); editor.s.insertCursorAtPoint(e.clientX, e.clientY); } }); }); </script> </html>