specialchars.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Special chars plugin | Trumbowyg</title>
  6. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
  7. <link rel="stylesheet" href="../../css/main.css">
  8. </head>
  9. <body class="documentation-body">
  10. <div class="main main-demo-inner">
  11. <section class="wrapper section">
  12. <h2 class="section-title">Special chars plugin</h2>
  13. <div class="feature">
  14. <h3>Basic usage</h3>
  15. <p>
  16. This plugin allow you to add a picker for special character in Trumbowyg.
  17. </p>
  18. <a href="../../documentation/plugins/#plugin-specialchars" class="button button-demo">Read special chars plugin documentation</a>
  19. <div id="editor">
  20. <h2>Select a character !</h2>
  21. <p>
  22. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
  23. optio nam reiciendis eius beatae quibusdam!
  24. </p>
  25. </div>
  26. <h4>The code</h4>
  27. <pre><code class="js-code-to-eval javascript">
  28. $('#editor')
  29. .trumbowyg({
  30. btns: [
  31. ['specialChars']
  32. ]
  33. });
  34. </code></pre>
  35. </div>
  36. <div class="feature">
  37. <h3>Setup</h3>
  38. <h4>In head tag</h4>
  39. <pre><code class="html loading-head">
  40. </code></pre>
  41. <h4>At the end of body</h4>
  42. <pre><code class="html loading-body">
  43. &lt;!-- Import jQuery -->
  44. &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
  45. &lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.2.1.min.js">&lt;\/script>')&lt;/script>
  46. </code></pre>
  47. </div>
  48. </section>
  49. </div>
  50. <!-- Import jQuery -->
  51. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  52. <script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
  53. <!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE -->
  54. <script src="../js/loader.js"></script>
  55. <script>
  56. loadStyle('dist/ui/trumbowyg.css');
  57. loadStyle('dist/plugins/specialchars/ui/trumbowyg.specialchars.css');
  58. loadScript('dist/trumbowyg.js', 'Import Trumbowyg');
  59. loadScript('dist/plugins/specialchars/trumbowyg.specialchars.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
  60. </script>
  61. <script src="../js/runExampleCode.js"></script>
  62. <script src="../js/highlight.js"></script>
  63. </body>
  64. </html>