mathjax.html 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.md or http://ckeditor.com/license
  5. -->
  6. <html>
  7. <head>
  8. <meta charset="utf-8">
  9. <title>Mathematical Formulas &mdash; CKEditor Sample</title>
  10. <script src="../../../ckeditor.js"></script>
  11. <link href="../../../samples/sample.css" rel="stylesheet">
  12. <meta name="ckeditor-sample-name" content="Mathematics plugin">
  13. <meta name="ckeditor-sample-group" content="Plugins">
  14. <meta name="ckeditor-sample-description" content="Create mathematical equations in TeX and display them in visual form.">
  15. <meta name="ckeditor-sample-isnew" content="1">
  16. <script>
  17. CKEDITOR.disableAutoInline = true;
  18. </script>
  19. </head>
  20. <body>
  21. <h1 class="samples">
  22. <a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Mathematical Formulas
  23. </h1>
  24. <div class="description">
  25. <p>
  26. This sample shows the usage of the CKEditor mathematical plugin that introduces a MathJax widget. You can now use it to create or modify equations using TeX.
  27. </p>
  28. <p>
  29. TeX content will be automatically replaced by a widget when you put it in a <code>&lt;span class="math-tex"&gt;</code> element. You can also add new equations by using the <strong>Math</strong> toolbar button and entering TeX content in the plugin dialog window. After you click <strong>OK</strong>, a widget will be inserted into the editor content.
  30. </p>
  31. <p>
  32. The output of the editor will be plain TeX with <a href="http://www.mathjax.org/">MathJax</a> delimiters: <code>\(</code> and <code>\)</code>, as in the code below:
  33. </p>
  34. <pre class="samples">
  35. &lt;span class="math-tex"&gt;\( \sqrt{1} + (1)^2 = 2 \)&lt;/span&gt;
  36. </pre>
  37. <p>
  38. To transform TeX into a visual equation, a page must include the <a href="http://docs.mathjax.org/en/latest/start.html">MathJax script</a>.
  39. </p>
  40. <p>
  41. In order to use the new plugin, include it in the <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraPlugins">config.extraPlugins</a></code> configuration setting.
  42. </p>
  43. <pre class="samples">
  44. CKEDITOR.replace( '<em>textarea_id</em>', {
  45. <strong>extraPlugins: 'mathjax'</strong>
  46. } );
  47. </pre>
  48. <p id="ie8-warning">
  49. Please note that this plugin is not compatible with Internet Explorer 8.
  50. </p>
  51. </div>
  52. <textarea id="editor1" cols="10" rows="10">
  53. &lt;p&gt;The following equations are represented in the HTML source code as LaTeX expressions.&lt;/p&gt;&lt;h1&gt;The Cauchy-Schwarz Inequality&lt;/h1&gt;&lt;p&gt;&lt;span class=&quot;math-tex&quot;&gt;\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)&lt;/span&gt;&lt;/p&gt;&lt;h1&gt;The probability of getting &lt;span class=&quot;math-tex&quot;&gt;\(k\)&lt;/span&gt; heads when flipping &lt;span class=&quot;math-tex&quot;&gt;\(n\)&lt;/span&gt; coins is&lt;/h1&gt;&lt;p&gt;&lt;span class=&quot;math-tex&quot;&gt;\(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;Finally, while displaying equations is useful for demonstration purposes, the ability to mix math and text in a paragraph is also important. This expression &lt;span class=&quot;math-tex&quot;&gt;\(\sqrt{3x-1}+(1+x)^2\)&lt;/span&gt; is an example of an inline equation. As you see, MathJax equations can be used this way as well, without disturbing the spacing between the lines.&lt;/p&gt;
  54. </textarea>
  55. <script>
  56. CKEDITOR.replace( 'editor1', {
  57. extraPlugins: 'mathjax',
  58. height: 350
  59. } );
  60. if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )
  61. document.getElementById( 'ie8-warning' ).className = 'warning';
  62. </script>
  63. <div id="footer">
  64. <hr>
  65. <p>
  66. CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  67. </p>
  68. <p id="copy">
  69. Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  70. Knabben. All rights reserved.
  71. </p>
  72. </div>
  73. </body>
  74. </html>