Search code examples
javascriptbuttonpluginscustomizationaloha-editor

How to add a codecogs equation button to aloha editor toolbar?


I have the aloha editor installed and working. Now I want to create a custom button in the toolbar. That when clicked it opens the codecogs equation editor popup. The way I would do it normally without aloha is to add the popup script and call this function

<p><a href="javascript:OpenLatexEditor('target','html','')"> 
     Launch CodeCogs Equation Editor</a></p>

But I would rather have a button in the toolbar then a link after each editable. I read the plugin documentation for aloha-editor.

This is what I have so far:

define([
    'aloha',
    'jquery',
    'aloha/plugin',
    'ui/ui',
    'ui/button'

], function(Aloha,
        jQuery,
        Plugin,
        Ui,
        Button) {
'use strict';

var GENTICS = window.GENTICS;
return Plugin.create('equationButton', {
    init: function () {
       var that = this;

        this._insertEquation = Ui.adopt("insertEquation", Button, {
            iconOnly: true,
            icon: 'aloha-icon-equation',
            click: function(){
                that.insertEQ();
            }
        });
    },
    insertEQ: function() {
        var self = this;

        if(Aloha.activeEditable) {
            window.location = OpenLatexEditor('target','html','');
        }
    }
});
});

However, How do I include the script for the equation editor popup which is here. And is this how I am supposed to use Window.location or does it only take raw url strings?

Thanks, Jiyda


Solution

  • After asking in the aloha editor's forum I received my answer from one of the employees and it worked, here is the answer:

    Have look at the metaview plugin -- this is a quite small / simple plugin. There's the "buttonClick" method where you can add the code that should be executed when a button is clicked. You can copy the metaview plugin, rename it and adjust the rest to you needs. Be sure to add / adjust also the toolbar.tab settings. (I suppose the scope should be in your case: "Aloha.continuoustext" )