Commit 1959764f authored by Jono Mingard's avatar Jono Mingard Committed by Gerrit Code Review

Merge "Add tinymce4-mathslate plugin to tinymce in Mahara (bug #1472446)"

parents 38ee8985 325cdfac
Version 1.1
This release adds to the original 1.0 version some technical improvements.
1. The editor now supports MathJax Output modes NativeMML and SVG
in addittion to HTML-CSS. It will use the current output jax to
display all mathematics.
2. The TeX tool now has a more robust XML parser so that it should be
able to convert any TeX expression supported by the MathJax
configuration to work within the editor.
3. JSON to MathML conversions has be improved to provide more complete
MathML configuration of editor.
4. The default configuration has been updated slightly to utilize
some of the improvements.
5. Some improvements have been made in the API to make it more easily
used in other plugins.
This diff is collapsed.
tinymce4-mathslate tinymce plugin
=================================
Website: https://github.com/dthies/tinymce4-mathslate
Version: 1.1
Changes:
* None
Mathslate Plugin for TinyMCE4
=================
Tinymcefour plugin for constructing mathematical expressions
Install this directory in tinymce/js/tinymce/plugins/mathslate. All
files are licensed under GPL 3 which is include. Mathslate files are
copyright 2014 Daniel Thies <dthies@ccal.edu>
This diff is collapsed.
<h3>Selecting mathematics</h3>
<p>Mathslate does not the allow the selection of individual characters as with a word processor, but instead treats mathematics as blocks of code associated with well defined mathematical expressions. A selected expression appears highlighted in the work space, and the block of code appears with a cursor in front of it below the work space.
<h3>Moving mathematics</h3>
<p>To move an expression simply select an element after the place it should be inserted on work space and then click the expression to move there. Alternatively, you may simply drag the expression to where it should be inserted.
<h3>Editing functions</h3>
<p>There is a row of buttons in the center of the editor that allows the user to delete a selection or the whole content, undo the previous action, and redo previously undone actions.
<p><a href="http://docs.moodle.org/26/en/TinyMCE_Mathslate" target="_blank">more information</a>
<!DOCTYPE html>
<head>
<!--
* MathSlate editor popup.
*
* @package tinymcefour_mathslate
* @copyright 2013 Daniel Thies
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-->
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http:./styles.css">
<script>
// Create a YUI sandbox on your page.
YUI().use('node', 'event', function (Y) {
// The Node and Event modules are loaded and ready to use.
// Your code goes here!
});
</script>
<script>
if (typeof M === "undefined") M={};
M.util=M.util||{};
M.util.image_url=M.util.image_url||function(image,module){
return 'http:'+(module=='tinymce_mathslate'?'./pix/':'../../pix/')+image+'.svg';
}
M.util.get_string = function(image,module){
return 'http:'+(module=='tinymce_mathslate'?'./pix/':'../../pix/')+image+'.svg';
}
M.tinymce_mathslate=M.tinymce_mathslate||{};
M.tinymce_mathslate.config="http:./config.json";
M.tinymce_mathslate.help="http:./help.html";
</script>
<script src="./strings.js"></script>
<script src="./yui/build/moodle-tinymce_mathslate-snippeteditor/moodle-tinymce_mathslate-snippeteditor-debug.js"> </script>
<script src="./yui/build/moodle-tinymce_mathslate-mathjaxeditor/moodle-tinymce_mathslate-mathjaxeditor-debug.js"> </script>
<script src="./yui/build/moodle-tinymce_mathslate-editor/moodle-tinymce_mathslate-editor-debug.js"> </script>
<script src="./yui/build/moodle-tinymce_mathslate-textool/moodle-tinymce_mathslate-textool-debug.js"> </script>
<script>
YUI().use('moodle-tinymce_mathslate-editor','moodle-tinymce_mathslate-textool', function (Y) {
MathJax.Hub.Queue(['Typeset',MathJax.Hub]);
var editor = new M.tinymce_mathslate.Editor('#editor',"http:./config.json");
Y.one('#editor').addClass('mathslate-tinymce');
var mathEditor = top.tinymce.activeEditor.windowManager.getParams();
mathEditor.output = function(format) { return editor.output(format); }
});
</script>
</head>
<body class="yui3-skin-sam">
<div id='editor' style="width: 500px"></div>
</body>
/**
* plugin.js
*
* Copyright 2013, Daniel Thies
* Released under LGPL License.
*
*/
tinymce.PluginManager.add('mathslate', function(editor,url) {
if ((typeof M === 'object') && M.mathslateURL) {
url = M.mathslateURL;
}
function showDialog() {
var cssId, linkElm, dom=editor.dom,math;
var win, mathEditor={output: null};
win = editor.windowManager.open({
title: "Math Editor",
spacing: 10,
padding: 10,
width: 525,
height: 500,
url: url + '/mathslate.html',
buttons: [
{text: "Insert Inline", onclick: function() {
editor.execCommand('mceInsertContent',
false, '\\('+
mathEditor.output('tex')
+'\\)');
win.close();
}
},
{text: "Insert Display", onclick: function() {
editor.execCommand('mceInsertContent',
false, '\\['+
mathEditor.output('tex')
+'\\]');
win.close();
}
},
{text: "Cancel", onclick: function() {
win.close();
}
}
]
},
mathEditor
);
}
editor.addButton('mathslate', {
image : url + '/img/mathslate.png',
tooltip: 'Insert Math',
onclick: showDialog
});
editor.addMenuItem('mathslate', {
image : url + '/img/mathslate.png',
text: 'Insert Math',
onclick: showDialog,
context: 'insert'
});
});
tinymce.PluginManager.add("mathslate",function(t,e){function n(){var n,a=(t.dom,{output:null});n=t.windowManager.open({title:"Math Editor",spacing:10,padding:10,width:525,height:500,url:e+"/mathslate.html",buttons:[{text:"Insert Inline",onclick:function(){t.execCommand("mceInsertContent",!1,"\\("+a.output("tex")+"\\)"),n.close()}},{text:"Insert Display",onclick:function(){t.execCommand("mceInsertContent",!1,"\\["+a.output("tex")+"\\]"),n.close()}},{text:"Cancel",onclick:function(){n.close()}}]},a)}"object"==typeof M&&M.mathslateURL&&(e=M.mathslateURL),t.addButton("mathslate",{image:e+"/img/mathslate.png",tooltip:"Insert Math",onclick:n}),t.addMenuItem("mathslate",{image:e+"/img/mathslate.png",text:"Insert Math",onclick:n,context:"insert"})});
\ No newline at end of file
M.util.get_string = function (term, pkg) {
var string = [];
string['pluginname'] = 'TinyMCE Mathslate';
string['title'] = 'MathSlate Editor';
string['inline'] = 'Inline Math';
string['inline_desc'] = 'Insert math within a sentence or paragraph';
string['display'] = 'Display Math';
string['display_desc'] = 'Insert math on a separate line';
string['cancel'] = 'Cancel';
string['cancel_desc'] = 'Quit and do not save work';
string['undo'] = 'Undo previous action';
string['redo'] = 'Redo the action just undone';
string['clear'] = 'Delete selection or the entire expression';
string['help'] = 'Access documentation';
string['mathslate'] = 'MathSlate';
string['requiretex'] = 'Require TeX filter';
string['requiretex_desc'] = 'If enabled the Mathslate button is visible only when the TeX filter is enabled in the editor context. Disable if you want it to appear globally (normal if MathJax is included in header sitewide).';
string['mathjaxurl'] = 'MathJax url';
string['mathjaxurl_desc'] = 'The url for the MathJax.js file that mathslate should load if MathJax is not already present and configured (probably true if you are using the Moodle TeX filter). The default downloads from the internet using http. If your site uses https use "https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js" or better install a local copy.';
string['nomathjax'] = '<p>MathJax does not seem to be present on this site. In order to use this plugin MathJax needs to be configured. MathJax is an opensource software library that is capable of displaying mathmatics in any javascript enabled browser. Mathslate uses it to render mathematics within the editor. Therefore you should check with the system administrator of this site to see whether MathJax may be installed. See <a href="http://mathjax.org" target="_blank">mathjax.org</a> for more instructions.</p>';
string['mathslate:desc'] = 'Insert equation';
return string[term];
}
.mathslate-tinymce .mathslate-highlight {
color: yellow
}
.mathslate-tinymce .mathslate-workspace .mathslate-selected {
color: green
}
.mathslate-tinymce .mathslate-workspace-dragged {
color: #888;
}
.mathslate-tinymce .mathslate-toolbox-drag, .mathslate-workspace-drag {
color: #FFF;
}
.mathslate-tinymce .mathslate-preview {
height: 130px;
border: solid 1px #888;
overflow: scroll;
text-align: left;
background: #111;
color: #FFF;
}
.mathslate-tinymce .mathslate-preview div {
padding-left: 10px;
}
.mathslate-tinymce .mathslate-preview .mathslate-selected div {
}
.mathslate-tinymce .mathslate-preview .mathslate-selected {
border-left: solid 5px #green;
background-color: #121;
}
.mathslate-tinymce iframe {
background: #FFF;
height: 130px;
padding: 0;
border: 0px;
}
.mathslate-tinymce .mathslate-preview .mathslate-selected {
background-color: #333;
border-left: solid 5px green;
animation-duration: 750ms;
animation-name: flash;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes flash {
from {
border-left: solid 5px #1F1;
}
35% {
border-left: solid 5px #1E1;
}
65% {
border-left: solid 5px #131;
}
to {
border-left: solid 5px #121;
}
}
.mathslate-tinymce .mathslate-workspace {
margin: 0px;
background-color: #333;
color: #EEE;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
border: solid #666 6px;
border-top: solid #999 4px;
border-right: solid #888 6px;
border-bottom: solid #555 4px;
}
.mathslate-tinymce .mathslate-toolbox {
color: #888
}
.mathslate-tinymce .yui3-tabview-panel p {
padding-bottom: 0px,
padding-bottom: 1px
}
.mathslate-tinymce .mathslate-toolbox .yui3-tabview-panel {
background: #EEE;
background: radial-gradient(#EEE,#BBB)
}
.mathslate-tinymce .mathslate-toolbox .yui3-tab-label {
height: 2em;
width: 3.25em
}
.mathslate-tinymce .mathslate-toolbox .yui3-tab-selected .yui3-tab-focused {
background-image: none ;
background: linear-gradient(to top,#444,#888)
}
.mathslate-tinymce .mathslate-toolbox .yui3-tab-selected .yui3-tab-label {
background: #444;
background-image: none;
background: linear-gradient(to bottom,#AAA,#444)
}
.mathslate-tinymce .mathslate-toolbox .yui3-tabview-list {
border-color: #444
}
.mathslate-tinymce .yui3-tabview-panel {
height: 100px
}
.mathslate-tinymce .mathslate-delete-button {
}
.mathslate-tinymce .mathslate-undo-button {
}
.mathslate-tinymce .mathslate-redo-button {
}
.mathslate-tinymce form button {
width: 32px;
height: 32px;
text-align: center;
padding: 0px;
}
.mathslate-tinymce .mathslate-help-box {
}
YUI.add('moodle-tinymce_mathslate-dialogue', function (Y, NAME) {
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Tinymce text editor mathslate plugin.
*
* @package editor-tinymce
* @subpackage mathslate
* @copyright 2013 Daniel Thies <dthies@ccal.edu>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.tinymce_mathslate = M.tinymce_mathslate || {};
var CSS = {
EDITOR: 'mathslate-tinymce'
};
var NS = M.tinymce_mathslate;
/**
* The window used to hold the editor.
*
* @property dialogue
* @type M.core.dialogue
* @default null
*/
NS.dialogue = null;
/**
* The selection object returned by the browser.
*
* @property selection
* @type Range
* @default null
*/
NS.selection = null;
/**
* The configuration json string for math tools.
*
* @property config
* @type Range
* @default null
*/
NS.config = null;
/**
* Add this button to the form.
*
* @method init
* @param {Object} params
*/
NS.init = function(params) {
M.tinymce_mathslate = M.tinymce_mathslate || {};
M.tinymce_mathslate.config = params.config || M.tinymce_mathslate.config;
M.tinymce_mathslate.help = params.help || M.tinymce_mathslate.help;
var dialogue = Y.one('#' + params.elementid);
var editorID = dialogue.one('.mathslate-container').generateID();
Y.one('#' + editorID).addClass(CSS.EDITOR);
var me = new M.tinymce_mathslate.Editor('#' + editorID, M.tinymce_mathslate.config);
var cancel = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="'
+ M.util.get_string('cancel_desc', 'tinymce_mathslate') + '">'
+ M.util.get_string('cancel', 'tinymce_mathslate') + '</button>'));
cancel.on('click', function() {
window.tinyMCEPopup.close();
});
if (typeof MathJax === 'undefined') {
return;
}
var displayTex = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="'
+ M.util.get_string('display_desc', 'tinymce_mathslate') + '">'
+ M.util.get_string('display', 'tinymce_mathslate') + '</button>'));
var inlineTex = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="'
+ M.util.get_string('inline_desc', 'tinymce_mathslate') + '">'
+ M.util.get_string('inline', 'tinymce_mathslate') + '</button>'));
/* This code shows a button to saves work as JSON that can be incorporated in config.json.
var saveJSON = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="' + 'JSON' + '">'
+ 'JSON' + '</button>'));
saveJSON.on('click', function() {
window.tinyMCEPopup.editor.execCommand('mceInsertContent', false, me.output('JSON'));
window.tinyMCEPopup.close();
});
*/
displayTex.on('click', function() {
window.tinyMCEPopup.editor.execCommand('mceInsertContent', false, '\\[' + me.output('tex') + '\\]');
window.tinyMCEPopup.close();
});
inlineTex.on('click', function() {
window.tinyMCEPopup.editor.execCommand('mceInsertContent', false, '\\(' + me.output('tex') + '\\)');
window.tinyMCEPopup.close();
});
window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, me.node.generateID()]);
M.tinymce_mathslate.dialogue = dialogue;
};
}, '@VERSION@', {"requires": ["escape", "moodle-local_mathslate-editor", "moodle-tinymce_mathslate-editor"]});
YUI.add("moodle-tinymce_mathslate-dialogue",function(e,t){M.tinymce_mathslate=M.tinymce_mathslate||{};var n={EDITOR:"mathslate-tinymce"},r=M.tinymce_mathslate;r.dialogue=null,r.selection=null,r.config=null,r.init=function(t){M.tinymce_mathslate=M.tinymce_mathslate||{},M.tinymce_mathslate.config=t.config||M.tinymce_mathslate.config,M.tinymce_mathslate.help=t.help||M.tinymce_mathslate.help;var r=e.one("#"+t.elementid),i=r.one(".mathslate-container").generateID();e.one("#"+i).addClass(n.EDITOR);var s=new M.tinymce_mathslate.Editor("#"+i,M.tinymce_mathslate.config),o=e.one("#"+i).appendChild(e.Node.create('<button title="'+M.util.get_string("cancel_desc","tinymce_mathslate")+'">'+M.util.get_string("cancel","tinymce_mathslate")+"</button>"));o.on("click",function(){window.tinyMCEPopup.close()});if(typeof MathJax=="undefined")return;var u=e.one("#"+i).appendChild(e.Node.create('<button title="'+M.util.get_string("display_desc","tinymce_mathslate")+'">'+M.util.get_string("display","tinymce_mathslate")+"</button>")),a=e.one("#"+i).appendChild(e.Node.create('<button title="'+M.util.get_string("inline_desc","tinymce_mathslate")+'">'+M.util.get_string("inline","tinymce_mathslate")+"</button>"));u.on("click",function(){window.tinyMCEPopup.editor.execCommand("mceInsertContent",!1,"\\["+s.output("tex")+"\\]"),window.tinyMCEPopup.close()}),a.on("click",function(){window.tinyMCEPopup.editor.execCommand("mceInsertContent",!1,"\\("+s.output("tex")+"\\)"),window.tinyMCEPopup.close()}),window.MathJax.Hub.Queue(["Typeset",window.MathJax.Hub,s.node.generateID()]),M.tinymce_mathslate.dialogue=r}},"@VERSION@",{requires:["escape","moodle-local_mathslate-editor","moodle-tinymce_mathslate-editor"]});
YUI.add('moodle-tinymce_mathslate-dialogue', function (Y, NAME) {
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Tinymce text editor mathslate plugin.
*
* @package editor-tinymce
* @subpackage mathslate
* @copyright 2013 Daniel Thies <dthies@ccal.edu>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.tinymce_mathslate = M.tinymce_mathslate || {};
var CSS = {
EDITOR: 'mathslate-tinymce'
};
var NS = M.tinymce_mathslate;
/**
* The window used to hold the editor.
*
* @property dialogue
* @type M.core.dialogue
* @default null
*/
NS.dialogue = null;
/**
* The selection object returned by the browser.
*
* @property selection
* @type Range
* @default null
*/
NS.selection = null;
/**
* The configuration json string for math tools.
*
* @property config
* @type Range
* @default null
*/
NS.config = null;
/**
* Add this button to the form.
*
* @method init
* @param {Object} params
*/
NS.init = function(params) {
M.tinymce_mathslate = M.tinymce_mathslate || {};
M.tinymce_mathslate.config = params.config || M.tinymce_mathslate.config;
M.tinymce_mathslate.help = params.help || M.tinymce_mathslate.help;
var dialogue = Y.one('#' + params.elementid);
var editorID = dialogue.one('.mathslate-container').generateID();
Y.one('#' + editorID).addClass(CSS.EDITOR);
var me = new M.tinymce_mathslate.Editor('#' + editorID, M.tinymce_mathslate.config);
var cancel = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="'
+ M.util.get_string('cancel_desc', 'tinymce_mathslate') + '">'
+ M.util.get_string('cancel', 'tinymce_mathslate') + '</button>'));
cancel.on('click', function() {
window.tinyMCEPopup.close();
});
if (typeof MathJax === 'undefined') {
return;
}
var displayTex = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="'
+ M.util.get_string('display_desc', 'tinymce_mathslate') + '">'
+ M.util.get_string('display', 'tinymce_mathslate') + '</button>'));
var inlineTex = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="'
+ M.util.get_string('inline_desc', 'tinymce_mathslate') + '">'
+ M.util.get_string('inline', 'tinymce_mathslate') + '</button>'));
/* This code shows a button to saves work as JSON that can be incorporated in config.json.
var saveJSON = Y.one('#' + editorID).appendChild(Y.Node.create('<button title="' + 'JSON' + '">'
+ 'JSON' + '</button>'));
saveJSON.on('click', function() {
window.tinyMCEPopup.editor.execCommand('mceInsertContent', false, me.output('JSON'));