alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
83 lines (74 loc) • 4.07 kB
HTML
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Mathematical Formulas — CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link href="../../../samples/sample.css" rel="stylesheet">
<meta name="ckeditor-sample-name" content="Mathematics plugin">
<meta name="ckeditor-sample-group" content="Plugins">
<meta name="ckeditor-sample-description" content="Create mathematical equations in TeX and display them in visual form.">
<meta name="ckeditor-sample-isnew" content="1">
<script>
CKEDITOR.disableAutoInline = true;
</script>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/index.html">CKEditor Samples</a> » Mathematical Formulas
</h1>
<div class="description">
<p>
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.
</p>
<p>
TeX content will be automatically replaced by a widget when you put it in a <code><span class="math-tex"></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.
</p>
<p>
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:
</p>
<pre class="samples">
<span class="math-tex">\( \sqrt{1} + (1)^2 = 2 \)</span>
</pre>
<p>
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>.
</p>
<p>
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.
</p>
<pre class="samples">
CKEDITOR.replace( '<em>textarea_id</em>', {
<strong>extraPlugins: 'mathjax'</strong>
} );
</pre>
<p id="ie8-warning">
Please note that this plugin is not compatible with Internet Explorer 8.
</p>
</div>
<textarea id="editor1" cols="10" rows="10">
<p>The following equations are represented in the HTML source code as LaTeX expressions.</p><h1>The Cauchy-Schwarz Inequality</h1><p><span class="math-tex">\( \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) \)</span></p><h1>The probability of getting <span class="math-tex">\(k\)</span> heads when flipping <span class="math-tex">\(n\)</span> coins is</h1><p><span class="math-tex">\(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)</span></p><p>Finally, while displaying equations is useful for demonstration purposes, the ability to mix math and text in a paragraph is also important. This expression <span class="math-tex">\(\sqrt{3x-1}+(1+x)^2\)</span> 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.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
height: 350
} );
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )
document.getElementById( 'ie8-warning' ).className = 'warning';
</script>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright © 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>