This is my code, it works perfect without using array, and creates context menu on div, but now i want to create some context menu items from array. when i apply array it is showing all items of array in one line and separates by Comma (,) . but i need all items in different rows.
<div id="div_id" > </div>
$('#div_id").chromeContext({
items: [
{ title: array, onclick: function () { RToTb(array_name) } },
{ title: 'properties' onclick: function () { abc(); } },
{ title: 'view' onclick: function () { def(); } }
]
});
Related
Is there a way to add custom dynamic elements to the context menu in tinyMCE 4.x, after init? I created custom menu items but many of them have sub-items that are dependent on other things going on in my application.
I tried using editor.on('contextmenu') but the menu still does not update. Any ideas?
Add the contextmenu plugin
Override the default context menu (some plugins automatically add their own entries) by defining the contextmenu option. It is a pipe-delimited list of custom menu items (which you define in step 3)
Define a list of custom menu items. These can have their own onclick event handlers, or define sub-menus.
tinymce.init({
...
plugins: [..., 'contextmenu'],
contextmenu: 'customItem1 | customItem2',
setup: function (editor) {
editor.addMenuItem('customItem1', {
text: 'Menu Item 1',
context: 'tools',
onclick: function () {
alert('Menu item 1 clicked');
}
});
editor.addMenuItem('customItem2', {
text: 'Menu Item 2',
context: 'tools',
menu: [ {
text: "Sub-menu item 1",
onclick: function () {
alert('Sub-menu item 1');
}
}, {
text: "Sub-menu item 2",
onclick: function () {
alert('Sub-menu item 2');
}
}]
});
}
});
References:
TinyMCE addMenuItem
TinyMCE contextmenu plugin doc
Custom menu item blog post
Similar SO question
Yes, it is possible.
The JavaScript Object Function can be used to declare a value dynamically inside editor events.
Even you can go for loops, but only one menu is supported in Dynamic (Since Context Menu Value is unique) make dummy context menu and declare separately (Apply your own logic).
On Sub-menu: to create a Dynamic Menu, use an Array and push it via JavaScript Object Methods in loops to display dynamically.
For Reference : Dynamic data added in custom TinyMCE Editor using AngularJs
This is how I did it
I used jQuery $.each to iterate through my objects, you could also use vanilla JavaScript
//register plugin to process context menu on a specific tag
tinymce.PluginManager.add('contextmenu-plugin', function (editor) {
var selectedCode
// Create a function which returns an array of items, these can be Submenus or Simple Items
var contextMenuItems = () => {
return [
{
type: 'submenu',
text: "Submenu 1",
getSubmenuItems: () => {
if (selectedCode){
var contextMenuItems = []
$.each( ArrayWithData, (index, data ) => {
contextMenuItems.push({
type: 'item',
text: `${data}`,
onAction: () => {
console.log("Clicked submenu option");
}
})
})
// return array of contextmenuitems -> this goes to the Submenu
return contextMenuItems
}
}
},
{
icon: 'remove',
text: 'Remove data',
onAction: () => {
console.log(`Removed data`)
}
}
}
]
}
// now register the contextmenu
editor.ui.registry.addContextMenu('contextmenu', {
update: function (element) {
//this way you can call contextMenuItems() every time you show the context menu
return (element.tagName == "your-condition" && element.className.includes("another condition") ) ? contextMenuItems() : ""
}
});
});
Im using this tool here http://craftpip.github.io/jquery-confirm/#dialog and i wanted to have a popup that has a variable amount of buttons based on a piece of data used to construct pop up.
Here is an example of what a very simple/empty one looks like.
$.confirm({
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
});
What i want is to be able to put a foreach loop in side of "buttons: { ... }".
Is there a way to do so or a way to achieve what i am trying to do?
Just build your options object before :
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {},
};
$.each( variable_name, function(){
options.buttons[ this.btn_name ] = this.fn;
} );
$.confirm( options );
Of course, everything depends on how the object you loop looks like, but the logic is here.
Your logic is inverted. The following is an object:
{
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
}
So you could do:
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
};
$.confirm(options);
You then can add items by
options.buttons["mybutton"] = function() { };
You can place the previous code in a loop and change the string "mybutton" to whatever you want for whatever functions you have. You're basically asking how to add a property to and existing javascript object.
A panel contains of 3 items. The last item has an event handler attache. In the handler a new item (widget) is added to the parent panel. Before adding a new item, an old item of the same xtype should be deleted.
Here is an example that does not work:
Ext.define('Retroplanner.view.dimension.DimensionMapping', {
extend: 'Ext.form.Panel',
defaultListenerScope: true,
items: [{
xtype: 'component',
html: '<h3> Dimension Mappings</h3>',
},{
xtype: 'bm-separator'
},{
xtype: 'siRemoteCombo',
...
listeners: {
'select': 'onSiRemoteCombo'
}
}
],
onSiRemoteCombo: function(cmb, rec, idx) {
var item;
for(item in this.items){
//here item - is undefined,
//although this.items.length=3, as expected
//alert(item.xtype);
//isXType is not defined for undefined element:
if (item.isXType('propGrid')) {
this.remove(item);
break;
}
}
//the following code works as expected, if the previous is commented
var dimensionMapping = Ext.widget('propGrid');
this.items.add(dimensionMapping);
this.updateLayout();
}
});
I tried to use index, but it also does not work:
Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
defaultListenerScope: true,
items: [{
xtype: 'component',
...
},{
xtype: 'bm-separator'
},{
xtype: 'siRemoteCombo',
...
listeners: {
'select': 'onSiRemoteCombo'
}
}
],
onSiRemoteCombo: function(cmb, rec, idx) {
//the following code does not remove item in GUI interface.
if (this.items.length == 4)
this.remove(this.items[3], true);
var dimensionMapping = Ext.widget('propGrid');
this.items.add(dimensionMapping);
this.updateLayout();
}
});
I would like to be able to remove item by xtype, without any id or other types of references. But if it is not possible, which is the best way to do it? To remove GUI component from its container.
Check out component queries. It allows you to search for ExtJS components based on their attributes, globally or from within a container.
For easy access to queries based from a particular Container see the
Ext.container.Container#query, Ext.container.Container#down and
Ext.container.Container#child methods. Also see Ext.Component#up.
For your case down or child are appropriate. Something like this:
this.remove(this.down('propGrid'))
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/27vh. Just select a value from the combo, and the grid will be removed.
To remove an item with the prodGrid xtype, try this:
onSiRemoteCombo: function(cmb, rec, idx) {
if (this.down('prodGrid'))
this.remove(this.down('prodGrid'))
var dimensionMapping = Ext.widget('propGrid');
this.items.add(dimensionMapping);
this.updateLayout();
}
I have a config list for buttons like this:
var config = [{
name: 'first',
insertionConfig: {
title: 'first button',
onsubmit: function(){
// do sth
}
}
},{
name: 'second',
insertionConfig: {
title: 'second button',
onsubmit: function(){
// do sth
}
}
}
]
and in my TinyMce plugin I want to add all buttons according to their config. So it would end up like this:
tinymce.PluginManager.add('myPlugin', function(editor, url) {
for (var i in config) {
item = config[i];
editor.addButton(item.name, {
text: item.name,
onclick: function() {
editor.windowManager.open({
title: item.insertionConfig.title,
onsubmit: item.insertionConfig.onsubmit
}
};
}
});
but when I click on first button, it shows the second button's title. all configs of buttons refer to last added button. I know problem is something about the 'item' in the loop (all buttons refer to same item object which is the last one) but I don't know how to fix it.
Try creating a locally scoped variable for item inside the onclick function:
The issue you are running into is how variables are managed in JavaScript at the time the function is actually run. The click function is not actually run until you click an item and at that time item is pointing to the last item in the array.
EDIT: Check out this TinyMCE Fiddle for how this may happen: http://fiddle.tinymce.com/REfaab/1
I have two items that should be visible only when a given observable evaluates to false, and one item that should be visible when the same item evaluates to true. It works fine if I only have two items whose visibility depends on the observable. However, when a third item is introduced, it stops working.
ViewModel:
var viewModel = {
editable: ko.observable(false),
edit: function () {
this.editable(true);
},
delete: function () {
this.editable(true);
},
cancel: function () {
this.editable(false);
},
save: function () {
this.editable(false);
}
};
ko.applyBindings(viewModel);
A fiddle is available here: http://jsfiddle.net/mupersan82/Y6eKS/10/
The fiddle is working. Uncomment one of the "button" items to see the problem.
Can anyone identify what the problem is?
Regards, Anders
delete is a Javascript operator and therefore a reserved word (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete). Renaming the function fixes it:
var viewModel = {
editable: ko.observable(false),
edit: function () {
this.editable(true);
},
remove: function () {
this.editable(true);
},
cancel: function () {
this.editable(false);
},
save: function () {
this.editable(false);
}
};
ko.applyBindings(viewModel);
(fiddle: http://jsfiddle.net/Y6eKS/11/)