Adding editor button

[Andy]

I would like to add a button to the editor to call an equation editor. 

www.codecogs.com/latex/quick-install.php

I want to give the user the ability to click on an "equation" button and bring up the above codecogs window. The user will create their equation, and then add the text representation will be pasted in the editor.

I browsed some of the plugins, but the only thing I found was the "quick reply". I can kind of see what it does, However it mentions that it will only work for buttons the editor knows about. 

Where can I find info on adding a button to do what I want?

Thanks,

Andy

[Tumbleweed]

Andy,
What you are trying to do is beyond my scope of knowledge so I have no clue if what you want could be done but I thought maybe this plugin might help?

support.proboards.com/thread/441976/ubbc-buttons

[Andy]

Sept 9, 2017 23:57:52 GMT -8 Tumbleweed said:

Andy ,
What you are trying to do is beyond my scope of knowledge so I have no clue if what you want could be done but I thought maybe this plugin might help?

support.proboards.com/thread/441976/ubbc-buttons

Tumbleweed,

Thanks. I have been looking at the wizardry in the javascript for that. I don't understand much of it, but it looks like I may be able to modify it to add the functionality I'm after. I develop in C++, but javascript is a bit of a foreign language to me. I can understand some of it, but have trouble writing it

Looks like I should move this topic to the plugin board if I go that route.

Thanks again, Andy

[Chris]

Andy, I'll try and look at this tomorrow, no need to move

[Andy]

Sept 10, 2017 8:37:00 GMT -8 Chris said:

Andy , I'll try and look at this tomorrow, no need to move

Chris,

Thanks. I've been learning more on the Mathjax side of things, so I may try some other ideas as well. The Codecogs equation editor is licensed, but it looks like I can use it for non commercial use. I'm check with them. This is for a forum for my fellow calculus students and I to use as we struggle in our studies. Whatever I come up with will be free to use for future mathjax / codecogs users.

Andy

[Chris]

Sorry for the delay Andy , I did take a look at this and determined it would be easier to create a new plugin rather than modify the old one to accommodate an externally hosted resource. Plugins that rely on external resources are no longer accepted in the library but there is no rule that you cannot create a personal-use one so I found some time today to knock one up, see if you find it useful. As always I can only test and anticipate so much so your feedback should you encounter a problem would be invaluable for improvements. You mentioned a programming background so just letting you know I left the plugin unlocked so you can fiddle with it if you so wish:

Click image for plugin download

source:

SPOILER: Click to show

(function () {
	var wysiwyg = jQuery.ui.wysiwyg.prototype;
	var plugin = pb.plugin.get('codecog_equations_editor');
	var buttonName = 'equations_editor';
	var old_create = wysiwyg._create;

	/* register the button so it gets included during wysiwyg build (http://support.proboards.com/post/5307304) */
	['_bbcodeEditor', '_visualEditor'].forEach(function (e, i, o) {
		wysiwyg[e].controlGroups[1][1].push(buttonName);
		wysiwyg[e].controls[buttonName] = {
			title : 'Insert Equation'
		}
		wysiwyg[e].commands[buttonName] = function (editor, command, ui, value) {
			editor.name == "BBCode" ? editor.replaceSelection('[img src="" style="max-width:100%;" alt="codecogs.com equation"]') : editor.replaceSelection($('<img>', {
					alt : "codecogs.com equation",
					src : value
				}, editor.document)[0])
		}

	})

	/* Although UIfactory emits an event [widgetname]create it is too late since it is after creation and we need to modify the image pool prior to creation since it isn't created until just before the wysiwyg creation call */
	wysiwyg._create = function new_create() {
		wysiwyg = this; //change from prototype to current instance
		
		/* add the button image to the image pool */
		window.wysiwyg_buttons[buttonName] = plugin.images.equations_button2;
		var ret = old_create.apply(this, arguments);
		
		/* Bind the button to create and open the equation editor */
		$('.button-equations_editor').off('click').on('click', function(evt){
			evt.stopPropagation();
			var eqnEditor = $('#equation-wrapper');
			if(eqnEditor.length){
				$('#latexInput').val("");
				$('#latexPreview').removeAttr('src');
				eqnEditor.dialog('open');
			}else{
				eqnEditor = $('<div>').prependTo('body').css({'min-width':'600px', 'min-height':'360px, position:relative'}).attr('id','equation-wrapper');
				var controls = $('<div>', {id:'eqncontrols',class:'controls'}).appendTo(eqnEditor);
				var latexInput = $('<textarea></textarea>', {row:6, id: 'latexInput', name: 'latextInput'}).appendTo(eqnEditor).css({width:'90%'});
				var latexImg = $('<img />', {id: 'latexPreview'}).appendTo(eqnEditor).wrap('<p align="center"></p>')
				var latexArea = new EqTextArea('latexPreview','latexInput');
				
				EqEditor.embed('eqncontrols', pb.data('forum_url')+'_'+(pb.data('user').id||'0'), plugin.settings.controls.length?plugin.settings.controls.join(','): void(0));
				EqEditor.add(latexArea, false)
				eqnEditor.dialog({
					title: '<h1 style="font-size:2.1em"><img src="'+plugin.images.equations_button+'"> Equation Editor</h1>',
					minWidth: 650,
					minHeight: 375,
					buttons:[{
						'text':'Insert Equation',
						click: function(){
							var editor = wysiwyg.editors[wysiwyg.currentEditorName];
							editor.name == "BBCode" ? editor.replaceSelection('[img alt="Codecogs Equation" title="' + latexArea.exportEquation('latex').replace(/"/g,'&q'+'uot;').replace(/\\?\[/g,'\\lbrack').replace(/\\?\]/g,'\\rbrack').replace(/[\n\r]/g,'') + '" src="' + latexArea.exportEquation('url') + '"]') : editor.replaceSelection($('<img>', {
								title : latexArea.exportEquation('latex').replace(/"/g,'&q'+'uot;').replace(/\\?\[/g,'\\lbrack').replace(/\\?\]/g,'\\rbrack').replace(/[\n\r]/g,''),
								src : latexArea.exportEquation('url'),
								alt: "Codecogs Equation"
							}, editor.document)[0]);
                            eqnEditor.dialog('close')
						}
					}]
				});
				$('<a href="http://www.codecogs.com" target="_blank"><img src="http://www.codecogs.com/images/poweredbycodecogs.png" border="0" title="CodeCogs - An Open Source Scientific Library" alt="CodeCogs - An Open Source Scientific Library" style="position:absolute;bottom:0;right:0;"></a>').appendTo(eqnEditor)
			}
			
		})
	}

})()

---

Edit: Also be aware that I never contacted codecogs.com so if you plan on using the plugin then it might be prudent to contact them once any kinks have been addressed so they can allot you some bandwidth.

* The free allowance is only available if you provide a Link Back to CodeCogs. We reserve the right to change this free allowance and discontinue this service without prior warning for anyone who consistently breaches established limits. Therefore, we recommend that you send us contact details and inform us of your intended use before your users become reliant on our system.

[Andy]

Chris,

Wow, that is great! Thanks so much for doing this. I've been learning javascript and trying to figure out out ProBoards editor works. Given another month or two I might have figured it out.

Thanks for leaving it unlocked. I think it should work as is, but it will give me a good reference to learn from.

Was the ban on external code for security?

I'll let my fellow students know about it and we'll give it a whirl.

Thanks again,

Andy

[Chris]

You're Welcome.
Security definitely was factor, there have been incidents in the past but if memory serves this ban was prompted by stability (a non-responsive server could slow a forum to a crawl and it happened with a very popular plugin)

I wouldn't recommend spending too much time on studying the editor, it will be scrapped very soon with the release of V6

[Andy]

Chris,

Will existing forums continue on V5?

Regarding the link-back for Codecogs. I contacted them and explained what I wanted to do. They were fine with it. I added a link-back to the bottom of the forum.

Andy

[Chris]

There's also a link back in the dialog that opens on button click.

All forums will eventually go to V6 but there will be a transition period after the release of V6 where you can voluntarily upgrade after which transition will be automated. You can get more information in the Development Blog