MathJax in tinymce RTE works in Firefox. Running into a hitch cross-browser

317 views
Skip to first unread message

Scotland

unread,
Aug 9, 2011, 3:49:57 PM8/9/11
to MathJax Development
I have successfully created a mathjax plugin for tinymce (jQuery
version) which shows live previews while you are entering formulas and
this works wonderfully in Firefox.

I am running into a problem in other browsers. What seems odd is that
the engine seems to parse the RTE's iframe's DOM and write out the
appropriate script tags, but the content remians blank.

I imagine this is due to the mathjax css/fonts not being accessible in
the iframe body but I am not sure. Is is possible to explicitly load
all necessary css into the iframe, or does anyone have any ideas of
what to try to get support in IE and webkit for this.

Thanks for your time...

Robert Miner

unread,
Aug 11, 2011, 12:47:20 PM8/11/11
to mathj...@googlegroups.com
Hi.

This sounds very interesting. Davide may have some ideas, but it would
be a lot easier to try to help with the debugging if there were a demo
we could look at. Are you at a point where you could put something
online?

--Robert

Davide P. Cervone

unread,
Aug 12, 2011, 12:19:26 PM8/12/11
to mathj...@googlegroups.com
Your setup is no doubt a complex one, and you will need to give us
more details about how you are calling MathJax in order for us to help
you out. It is not clear how you are communicating between the iframe
and the main window, for example. If you have loaded MathJax in the
main window and are asking it to process elements in the iframe, for
example, that is not going to work well. For example, MathJax sets up
CSS stylesheets when it is loaded, and they are added to the page
where it is running; those will not be present in the iframe.

I suspect this may be what you are doing, as it would account for
firefox working while other browsers aren't. That is because (with
the standard configuration files) MathJax will use native MathML for
Firefox, but HTML-CSS for other browsers. The native MathML doesn't
rely on as much external CSS, and so would appear to work pretty well
without it, whereas the HTML-CSS output would not.

If you use MathJax in an iframe, you need to be sure to load MathJax
in the iframe itself, not in the parent window (or in addition to the
parent window). This should not be a problem if you are reusing the
same iframe for each re-rendering.

I think there have been other people working on MathJax plugins for
TinyMCE (see https://jira.sakaiproject.org/browse/SAKIII-2341, http://moodle.org/mod/forum/discuss.php?d=155977
, or google "tinymce mathjax plugin"), so you might be able to find
out some more information from those sources.

Davide

Scotland

unread,
Aug 13, 2011, 12:37:45 AM8/13/11
to MathJax Development
Glad to hear others are trying... Thanks for the offer to help.
I posted a work in progress here.
http://www.sitesbyscotland.com/jaxtest/
Needs work but it works the way I would like it to in Firefox 5.0.1



On Aug 12, 9:19 am, "Davide P. Cervone" <d...@union.edu> wrote:
> Your setup is no doubt a complex one, and you will need to give us  
> more details about how you are calling MathJax in order for us to help  
> you out.  It is not clear how you are communicating between the iframe  
> and the main window, for example.  If you have loaded MathJax in the  
> main window and are asking it to process elements in the iframe, for  
> example, that is not going to work well.  For example, MathJax sets up  
> CSS stylesheets when it is loaded, and they are added to the page  
> where it is running; those will not be present in the iframe.
>
> I suspect this may be what you are doing, as it would account for  
> firefox working while other browsers aren't.  That is because (with  
> the standard configuration files) MathJax will use native MathML for  
> Firefox, but HTML-CSS for other browsers.  The native MathML doesn't  
> rely on as much external CSS, and so would appear to work pretty well  
> without it, whereas the HTML-CSS output would not.
>
> If you use MathJax in an iframe, you need to be sure to load MathJax  
> in the iframe itself, not in the parent window (or in addition to the  
> parent window).  This should not be a problem if you are reusing the  
> same iframe for each re-rendering.
>
> I think there have been other people working on MathJax plugins for  
> TinyMCE (seehttps://jira.sakaiproject.org/browse/SAKIII-2341,http://moodle.org/mod/forum/discuss.php?d=155977

Davide P. Cervone

unread,
Aug 13, 2011, 9:13:22 AM8/13/11
to mathj...@googlegroups.com
It looks like your setup is the one I suspected: MathJax in the outer
window trying to modify the contents of the iframe. As I mentioned,
that won't work in general, and only works for Firefox because it is
using native MathML rather than the HTML-CSS output. In order to get
this to work for more browsers, you will need to load MathJax into the
iframe and call it from within the iframe. I don't know the TinyMCE
setup, so I can't tell you how to go about that, but it seems to me
that that is what is going to be needed.

Best of luck with it. It would be a nice plugin to have.

Davide

Reply all
Reply to author
Forward
0 new messages