1

Topic: Math and graph plugins

In case they'd be useful to anyone, I wanted to share a pair of math and graph plugins I recently adapted for TinyMCE 3.

The math plugin allows inline entry of mathematics using the calculator-style ASCIIMath notation, instantly rendered using MathML or images depending upon browser support.

The graph plugin allows creation of function, polar, parametric, and slopefield graphs, rendered using SVG or images.

You can view a demo and download at http://www.imathas.com/editordemo/demo.html

2

Re: Math and graph plugins

WOW!

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

3

Re: Math and graph plugins

Hi,

we would like to report on a new math plugin for TinyMCE.

WIRIS Plugin allows to easily integrate with TinyMCe the following tools:

* Equation editor WYSIWYG based on icons and palettes
* Online calculator
  - Integrals, derivatives, limits,…
  - 2D and 3D graphics

DEMO          www.wiris.com/demo-php/pluginwiris/tiny_mce_wiris/
DOWNLOAD www.wiris.com/documents/plugin-tinyMCE.html

Last edited by reixarch (2008-12-24 12:23:47)

4

Re: Math and graph plugins

Is possibile to load wiris in inline popup?

I have made some changes in editor_plugin_src.js (only for the formula editor). The original file is this:

/* Enabling support for all tinyMCE versions */
var wrs_int_tinyManager = function () {};

if (!window.tinymce) {
    wrs_int_tinyManager.baseURL = tinyMCE.baseURL;
    wrs_int_tinyManager.addPlugin = function (pluginName, plugin) {
        tinyMCE.addPlugin(pluginName, plugin);
    }
}
else {
    wrs_int_tinyManager.baseURL = tinymce.baseURL;
    wrs_int_tinyManager.addPlugin = function (pluginName, plugin) {
        tinymce.create('tinymce.plugins.' + pluginName, plugin);
        tinymce.PluginManager.add(pluginName, tinymce.plugins[pluginName]);
    }
}

/* Including core.js */
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/core/core.js';
document.getElementsByTagName('head')[0].appendChild(script);

/* Configuration */
var _wrs_conf_editorEnabled = true;        // Specifies if fomula editor is enabled
var _wrs_conf_CASEnabled = true;        // Specifies if WIRIS CAS is enabled

var _wrs_conf_imageMathmlAttribute = 'alt';    // Specifies the image tag where we should save the formula editor mathml code
var _wrs_conf_CASMathmlAttribute = 'alt';    // Specifies the image tag where we should save the WIRIS CAS mathml code

var _wrs_conf_editorPath = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/integration/editor.php';            // Specifies where is the editor HTML code (for popup window)
var _wrs_conf_editorAttributes = 'width=500, height=400, scroll=no, resizable=yes';                                // Specifies formula editor window options
var _wrs_conf_CASPath = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/integration/cas.php';                    // Specifies where is the WIRIS CAS HTML code (for popup window)
var _wrs_conf_CASAttributes = 'width=640, height=480, scroll=no, resizable=yes';                                // Specifies WIRIS CAS window options

var _wrs_conf_createimagePath = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/integration/createimage.php';            // Specifies where is createimage script
var _wrs_conf_createcasimagePath = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/integration/createcasimage.php';    // Specifies where is createcasimage script

/* Vars */
var _wrs_int_editorIcon = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/core/wiris-formula.gif';
var _wrs_int_CASIcon = wrs_int_tinyManager.baseURL + '/plugins/tiny_mce_wiris/core/wiris-cas.gif';
var _wrs_int_temporalIframe;
var _wrs_int_window;
var _wrs_int_window_opened = false;
var _wrs_int_temporalImageResizing;

/* Plugin integration */
(function () {
    var plugin = {
        // old versions
        initInstance: function (editor) {
            if (!editor.tiny_mce_wirisApplied) {
                editor.tiny_mce_wirisApplied = true;
                editor.oldTargetElement.value = wrs_initParse(editor.oldTargetElement.value);
                wrs_addIframeEvents(editor.iframeElement, wrs_int_doubleClickHandler, wrs_int_mousedownHandler, wrs_int_mouseupHandler);
            }
        },
    
        // new versions
        init: function (editor, url) {
            var iframe;
            
            editor.onInit.add(function (editor) {
                var textarea = editor.getElement();
                
                function whenDocReady() {
                    if (window.wrs_initParse) {
                        if (textarea.value == undefined) {
                            textarea.value = wrs_initParse(editor.getContent());
                        }
                        else {
                            textarea.value = wrs_initParse(textarea.value);
                        }
                        
                        editor.load();
                        iframe = editor.getContentAreaContainer().firstChild;
                        wrs_addIframeEvents(iframe, wrs_int_doubleClickHandler, wrs_int_mousedownHandler, wrs_int_mouseupHandler);
                    }
                    else {
                        setTimeout(whenDocReady, 50);
                    }
                }
                
                whenDocReady();
            });
            
            editor.onSaveContent.add(function (editor, params) {
                params.content = wrs_endParse(params.content);
            });
            
            if (_wrs_conf_editorEnabled) {
                editor.addCommand('tiny_mce_wiris_openFormulaEditor', function () {
                    wrs_int_openNewFormulaEditor(iframe);
                });
            
                editor.addButton('tiny_mce_wiris_formulaEditor', {
                    title: 'Formula Editor',
                    cmd: 'tiny_mce_wiris_openFormulaEditor',
                    image: url + '/core/wiris-formula.gif'
                });
            }
            
            if (_wrs_conf_CASEnabled) {
                editor.addCommand('tiny_mce_wiris_openCAS', function () {
                    wrs_int_openNewCAS(iframe);
                });
            
                editor.addButton('tiny_mce_wiris_CAS', {
                    title: 'WIRIS CAS',
                    cmd: 'tiny_mce_wiris_openCAS',
                    image: url + '/core/wiris-cas.gif'
                });
            }
        },
        
        // old versions
        getControlHTML: function (buttonName) {
            if (buttonName == 'tiny_mce_wiris_formulaEditor') {
                return tinyMCE.getButtonHTML(buttonName, 'Formula Editor', '{$pluginurl}/core/wiris-formula.gif', 'tiny_mce_wiris_openFormulaEditor');
            }
            
            if (buttonName == 'tiny_mce_wiris_CAS') {
                return tinyMCE.getButtonHTML(buttonName, 'WIRIS CAS', '{$pluginurl}/core/wiris-cas.gif', 'tiny_mce_wiris_openCAS');
            }
            
            return '';
        },
        
        // old versions
        execCommand: function (editor_id, element, command, user_interface, value) {
            if (command == 'tiny_mce_wiris_openFormulaEditor') {
                var iframe = tinyMCE.getInstanceById(editor_id).iframeElement;
                wrs_int_openNewFormulaEditor(iframe);
            }
            else if (command == 'tiny_mce_wiris_openCAS') {
                var iframe = tinyMCE.getInstanceById(editor_id).iframeElement;
                wrs_int_openNewCAS(iframe);
            }
        },
        
        cleanup : function(type, content, editor) {
            if (type == 'insert_to_editor') {
                return wrs_initParse(editor.startContent);
            }
            
            if (type == 'submit_content') {
                return wrs_endParse(content);
            }
            
            return content;
        },


        // all versions
        getInfo: function () {
            return {
                longname : 'tiny_mce_wiris',
                author : 'Juan Lao Tebar - Maths for More',
                authorurl : 'http://www.wiris.com',
                infourl : 'http://www.mathsformore.com',
                version : '1.0'
            };
        }    
    };

    wrs_int_tinyManager.addPlugin('tiny_mce_wiris', plugin);
})();

/**
 * Opens formula editor.
 * @param object iframe Target
 */
function wrs_int_openNewFormulaEditor(iframe) {
    if (_wrs_int_window_opened) {
        _wrs_int_window.focus();
    }
    else {
        _wrs_int_window_opened = _wrs_isNewElement = true;
        _wrs_int_temporalIframe = iframe;
        _wrs_int_window = window.open(_wrs_conf_editorPath, 'WIRISFormulaEditor', _wrs_conf_editorAttributes);
    }
}

/**
 * Opens CAS.
 * @param object iframe Target
 */
function wrs_int_openNewCAS(iframe) {
    if (_wrs_int_window_opened) {
        _wrs_int_window.focus();
    }
    else {
        _wrs_int_window_opened = _wrs_isNewElement = true;
        _wrs_int_temporalIframe = iframe;
        _wrs_int_window = window.open(_wrs_conf_CASPath, 'WIRISCAS', _wrs_conf_CASAttributes);
    }
}

/**
 * Handles a double click on the iframe.
 * @param object iframe Target
 * @param object element Element double clicked
 */
function wrs_int_doubleClickHandler(iframe, element) {
    if (element.nodeName.toLowerCase() == 'img') {
        if (wrs_containsClass(element, 'Wirisformula')) {
            if (!_wrs_int_window_opened) {
                _wrs_temporalImage = element;
                wrs_int_openExistingFormulaEditor(iframe);
            }
            else {
                _wrs_int_window.focus();
            }
        }
        else if (wrs_containsClass(element, 'Wiriscas')) {
            if (!_wrs_int_window_opened) {
                _wrs_temporalImage = element;
                wrs_int_openExistingCAS(iframe);
            }
            else {
                _wrs_int_window.focus();
            }
        }
    }
}

/**
 * Opens formula editor to edit an existing formula.
 * @param object iframe Target
 */
function wrs_int_openExistingFormulaEditor(iframe) {
    _wrs_int_window_opened = true;
    _wrs_isNewElement = false;
    _wrs_int_temporalIframe = iframe;
    _wrs_int_window = window.open(_wrs_conf_editorPath, 'WIRISFormulaEditor', _wrs_conf_editorAttributes);
}

/**
 * Opens CAS to edit an existing formula.
 * @param object iframe Target
 */
function wrs_int_openExistingCAS(iframe) {
    _wrs_int_window_opened = true;
    _wrs_isNewElement = false;
    _wrs_int_temporalIframe = iframe;
    _wrs_int_window = window.open(_wrs_conf_CASPath, 'WIRISCAS', _wrs_conf_CASAttributes);
}

/**
 * Handles a mouse down event on the iframe.
 * @param object iframe Target
 * @param object element Element mouse downed
 */
function wrs_int_mousedownHandler(iframe, element) {
    if (element.nodeName.toLowerCase() == 'img') {
        if (wrs_containsClass(element, 'Wirisformula') || wrs_containsClass(element, 'Wiriscas')) {
            _wrs_int_temporalImageResizing = element;
        }
    }
}

/**
 * Handles a mouse up event on the iframe.
 */
function wrs_int_mouseupHandler() {
    if (_wrs_int_temporalImageResizing) {
        setTimeout(function () {
            _wrs_int_temporalImageResizing.removeAttribute('style');
            _wrs_int_temporalImageResizing.removeAttribute('width');
            _wrs_int_temporalImageResizing.removeAttribute('height');
        }, 10);
    }
}

/**
 * Calls wrs_updateFormula with well params.
 * @param string mathml
 */
function wrs_int_updateFormula(mathml) {
    wrs_updateFormula(_wrs_int_temporalIframe, mathml);
}

/**
 * Calls wrs_updateCAS with well params.
 * @param string appletCode
 * @param string image
 * @param int width
 * @param int height
 */
function wrs_int_updateCAS(appletCode, image, width, height) {
    wrs_updateCAS(_wrs_int_temporalIframe, appletCode, image, width, height);
}

/**
 * Handles window closing.
 */
function wrs_int_notifyWindowClosed() {
    _wrs_int_window_opened = false;
}

I've changed:
1) wrs_int_openNewFormulaEditor(iframe); on line 93 in wrs_int_openNewFormulaEditor(editor,iframe);
2) function wrs_int_openNewFormulaEditor(iframe) { on line 173 in function wrs_int_openNewFormulaEditor(editor,iframe) {
3) _wrs_int_window = window.open(_wrs_conf_editorPath, 'WIRISFormulaEditor', _wrs_conf_editorAttributes); online 180 in _wrs_int_window = editor.windowManager.open({title:'WIRISFormulaEditor',file:_wrs_conf_editorPath,width:500,height:400,resizable:true,inline:1,scrollbars:false});

So it load formula editor in a inline popup, but after buttons don't work anymore... there is some little changes to do... someone could help me?

Last edited by neochmod (2010-06-16 13:10:47)

5

Re: Math and graph plugins

is www.wiris.com free? I setup the wiris, but the equation is not displaying, but some box is displayed.

6

Re: Math and graph plugins

Hello,

Just want to point out that the message from neomod is two years old, and so was about the old WIRIS editor 2, a Java applet.
Now there is WIRIS editor 3, a complete rewrite in Javascript. It will be easier to put it in a inline popup.


Developers who want to try it, can start with the minimal demos at:
http://www.wiris.com/plugins/docs/demo-download
changing the same file:
.../tinymce/jscripts/tiny_mce/plugins/tiny_mce_wiris/editor_plugin_src.js


Inline popup is a feature in our roadmap, but because we maintain lots of integrations, and this feature is highly editor dependent, this will take a while.


If you need it right now, we willl be happy to provide you all the support at support_at_wiris.com.


About the sarankup message, WIRIS editor is SaaS, and the server that finally makes the images is usually wiris.net.
But you as a developer can download and use the plugins from wiris.com, without previous register, for about 1000 images or so.

--