We Keep Coding

Proper Way Of Modifying Toolbar After Init in TinyMCE

I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.
The LMS uses tinyMCE frequently. The goal is to add a new button on to the toolbar of each tinyMCE editor.
The problem is that since the tinyMCE modules are initialized in the vendor's untouchable code, we cannot modify the init() call. Therefore, we cannot add any text on to the "toolbar" property of the init() object.
So I accomplished this in a moderately hacky way:
tinyMCE.on('AddEditor', function(e){
e.editor.on('init', function(){
tinyMCE.ui.Factory.create({
type: 'button',
icon: 'icon'
}).on('click', function(){
// button pressing logic
})
.renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
});
});
So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.
Is there a proper way to add the button to a toolbar, after initialization, if we cannot modify the initialization code?

I found a more elegant solution, but it still feels a bit like a hack. Here is what I got:
// get an instance of the editor
var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever
//add a button to the editor buttons
editor.addButton('mysecondbutton', {
text: 'My second button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my second button!</b> ');
}
});
//the button now becomes
var button=editor.buttons['mysecondbutton'];
//find the buttongroup in the toolbar found in the panel of the theme
var bg=editor.theme.panel.find('toolbar buttongroup')[0];
//without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
//append the button to the group
bg.append(button);
I feel like there should be something better than this, but I didn't find it.
Other notes:
the ugly _lastRepaintRect is needed because of the repaint
method, which makes the buttons look ugly regardless if you add new
controls or not
looked in the code, there is no way of adding new controls to the
toolbar without repainting and there is no way to get around it
without the ugly hack
append(b) is equivalent to add(b).renderNew()
you can use the following code to add the button without the hack, but you are shortcircuiting a lot of other stuff:
Code:
bg.add(button);
var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0];
var bgElement=bg.getEl('body');
buttonElement.renderTo(bgElement);

jQplot tooltip dismiss issue

I have implemented a simple bar chart,
ive added tooltip feature using highlighter but i am facing an issue with the same.
When i move the mouse down and exit the chart canvas the tooltip doesnt dismiss
I have tried adding
$.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]);
$.jqplot.eventListenerHooks.push(['jqplotMouseLeave', handleMove]);
But it doesnt work , i get the error handleMove is not defined
Here is the code fiddle for the same
https://jsfiddle.net/9j2na3L7/

I finally got this working :)
-- PROBLEM:
Mouse cursor escaping too fast from canvas, prevents event form fireing
-- SOLUTION:
First of all grab a handle of jplot object
var plotBar = $.jqplot('task_brk_bar_chart', [...
So we can use it to manipulate it on run-time.
Then we will use jqplotDataHighlight and jqplotDataUnHighlight events to change the graph properties and replot() function to apply them on fly.
$('#task_brk_bar_chart').bind('jqplotDataHighlight', function () {
plotBar.showTooltip = true;
plotBar.replot();
});
$('#task_brk_bar_chart').bind('jqplotDataUnhighlight', function () {
plotBar.showTooltip = false;
plotBar.repolot();
});
Working fiddle : https://jsfiddle.net/urahara/9j2na3L7/1/
Note: Copy your old css to override my setting, it was for testing purposes only.
Cheers!

TinyMCE v4 adding custom items to the contextmenu

I'm upgrading TinyMCE on one of my websites and am trying to add a custom item to the contextmenu plugin. I can't seem to be able to find any documentation for it since all I can find is for v3.
I was easily able to add a custom link to the contextmenu in the last version but because TinyMCE has changed so much I'm having a hard time adding the new one. Can anyone point me to the correct documentation?
I used to use the following in the last version:
ed.addCommand('fileMan', function(e) {
fileman();
hide(ed, e);
});
m.add({title : 'Filemanager', icon : 'image', cmd : 'fileMan'});

I was able to figure this out. Here is what I did:
Created a new folder in the plugin directory called fileman
Created a file named plugin.js and added the code at the end of this post to it
Minifed the code and put the minified code in plugin.min.js
Edited plugin.min.js in the contextmenu plugin folder and added fileman to the list of loaded plugins
Added fileman to the list of loaded plugins when initializing the editor
Code:
tinymce.PluginManager.add('fileman', function(editor) {
editor.addMenuItem('fileman', {
icon: 'image',
text: 'Filemanager',
shortcut: 'Ctrl+J',
onclick: function() {
fileman.launch('editor');
},
context: 'insert',
prependToContext: true
});
});

This is somewhat tricky solution but the perfect one, worked for me after trying lot of things.
editor.on('contextmenu', function(editor) {
this.settings.contextmenu = 'fileman | link openlink image inserttable | cell row column deletetable';
var exampleMenuItem = this.menuItems['italic'];
this.menuItems['fileman'] = exampleMenuItem;
this.menuItems['fileman'].cmd = 'mceFileMan';
this.menuItems['fileman'].icon = '../../file-icon.png';
this.menuItems['fileman'].text = 'File Manager';
});

ExtJS4 toolbar with OpenLayers code

We are using Mapfish toolbar with ExtJS3.2 in our application. Now we are trying to upgrade ExtJS3.2 to ExtJS4. But mapfish is not working with ExtJS4. So, we are using ExtJS4 toolbar, but openlayers code which is written for button in toolbar is not executing.
ExtJS4 code is:
var extoolbar = Ext.create('Ext.toolbar.Toolbar',{
border : true,
width : 100,
height : 40,
layout : hbox
});
var btn1 = {
xtype : 'button',
enableToggle : true,
tooltip : "Zoom In",
id : 'zoominbtn',
listeners : {
'click' : fucntion(){
new OpenLayers.Control.ZoomBox({
alwaysZoom : true,
draw : function(){
this.handler = new OpenLayers.Handler.Box(
this, {done: this.zoomBox}, {keyMask: this.keyMask});
}
});
}
}
};
extoolbar.add(btn1);
Here if we click on the zoom in button control is going into OpenLayers.Control.ZoomBox but the draw method is not executing. My questions are:
Is there any thing wrong in the code?
Is there any other way to approach OpenLayers with ExtJS4?

I am using MapFish too, with Ext 3.4.
First of all you have a fucntion() instead of function() :)
Then, may be I haven't understand what you want to do, but I think -IMAO- that this is not a good way to use the ZoomBox control...
You should add the ZoomBox control to the map while you create it and give the control an id, then use a listener for the toggle event like this:
listeners: {
'toggle': function(button, pressed) {
var ctrl = map.getControl('yourid');
if(pressed){
// Activate the control
ctrl.activate();
} else {
// Deactivate the control
ctrl.deactivate();
}
}
}
This way when you press the button you enable the control, and when you press it again you disable it.
Keep in mind that the ZoomBox control, once active, can also be always available by holding shift
Or you could also use GeoExt, which is really easy, like this
GeoExt.Action({
map: map,
text: "Zoom Box",
control: new OpenLayers.Control.ZoomBox()
});
But I don't know if or how GeoExt works with Ext 4
As for the point 2 of your question, I am sorry but I cannot answer that, because I have no experience with Ext 4.

jQuery UI dialog - unable to remove buttons

How do I remove the buttons in a jquery dialog? Per example, I tried re-calling .dialog with the correct new options, but the dialog seems unaffected.
$('.selector').dialog('option', 'buttons', {} ); does not work, and nor does it work if actual new button strings and functions are declared.
Thoughts?

You are passing new buttons set in a wrong way. Options should be passed as an object.
This will work:
var options = {
buttons: {}
};
$(selector).dialog('option', options);
No need to destroy and create new dialog.
Of course you can also replace buttons object with a new set of buttons if you wish:
var options = {
buttons: {
NewButton: function () {
$(this).dialog('close');
// add code here
}
}
};
$(selector).dialog('option', options);

FWIW,
$(".dialog").dialog("option", "buttons", null);

Buttons cannot be added/set while the dialog is loading.

You need to destroy the current one first. Then you can make a new one with the new options you want.
EDIT (to response to comment):
I don't know what to tell you. I did the following on my site and WFM.
$('.selector').dialog('destroy');
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
$('.selector').dialog('open');
You need to return to pre-init state to alter the buttons, which is what destroy does. Maybe I just wasn't clear enough on the steps.

The discussion here is better: http://www.nabble.com/jQuery-dialog-add-remove-button-on-the-fly-td22036498s27240.html
Add in the prescribed extensions and you can just use addbutton and removebutton (should switch to camel case naturally :)

Anotherm, maybe the simplest, and very flexible way to do this is via CSS.
(what if you'll eventually need them in the future...).
Looks like:
.ui-dialog-titlebar-close{display:none}
If you like to do it only for some dialogs, you may add dialogClass: option while initializing the dialog, and your css will look like (e.g. you've added myDialogClass as dialogClass, so the whole dialog container will be accessible via this class:
.myDialog .ui-dialog-titlebar-close{display:none}
Good luck in customizing!