Math Editor Plugin for CKEditor

Math Editor Plugin for CKEditor

by luke low -
Number of replies: 19

Hi, I am currently doing a MathML-aware project developed in PHP. It requires displaying, editing math expressions in all the main browsers and also retrieving equations from MySQL database.

So far, I have done some research, it seems that putting math Editor such as Dragmath, MathEdit or Wiris plugin into ckEditor will be a  good solution, but some of them output as image rather than MathML and some of them could not be supported in broswers such as Chrome..

Is there a better solution in order to achieving the above requrements?

Thanks

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Marc Grober -
Check out the plugins Mauno has developed. As I recall there may have been a version for CKEditor as that was a possible replacement for HtmlArea
Average of ratings: -
In reply to Marc Grober

Re: Math Editor Plugin for CKEditor

by luke low -

Hi, Marc. Thank you for your kind suggestion, I can only find a 'dragmath integration with Tingmce' version from http://moodle.org/mod/forum/discuss.php?d=177813&parent=793242, and it seems to be more troublesome to configure the integration as compare to ckeditor or in another word, I am more familar with ckeditor.

I will be much appreciated if you could provide me with the link for ckeditor version. 

Thanks

Average of ratings: -
In reply to Marc Grober

Re: Math Editor Plugin for CKEditor

by luke low -

Apart from that, I have also tried out WIRIS, the only problem I felt is that it outputs the result as an image, whereas, I am expected to output in mathml and store into database, is it possible to achieve that?shy

Thanks

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Mauno Korpelainen -

Luke,

you did not mention which version of moodle you are talking about - 1.9 had totally different editor integration methods compared to moodle 2.x

I did create some years ago some theme based plugin packages for moodle 1.9 and they had fckeditor included as an optional editor (not yet ckeditor) with some test plugins - for example dragmath. But I haven't upgraded those old fckeditor plugins during the past years. Didier Belot created an editor integration for ckeditor / moodle 2.x about year ago and dragmath was included to that package as dragmath has been a part of core moodle 2. It is possible to modify any tinymce plugins of moodle 2 for ckeditor but I don't have that time or interest (sorry) to start testing ckeditor again - although it is just as good editor as tinymce. See http://moodle.org/mod/forum/discuss.php?d=172225 about ckeditor for moodle 2 and othe discussions about mpluga / mplugb packages from Mathematics Tools forum to get some ideas and links.

To your main question: yes, it is possible to use mathml output with editor plugins like fmath (flash based) or any custom plugins - and even with core dragmath if you change the default output from (dragmath) plugin files

<param name="outputFormat" value="MoodleTex" />

to

<param name="outputFormat" value="MathML" />

( or from Dragmath plugin itself and there toolbar Options > Set export format > MathML - but this will be only a temporary change )

but the main problem in using MathML with moodle is that some activities that check trusted content (such as forums, blogs, user profiles, wikis, glossaries) cut mathml tags since they are not among allowed html tags (not even for administrators). The only fully functional workaroud for such cases is to use some filter (like wiris plugins do and mathml plugins in mpluga/b do) and there 5 characters of mathml tags are converted/reconverted to other characters depending on the mode of browsing ( for example < , > and " ) . It would be possible to modify and use also Wiris plugin to output mathml directly or with a mathml filter and use MathJax to render mathml to make it cross-browser-compatible but their license allows only using the wiris image service (converter script) - wiris is not open source, unfortunately.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -

Hi, Mauno.

Thank you for providing such valuable information. I am actually okay with both ckEditor and Tinymce, as long as they could plugin dragmath. 

As you mentioned, since WIRIS only allow me to use its image service, so I am not going to use that. Besides, I tried out fMath, personally I don't like its GUI. 

Now I am trying to embed dragMath into Tinymce myself. Maybe I just get my feet wet, I could not find the config.js file to add dragMath even though I have put it inside the plugin file. 

If I could embed a 'tinymce with dragmath' version into my project, I assume that I could let it export MathML through the modification to dragmath by following your above instructions.

Hope you could help me with this. Thanks!

 

 

BTW: I have downloaded this http://korpelainen.net/mpluga.zip 

but I am unable to unzip it, my friend also cannot unzip it with his laptop...

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -

Hmm, now I can unzip the mpluga.zip file. Besides, I have also unzipped  https://github.com/electrolinux/moodle-ckeditor.

Therefore, I think I got both ckeditor with dragmath as well as tinymce with dramath. 

First, I tried ckeditor . After copying ckeditor in my root path, I added javascript in <head> like 

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

and inserted the following codes in body:

<textarea id="editor1" name="editor1"></textarea>
<script type="text/javascript">
CKEDITOR.replace( "editor1" );</script>

The ckEditor works, but without dragmath....

 

Secondly, I tried to embed tinymce into my project. 

<scriptlanguage="javascript"type="text/javascript"src="tiny_mce/tiny_mce.js"></script>
<scriptlanguage="javascript"type="text/javascript">
tinyMCE.init({
        theme :"advanced",
        mode :"textareas"
});
</script>

The above codes were inserted into my <head> session and I created a textarea in the <body>, but the tinymce did not display...PS: There many .js file in the folder, I am not sure which is the correct src...

How can I solve the above problems??? Appreciate your helps!

What I need is sth like the moodle reply dialog box, only with dragmath will do. Thanks   

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Mauno Korpelainen -

Luke,

you should probably start from reading all the documentation of home sites of CKEditor and TinyMCE - and dragmath - if you really want to create a project (not inside moodle itself) that is using an editor with custom plugins.

Relacing element "editor1" with ckeditor just replaces the element with editor with default configuration, nothing else. Adding the second init code for tinymce to <head> tags replaces all textareas inside document with a default tinymce with advanced theme but with no custom plugins. Start from pages like http://docs.cksource.com/CKEditor_3.x/Tutorials or visit http://www.tinymce.com/tryit/full.php and press View Source button there to see how an editor integration is done with some basic options.

Using dragmath plugin in a custom project (outside moodle) requires that you have added necessary code to get the plugin/button and that the plugin itself is properly using files of dragmath applet inside correct paths. So the plugin file "dragmath.php" should create applet tags like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DragMath Equation Editor</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="js/dragmath.js"></script>
</head>
<body>
<applet
    name="dragmath"
    codebase="http://yoursite/lib/dragmath/applet"
    code="Display/MainApplet.class"
    archive="DragMath.jar,lib/AbsoluteLayout.jar,lib/swing-layout-1.0.jar,lib/jdom.jar,lib/jep.jar"
    width="540" height="300"
>
    <param name="language" value="en" />
    <param name="outputFormat" value="MathML" />
    To use this page you need a Java-enabled browser. Download the latest Java plug-in from <a href="http://www.java.com">Java.com</a>.</applet>
<form name="form" action="">
    <div>
    <button type="button" onclick="return DragMathDialog.insert();">Insert</button>
    <button type="button" onclick="return tinyMCEPopup.close();">Cancel</button>
    </div>
</form>

</body>
</html>

and the main js files of your editor plugin should have the functions that handle "Insert" and "Cancel" button clicks to get content of dragmath applet to your project page (and close the dialog). Finally your project should save the content of your project element to database. It's not a single line task but those examples (source) from demo plugins might help more than reading the code of php files of moodle...

If you are trying to add dragmath to some other lms / cms etc you could check first how the main editor integration is done and how the custom plugins are added and try to modify some existing custom plugin to get a fully functional dragmath plugin with mathml output for your project.


Good luck! wink

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -

Excellent! Thanks Mauno! I will try to figure it out in next few days by following ur instructions and hope I could still pick ur brain if I get any doublts later. 

Rgdsbig grin

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -

Hi, Mauno

I have download the lastest version of ckeditor as well as dragmath and now am trying to embed dragmath into ckeditor. the CKEdtior can be displayed but it did not embed dragmath, even though I put dragmath inside 'plugin' file. 

I think I need to modify the 'config.js' in order to embed dragmath into CKEditor. I once embed 'WIRIS' inside ckeditor as there is instruction on wiris's website, sth like

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
    // Add WIRIS to the plugin list
    config.extraPlugins += (config.extraPlugins.length == 0 ? '' : ',') + 'ckeditor_wiris';

    // Add WIRIS buttons to the "Full toolbar"
    // Optionally, you can remove the following line and follow
    // http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
    config.toolbar_Full.push({ name: 'wiris', 
    items : [ 'ckeditor_wiris_formulaEditor', 'ckeditor_wiris_CAS' ]});
};

but I really can't find the code for dragmath...

Could you give me some hints on how to embed dragmath into ckeditor by modifying 'config.js'???

Appreciate your helps!

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Mauno Korpelainen -

Basicly you should be able to use similar code as Wiris plugin or like custom plugins documented in CKEditor docs but you may have missed something obvious...have you actually created any plugin for dragmath to the folder where CKEditor has it's plugins (all of them)?

Moodle is using rather complex way to add plugins but you can at least check how Didier did it with moodle 2 in

https://github.com/electrolinux/moodle-ckeditor

See particularly his plugin files like

https://github.com/electrolinux/moodle-ckeditor/blob/master/ckeditor/3.5.2/plugins/dragmath/plugin.js (editor plugin file that calls dragmath.php)

and

https://github.com/electrolinux/moodle-ckeditor/blob/master/ckeditor/3.5.2/plugins/dragmath/dialogs/dragmath.php (the main file for dragmath plugin that creates the applet and uses document.dragmath.getMathExpression() to get the maths from applet to dialog that plugin file passes to editor content element)

If you are using moodle 2 you can download as a zip file the whole package (editor integration) like explained in https://github.com/electrolinux/moodle-ckeditor (at the bottom of page) or use git to get the files. If you try to use these files outside moodle you need to modify the files a little so that they don't try to use settings of moodle (translation, admin panel settings etc)

Files of Dragmath that you probably downloaded from http://www.dragmath.bham.ac.uk/#Download contain the dragmath applet files (java) - you should have these files somewhere on your site (moodle 2 has them in lib/dragmath) and the editor plugin should use correct path to find the applet files.

IF your plugin does not exist or IF it has some problematic code editor may not show the button for your custom plugin - or you may not even get the editor if init code fails.

Take a copy of the files that you replace or edit and test modifying the existing files/demos/exaples, use google,... it may take some time to test the ideas how plugins work but this is really a moodle forum, not a forum for customizing CKEditor plugins outside moodle so you could for example send a private message to Didier Belot and ask if he has time to give you more detailed info about his dragmath plugin integration to CKEditor wink

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -

Hi, Mauno. Thank you for your detailed explanations. Now I have hopefully solved this problem. Thanks to your helpful guides, the ckeditor finally integrated with dragmath.big grin

However, when I insert a mathemetical expression into ckeditor by using dragmath, there is only firefox browser could correctly display the formula, the rest such as Chrome, IE and safari only display the alphabets from the expression. 

You have any idea on solving this problem???

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Mauno Korpelainen -

If you use MathML output only Gecko browsers support it natively - see for example http://en.wikipedia.org/wiki/MathML#Web_browsers

But the solution is easy, MathJax, check http://www.mathjax.org/docs/2.0/index.html

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -
Hmm, Mathjax seems to be a good solution. With mathjax, mathml output could be displayed in my website. But how can I integrate Mathjax with ckEditor? Now my problem is after inserting math expressions into ckeditor by using dragmath, only firefox could display correct equation. mathJax only helped me to display the math equations in web pages, but not in ckeditor's text area.....sadly...
Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Mauno Korpelainen -

Usually editor plugins handle this kind of situations with images - in editor content area an img tag can for example be changed with javascript to use some external math renderer or save fallback images on server and have the mathml in converted mode for example in alt attribute... To be able to use MathJax in editor content area your CKEditor or TinyMCE should init MathJax inside the main editor javascript file itself and I am not aware of any easy way to handle it. Old asciimath scripts used a "two-mode-conversion" where clicking a span made the plugin to switch between "preview-mode" and "edit-mode" and in theory plugin javascript event handlers should be able to initialize mathJax according to some editor api event (oninit, onchange, onsave etc) but I have never tried it with mathml tags. It might require writing some extra javascript to your plugins anyway. In my test plugins I have mostly used a separate preview window to render mathml in the plugin itself and editor content area is rendering mathml as code with some converted characters that are also saved to database and a filter converts these characters back to real mathml tags before mathjax scripts render them as maths...

I have NEVER tried this but since both CKEditor and TinyMCE support jQuery you might be able to do such tricks by http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter or some dynamical script loading - or by hacking the core editor code to initialize mathjax while changing something in editor content area - yet I am afraid it may make editor much slower and hacking any core files makes upgrading always more difficult.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Math Editor Plugin for CKEditor

by luke low -

Roger that, I think instead of creating jQuery for integration of mathjax and ckeditor, I will probably put a 'preview' tag below the editor.. So far that is the only way I felt doable...

Really appreciate ur helps!! All the bestbig grin

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Ivan @ wiris.com -

Hello Luke,

Just for completeness, let me point that WIRIS plugins (for CKeditor, TinyMCE, or others) produce images by default, but can produce MathML easily, with this change:

 

In the WIRIS plugin folder, edit the file:

plugin.js

and change the line:

var _wrs_conf_saveMode = 'tags'; // This value can be 'tags', 'xml' or 'safeXml'.

to:

var _wrs_conf_saveMode = 'xml';  // This value can be 'tags', 'xml' or 'safeXml'.

 

Please note I'm talking about the common CKeditor plugin, not the Moodle filter/plugin. In fact Moodle plugin uses the safeXml format.

 

Also Mauno is right when says these plugins request components and images to wiris.com, and so you can only do a limited amount of formulas if you are not registered, while in demo mode.

Average of ratings: -
In reply to Ivan @ wiris.com

Re: Math Editor Plugin for CKEditor

by luke low -

Hi, Ivan

I have changed plugin.js with ur instruction, but it still inserted the math equation as img into ckeditor....

Is there antthing else do I need to modify in order to make export format become mathml???

Thanks

Average of ratings: -
In reply to luke low

Re: Math Editor Plugin for CKEditor

by Ivan @ wiris.com -

Hello Luke,

It's the expected behavior.

When editing with CKeditor you will always see images, because this way it's easy to edit, in all browsers.

But when you save the page, MathML will be saved in the database.

Then when you display the page, MathML will be displayed, unless the browser, or some filter converts it to another format.

--

Average of ratings: -
In reply to Ivan @ wiris.com

Re: Math Editor Plugin for CKEditor

by luke low -

Hi, Ivan

Instead of making expression by using wiris, if I retrieve mathml formula from database and insert into ckeditor, it won't display as an image but the original mathml codes. In this case, how can I edit it with wiris??

Thanks!!

Luke

Average of ratings: -