Develop Reference

javascript array push values in TinyMCE editor plugin

I'm working on a plugin for TinyMCE editor. The idea is very simple, basically the user can insert a product link from a dropdown selecter where a custom class and a link to the page of the product are automatically added.
I get data from an array like this one:
function products_list() {
return array(
array('product-tag-1' => 'Product 1', 'https://website.com/product1-page'),
array('product-tag-3' => 'Product 2', 'https://website.com/product2-page'),
array('product-tag-3' => 'Product 2', 'https://website.com/product3-page'),
);
}
and here is the plugin code:
(function() {
var _products_list = [];
for(var i = 0; i < products_list.length; i++){
var product = _products_list[i];
_products_list.push({ product: Object.values(product)[1], url: Object.values(product)[0], tag: Object.keys(product)[1]});
console.info(_products_list);
}
tinymce.PluginManager.add('product_link', function( editor, url ) {
editor.addButton( 'product_link', {
text: 'Product Link',
icon: false,
onclick: function() {
editor.windowManager.open( {
title: 'Select a Product',
body: [{
type: 'listbox',
name: 'productSelect',
values: _products_list,
onPostRender: function( ){
productSelect = this;
}
},
{type: 'textbox', name: 'linkText', label: 'anchor text'}
],
onsubmit: function( e ) {
link = editor.insertContent('' + e.data.linkText + '');
}
});
}
});
});
})();
But when I select something it returns this error in console : 'Uncaught Typerror: productSelect.url is not a function'.
Any hint?
Tried to debug code but nothing worked.

How can I detect onChange event in TinyMCE custom plugin it?

I'm trying to develop a custom TinyMCE plugin which will load the items for a selectbox list based on the options of another selectbox list. However, I cannot figure out how to detect any even on the selectbox list.
The documentation is almost entirely useless, as it provides no mention of custom plugin options - only the boilerplate code to start off.
How can I detect an onchange event when the select lists's selection is altered?
tinymce.PluginManager.add('custom', function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: 'Custom',
body: {
type: 'panel',
items: [
{
type: 'selectbox',
name: 'options',
label: 'Options',
items: [
{text: 'Primary', value: 'primay style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
onchange: function() {
alert('hi');
},
flex: true,
}, {
type: 'selectbox',
name: 'selection',
label: 'Selection',
items: [
],
flex:true,
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'submit',
text: 'Save',
primary: true
},
],
onSubmit: function (api) {
var data = api.getData();
/* Insert content when the window form is submitted */
editor.insertContent(data);
api.close();
}
});
};
/* Add a button that opens a window */
editor.ui.registry.addButton('custom', {
text: 'Custom',
onAction: function () {
/* Open window */
openDialog();
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration
*/
editor.ui.registry.addMenuItem('custom', {
text: 'Custom',
onAction: function() {
/* Open window */
openDialog();
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: function () {
return {
name: 'Example plugin',
url: 'http://exampleplugindocsurl.com'
};
}
};
});

JSTree: move all child nodes

I'm using JSTree, and this is my setup for the contextmenu plugin:
"contextmenu":{
"items": function($node) {
return {
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Delete group",
"action": function (obj) {
$tree.jstree("get_children_dom", $node).each(function(child){
$tree.jstree("move_node", $tree.jstree("get_node", child, true), "#", "last", function(node, parent, pos){
alert(1);
});
});
$tree.jstree("delete_node", $node);
}
}
};
}
}
basically, I want the children of the group that's being deleted to be moved upwards. The function I've currently got should place the nodes at the end, but how can I place them on the deleted node's place? Also, the current code doesn't work - what am I doing wrong?
Last but not least, how can I check the node type before removing?
Thanks in advance

basically, I want the children of the group that's being deleted to be moved upwards.
If by upwards you mean get into the position of the node that got deleted, check the following example:
var data = [{
'text': 'item 1',
'children': [{
text: 'item 1-1',
children: [{
text: 'item 1-1-1',
children: [{
text: 'item 1-1-1-1'
}, {
text: 'item 1-1-1-2'
}]
}, {
text: 'item 1-1-2'
}, {
text: 'item 1-1-3'
}]
}, {
text: 'item 1-2',
children: [{
text: 'item 1-2-1'
}, {
text: 'item 1-2-2'
}]
}, {
text: 'item 1-3',
children: [{
text: 'item 1-3-1'
}, {
text: 'item 1-3-2'
}]
}, {
text: 'item 1-4',
children: [{
text: 'item 1-4-1'
}, {
text: 'item 1-4-2'
}]
}]
}, {
'text': 'item 2',
children: [{
text: 'item 2-1',
children: [{
text: 'item 2-1-1'
}, {
text: 'item 2-1-2'
}]
}, {
text: 'item 2-2',
children: [{
text: 'item 2-2-1'
}, {
text: 'item 2-2-1'
}]
}, {
text: 'item 2-3'
}]
}, {
'text': 'item 3',
children: [{
text: 'item 3-1',
children: [{
text: 'item 3-1-1'
}, {
text: 'item 3-1-2'
}]
}, {
text: 'item 3-2'
}]
}, {
'text': 'item 4 (you cannot delete this one)',
'disableDelete': true,
children: [{
text: 'item 4-1'
}, {
text: 'item 4-2'
}, {
text: 'item 4-3'
}]
}];
var $tree = $('#jstree_demo').jstree({
'plugins': ['contextmenu'],
'core': {
'animation': 0,
'check_callback': true,
'themes': {
'stripes': true
},
'data': data
},
'contextmenu': {
'items': function($node) {
return {
'Remove': {
'separator_before': false,
'separator_after': false,
'label': 'Delete group',
'action': function(obj) {
if ($node.original.disableDelete) {
document.write('deletion is forbidden for this node');
return;
}
var nodes = $node.children.slice(0); // jstree behaves erratic if we try to move using $node.children directly, so we will clone the array to prevent this issue
var $row = $(obj.reference[0].closest('li'));
$tree.jstree('move_node', nodes, $node.parent, $row.index());
$tree.jstree('delete_node', $node);
}
}
};
}
}
});
<div id="jstree_demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
Last but not least, how can I check the node type before removing?
I´ve added a small sample to show you how you can accomplish it. Check the declaration of a custom attribute disableDeletion to a node:
var data = [{'text': 'item 4 (you cannot delete this one)', 'disableDelete': true}]
And the validation in the context menu action:
if ($node.original.disableDelete) {
document.write('deletion is forbidden for this node');
return;
}

how to create on click event after drilldown

I have following drilldown with highcharts.
Where I need to put on click event if I would need to forward to url after drilldown?
http://jsfiddle.net/w6kmxnrc/
drilldown: {
series: [{
name: 'Computer',
id: 'blend.exe',
data: [
['daa', 1] ]
},
{
name: 'Computer',
id: 'chrome.exe',
data: [
['duu', 1] ]
}
]
}
});
});

Yep, add an events object in your drilldown.series objects.
example:
events: {
click: function (event) {
console.log('blend drilldown clicked');
}
}
jsfiddle: http://jsfiddle.net/w6kmxnrc/1/
Check the console when you click on them.
Read more here

List Component: How to detect which item was selected?

I can access a list (as a container of items) in a controller but I do not know how to access list items properties.
How to create the correct ComponentQuery rule? I tried 'list > item' but it does not work.
Each item has it's title but I get 'undefined' as output in selectSection.
Ext.define( 'UGP.controller.BeginList',
{
extend: 'Ext.app.Controller',
config:
{
views: [ 'BeginList' ],
control:
{
'list':
{
select: 'selectSection'
}
}
},
selectSection: function()
{
Ext.Msg.alert( 'title=' + this.title );
}
}
);
The BeginList.js with the list component:
Ext.define( 'UGP.view.BeginList',
{
extend: 'Ext.List',
config:
{
fullscreen: true,
itemTpl: '{title}',
data:
[
{ title: 'Chapter 1', id: 0, action: "selectSection" },
{ title: 'Chapter 2', id: 1, action: "selectSection" },
{ title: 'Chapter 3', id: 2, action: "selectSection" },
{ title: 'Chapter 4', id: 3, action: "selectSection" }
]
}
}
);

You can see in the select event documentation that it passes arguments. So you can change the signature of your selectSection function to this :
selectSection: function (list, record) {
Ext.Msg.alert( 'title=' + record.get( 'title' ) );
}
You can also take a look at the itemTap event which usually the one used to detect tap events on a list item.
Hope this helps