Tutorial: How To Add a Mathjax option to your buttonbar.

peregrine · June 2014

To add a mathjax option insert to your buttonbar.

1) copy the plugins/MathJaxCDN/math.png to plugins/ButtonBar/design/images/math.png

2) Add this to your plugins/ButtonBar/design/buttonbar.css

.ButtonBar .ButtonBarMath { background-image: url('images/math.png'); }

3) Add this to ButtonBar/views/buttonbar.php

echo '<span class="ButtonWrap"><span>math </span></span>';

4) Add among the other case statement ButtonBar/js/buttonbar.js

        case 'math':
        $(TextArea).insertRoundTag('math',bbcodeOpts);
        break;

5) change in buttonbar.js

        PerformHtml: function(TextArea, Operation) {
        var htmlOpts = {
        opener: '<',
        closer: '>'
        }
        to
        PerformHtml: function(TextArea, Operation) {
        var htmlOpts = {
        opener: '<',
        closer: '>'
        }
        bbcodeOpts = {
        opener: '[',
        closer: ']'
        }

also add the bbcodeOpts to Markdown

from 

        PerformMarkdown: function(TextArea, Operation) {
        var markdownOpts = {
        opener: '',
        closer: '',
        closeslice: ''
        }


    TO:


        PerformMarkdown: function(TextArea, Operation) {
        var markdownOpts = {
        opener: '',
        closer: '',
        closeslice: ''
        }
        bbcodeOpts = {
        opener: '[',
        closer: ']'
        }

peregrine · June 2014

The Red M in the image is what is produced.

Hightlight your math formula, click on the M and it will be surrounded by the necessary tags [math] and [/math>

tested in Markdown, Html and BBCode.

peregrine · June 2014