It seems you guys have worked out a way in integrating equation editors into them. I am definitely exploring the alternative of DragMath into editors such as TinyMCE or FCKeditor and I believe one of the developers here have done an extensive cover on them.
Just wondering, where would be a good place to start in regards to the integration of DragMath into each of these web editors? I believe there is only available source of integrating dragmath into moodle's default editor? Cause i would definitely need some help in integrating them for my own purpose
Are you planning to use Dragmath in some other CMS program (Drupal, Joomla, Mediawiki etc)?
Integrating Dragmath isn't very difficult, we have plugins for HTMLArea, TinyMCE and FCKEDitor - you just need to know some paths for files and what to do for getMathExpression() that Dragmath gives you - and how to modify the plugins for your own purpose. If your application is using Latex you can set it to default output format in your integration file and so on.
It is easier to help if you give some more info about the application and output format - or you could start from http://www.dragmath.bham.ac.uk/doc/index.html
But I do need help in integration of HTML editors with some equation editors on web. Looking at the forums here, seems like the main ones used is DragMath and ASCIIMath. So I want to try out integrating these 2 and see if it is desirable. The output is definitely putting the question into the database.
I am expected to use MathML format. Seeing that you all have studied alot in such integration, I would like to seek some help in it to reduce some of my development time.
From what I understand the only integration you have put up so far is with HTML Area and not other editors right, though you all claim to have make the code ready for other HTML web editors
I promised (to Ramon) to mention another option in cases like this - Wiris - if you really want to reduce your development time...
Anyway - if you need a prototype for TinyMCE check Moodle 2.0 dev package from http://download.moodle.org/ , it has tinymce and dragmath plugin made by Glen Davis. All you need to note is that Dragmath is in folder lib/editor/common and the main embed code is in lib/editor/tinymce/jscripts/tiny_mce/plugins/dragmath/editor_plugin.js and dragmath.php & in sub folder js/dragmath.js
It has some issues with focus in IE but you will see how it works when your custom integration is ready.
The FCKEditor plugin is my own version - it's mentioned (with attachment) in one post in moodle.org but officially moodle does not have FCKEditor integration so it's not included to any database here in moodle.org - but if you really need to get a fckeditor dragmath I can definitely help with it too.
We have also different versions of asciimathml.js - with or without image fallback, with different kinds of asciisvg versions, with or without calculator... but I suppose you will start from http://www1.chapman.edu/~jipsen/mathml/asciimath.html
If you need examples how to integrate tinymce to your php pages try first http://tinymce.moxiecode.com/examples/full.php and select tab "View Source" near "View Example"...
I will be looking into individual HTML editors first before attempting to integrate them with equation editor.
This is actually my final year project component, so during May to July, I will definitely be coming here and pose many questions to you all
as Mauno says WIRIS is a possible solution for you.
It is based in MathML and we have integrations made with several HTML editor
We also have a generic PHP integration if you are not using any of the previous
1 issue of these editors is I would want the MathML to be generated instead of images. It seems that Wiris uses image for math equations.
I shall see how it goes, if I need any assistance I will seek help from you all again
You can get more details in www.wiris.com/documents/raweditor.html
the Plugin is a free component that connects your Moodle with commercial services. Check prices at www.wiris.net
You can find documentation for TinyMCE integration at
www.wiris.com/documents/plugin-tinyMCE.html
I notice Moodle's implementation uses TEX instead of MathML. Anyone has successfully display MathML equations on TinyMCE editor?
2nd potential I see is probably the editing of these equations on the editor itself. Anyone has a successful implementation of MathML on TinyMCE besides WIRIS
I don't really like WIRIS because it requires connection to external servers
Not exactly MathML but you can select the output format to be AsciiMathML in Dragmath and AsciiMathML is translated to MathML in browsers that support MathML - and in image fallback versions of AsciiMathML the code is translated to images using TeX renderer if MathML is not supported.
The thing that might with default settings prevent direct use of MathML in TinyMCE is default rule set of tinymce - see
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements
It has no MathML tags but you can add them to custom rule set...
To resolve what issue ... we aren't talking about moodle here - are we???
Check for example http://moodle.org/mod/forum/discuss.php?d=121738 - at least I have seen imathas demo editor.
That editordemo is using AsciiMathML & LatexMathML and the translated output is exactly valid MathML for Firefox that has native support for MathML. Image fallback is needed for all browsers that do not support MathML or do not have MathPlayer installed - quite many people do not use Firefox...
You could try to add to init code of your TinyMCE system valid XHTML elements with full rule set
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements#Full_XHTML_rule_set:
and add there all needed mathml tags with tags like
+"math[*]," +"mi," +"mo," + ... where * means that those tags can have any attributes inside
or you could allow any tags with
valid_elements : "*[*],",
in init code but it's not so simple. You need to take care of entity encoding and other init code of tinymce too.
Editors should be able to output almost any code you allow them to use - if nothing is cutting or filtering code - or you could use as well plain textareas and no filtering in your php system. It really should not matter if you try HTMLArea, TinyMCE, (F)CKEditor, Xinha, YUIRTE or some other editor.
From http://www1.chapman.edu/~jipsen/mathml/asciimath.html you should find also such versions of AsciiMathML that do not have image fallback - but seriously IE will never support MathML and even Firefox has some difficulties with fonts: http://en.wikipedia.org/wiki/MathML#Web_browsers
You could also use google to check if there are some free (or commercial) online MathML editor plugins or MathML editors available.
Hence the main reason why I posted here is I could not find any solutions over the Internet on displaying MathML on TinyMCE directly even as simple as on FireFox. So I was wondering if you all have found a solution to use for the Moodle's TinyMCE editor for displaying MathML on its wysiwyg interface.
As for IE, I guess I will look into that issue later if I could resolve the issue for firefox
I have tried using scripts such as MathMLinHTMLforFirefoxAndIE.js for display on the browser web page (which was successful), but it seems to fail on TinyMCE.
You may be right - the editor textarea itself may show either asciimathml code like
`sqrt n` or show sqrt of n using a couple of functions to parse strings to MathML or TeX and back - but different versions of these scripts may have different settings and may use different functions in different cases. What you get out from editor is not necessarely the same as what you see in textarea inside editor.
Try to add
<script src="http://mathcs.chapman.edu/~jipsen/math/pub/ASCIIMathML/ASCIIMathML.js" type="text/javascript"></script>
to your test page and
write a quick test with asciimathml:
`sqrt n`
and use mouse right click - View MathML source over the square root of n
I get
<math title="sqrtn">
<mstyle mathsize="1em" mathcolor="blue" fontfamily="serif" displaystyle="true">
<msqrt>
<mi>n</mi>
</msqrt>
</mstyle>
</math>
or visit Sandbox in http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathMLSandbox.html and check with Firefox if you see any MathML.
Kian,
I just remembered that Xinha has also that "old" Equation plugin created by Peter Jibsen that has a Show MathML button - not yet exactly what you are looking for but closer - http://www.xinha.org/xinha-nightly/examples/ExtendedDemo.html
One thing you could also try is to search from net some simple script that uses preview window to show a syncronous copy of textarea that you are writing at so that you have the code mode in textarea and preview mode in preview window (iframe) showing the content of textarea (mathml) as "Wysiwyg"...
So am I right to say this is the main reason for the lack of support of direct MathML WYSIWYG authoring, cause all I see so far are images rendered MathML or at the best ASCIIMath?
MathPlayer can't render all MathML correctly and Adobe does not support it anymore.
If you are interested in other options check Firemath plugin for FF - it's free and you can produce valid MathML Wysiwyg with Firefox + save the output as mathML code or images (png)
You have any idea who is currently working on it? Or there is no solution to it?
I do have a solution - the same prototype plugin I have used for asciimathml, latexmathml and latex can be used also for Dragmath so that the applet is inside the plugin and code from Dragmath is not pasted to editor directly - it's pasted to textarea in plugin and can be edited, pasted to editor or you can even drag and drop the equation back to dragmath.
But this is one of those issues that go on slowly and I don't want to make them public unfinished. I want to test my plugins with all major browsers and clean up all unnecessary code. One of the things that need some better solution is the delimiters and spans we use or don't use - is it better to use just images in editor and use IMG tag that can be selected and edited even in modified image plugin or my custom plugins but these images should be translated back to code again when saved to database - and the whole thing is of course skrewed by IE6 that allows you to use several modes for asciimathml alone but as soon as I tried to use asciimathml and latexmathml delimiters and mode changes at the same time IE6 could not handle the code.
Anyway - the simple versions will be public with documentation before June - I have still a couple of weeks time to keep my promise for Marc - and I can add new features later.
While I understand how you could keep the equation in the clipboard, which would allow you to continue editing what is in dragmath, that is not the same as importing a text expression into dragmath.... are you saying you can manage the latter??
I am saying that if I have dragmath applet in my custom plugin where I have an extra textarea for input and one iframe for preview window I can
1) insert equations from Dragmath to this textarea using the same method as old dragmath is inserting dragmath equations to editor itself
2) use another function and button to insert the equations from the extra textarea to editor
3) select, drag and drop equations from extra textarea back to dragmath applet
and it can be done as many times as you want.
FF and IE have no problems with 3), Opera does not support this feature and Safari seems to work too - I haven't tested Chrome
I can send you the experimental Dragmath plugin next week - I suppose it is also possible to add some tabs to the right side of dragmath (to plugin, not to dragmath applet) with some examples that can be dragged and dropped to applet which would make typing of typical equations faster in Dragmath.
The preview window is used for Wysiwyg preview of the actual equation with fallback like in asciimathml, latexmathml and latex plugins. This dragmath plugin has of course some tiny problems like space - because dragmath itself takes quite large space and those additional fields and buttoms make plugin larger it's not suitable for mobile screens and second loading the applet is slow in IE, Opera want's to show the alert (approve..?) and it requires java...
And Dragmath does not recognize delimiters and does not know if it's getting back Asciimathml or Latex so this is not perfect if we want to avoid mixing of code. But the plugin itself can be used to clean or replace some code to avoid asciimathmllatexmixtures
I wonder if DragMath has this function or you created it yourself? The equations in text area issit in AsciiMath or MathML form? Anyway thanks for your assistance in regards to DragMath and its integration with editors.
Anway is there any good HTML MathML or AsciiMath pure Javascript editors? So far the ones I saw are mainly in java applet or even flash. ASCII math i understand has its own editor, but I find it very not intuitive unlike Dragmath.
http://wiki.moxiecode.com/index.php/TinyMCE:Commands
I have used mceInsertContent with tags like
var dragmathsDialog = {
init : function(ed) {
},
insert : function(file, title) {
var ed = tinyMCEPopup.editor;
tinyMCEPopup.restoreSelection();
if (MMeqtags=='MMascml') {
var str = '<span class=AM>`' + getdragmathStr() + '`</span> ';
var equa = str.replace(/\\/g, " ");
equa = equa.replace(/ /g, " ");
}
if (MMeqtags=='MMnone') {
var equa = getdragmathStr();
}
ed.execCommand("mceInsertContent", false, equa);
tinyMCEPopup.close();
}
};
where getdragmathStr is a different function that is used for cleaning the equation string in textarea "latex_formula" and equation is pasted from dragmath to this teaxtarea with
<button type="button" onclick="return insText(document.dragmath.getMathExpression());">Insert</button>
where insText is yet another function used for adding any content from plugin to the same textarea.
So ed.execCommand("mceInsertContent", false, equa);
does the job - it inserts "equa" to editor.
No, I don't use any functions for that - it just works... if browser or java does not prevent it.
Opera is somehow a special case... don't know the reason though.
Kian, I can send you my prototype plugin next Monday or Tuesday - it's not a problem to insert MathML from Dragmath to plugin or insert MathML from plugin to editor but the main problem is how you can use MathML directly in Wysiwyg mode and add it from TinyMCE to your php documents so that TinyMCE does not change entities or your MathML code. There are some commercial MathML capable editors available that can do this but I don't know any free open source plugins that would use MathML directly. You will probably need some functions to replace some tags or code when you add content from TinyMCE (or other editors) to your php files and you need to find the correct init code for your TinyMCE and custom plugins.
You have already seen Wiris - check for example http://www.w3.org/Math/Software/mathml_software_cat_plugins.html
and
http://www.w3.org/Math/Software/mathml_software_cat_editors.html
Anyway i have looked at several equation editors to couple with HTML editors and I conclude that DragMath is the best open source equation editor.
Most editors I encountered only generates in a specific math format or the interface is not easy to use at all (eg: equation editor in Xinha)
The only 2 big problems Dragmath have are putting MathML, ASCIImath, Latex values into the applet and it requires Java Applet
I tested with other languages such as ASCIIMathML and it seems that it is not recognising the equations, thus this parser only works with maxima.
I believe if someone manage to create a parser that translates ASCIIMathML or MathL into Maxima or directly into a form DragMath can understand. I believe it will really help improve the overall editor.
If you check the source of that demo it gives you the answer:
to use <param name=openWithExpression value="' + exp + '">
getMathExpression is used for getting expression out from the applet.
Thank you for this note, Kian! It helps me too.
<html>
<head>
<script Xlanguage="Javascript">
var exp = opener.document.forms['exampleform'].elements[opener.thenumber].value
document.write('<applet name="DragMath" codebase="applet/classes" code="Display.MainApplet.class" archive="Project.jar,AbsoluteLayout.jar,swing-layout-1.0.jar,jdom.jar,jep.jar" width=540 height=333>',
'<param name= hideMenu value= "true" >',
'<param name= customToolbar value= "0 3 4 | 5 6 7" >',
'<param name=language value="en">',
'<param name=outputFormat value="Maxima">',
'<param name=openWithExpression value="' + exp + '">',
'To use this page you need a Java-enabled browser. Download the latest Java plug-in from <a href="Java.com'">http://www.java.com">Java.com</a>'/a>,
'</applet>');
var whichone;
function writedata()
{
whichone = opener.thenumber
}
function updateit()
{
var applet = document.DragMath;
var ans = document.DragMath.getMathExpression();
opener.document.forms['exampleform'].elements[whichone].value = ans
window.close()
}
</script>
<body Xonload="writedata()">
<form name="checkit">
<input type="hidden" cols="20" id="data" />
<br />
<input type="button" value="Save & Close" Xonclick="updateit()">
</body>
</html>
And remember to change default OutputFormat value from Maxima to MathML in your application.
In addition to using of previous variables it is also possible to modify the Dragmath applet itself with NetBeans:
If openWithExpression() method only parses Maxima format and even subset of Maxima,
How about to add below javascript interface to DragMath, we can save and load diagram as a hidden text field in editor.
https://sourceforge.net/tracker/?func=detail&aid=2834929&group_id=201862&atid=979259
I'm trying to add this function in dragmath source with NetBeans. But got error "Invalid singnature file..."
I'm very new to java ans NetBeans, is there anyone who can help to solve this issue?
Additionally, Simon is working on editing options for STACK and looking at mathjax, and I am sure that work will eventually be reflected in broader editing options in dragmath.
Apparently openWithExpression() method only parses Maxima format, any other maths format will result in expression not being parsed. So the creation of parser for other formats are definitely needed for this project
I tested this input issue too and it is true that only Maxima format is shown as "Wysiwyg" in Dragmath. It is of course possible to change Export format from
Options > Set export format > Maxima
and use Dragmath with drag and drop feature and when final equation is ready change export format again to ASCIIMathML, Latex or MathML but most reasonable solution should use only one format.
You can compare the differences of formats from xml files (applet/classes/formats).
To be able to use dragmath for direct editing of selection (get it back from editor to dragmath applet) you would need to get it first to plugin, translate from your format (mathML) to Maxima and send to applet. It's getting a little too complex but certainly can be done if you have time and talent to write the code - I can't do it right now and have lots of other small things that should be done before summer holidays... sorry.
Hopefully some DragMath Developer could look into this possible improvement and formulate a solution before I submit this final year project of mine.
Do provide us any updates should you have new functionalities for dragmath or editors into moodle.
Java can also show a security warning in IE about drag and drop. FF allows you to drag the equations without warnings (although FF can otherwise restrict using of copy-paste with mouse right click)
This "Passing the AsciiMath value from HTML editors into Dragmath" is not only problem of Dragmath. Dragmath is just an applet. If you use TinyMCE you need to handle first selection in editor somehow and activate the correct plugin button so that when you select/click your maths from certain span, div, img etc Dragmath plugin button should be activated (see the code of other plugins) - depending on the tags you need to use the javascripts in plugin and somehow manage to automatically pass selected expression to dragmath but I suppose the applet only outputs getMathExpression() when you press the Insert button in Dragmath applet...
And I suppose that you need to use also different doc type for your pages if you plan to use MathML directly. One more example about different versions of AsciiMathML by Peter Jibsen as XHTML file
http://math.chapman.edu/~jipsen/mathml/asciimathandmathmlsvg.xhtml
(requires Firefox)
Kian, if I were you I would download the package from http://www.imathas.com/editordemo/demo.html
and edit the code of asciimath plugin - most of the code can be taken away if you don't need mode change between wysiwyg and code view and check the code of amcharmap.html where David has the tables for adding examples to editor. Change that file to a php file - change the extension / name of row
file : url + '/amcharmap.htm',
to your main file
and edit the code as much as you like - it's free code.
It's a simple and functional plugin so if you just get TinyMCE to allow your MathML tags and to show them directly it should not be impossible to create that plugin yourself.
Oh - and you can also change Dragmath to output MathML by default by changing Output Format in integration code:
<param name= outputFormat value= "MathML" >
The value is the name of the XML file, so this example refers to output format file MathML.xml in the \formats folder. The purpose of setting this is to have the default format to use automatically set when the software loads.
Check http://www.dragmath.bham.ac.uk/doc/index.html and Changing Applet parameters.
No matter what editor you use with Dragmath - or you can even integrate Dragmath applet directly to your php files without any editors
I'm sorry to have come to this tread so late!
I guess you have figured this out, but creating a new output format is easy, you just need to create an .xml file which encodes it. Plenty of examples are provided, and I'm happy to provide advice on this.
Creating an input format is much more difficult. For my assessment application I wanted to be able to parse simple expressions in a Maxima's syntax, so we have included a modified version of the JEP parser into DragMath. This is not a complete Maxima Parser, just a subset of the common elementry expressions. I guess it may be possible to include other parsers into DragMath, but this would be a major developer task. As a minimum starting point we would need a Java parser (released under the GPL).
If I can help, please don't hesitate to ask.
Chris