Develop Reference

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'
};
}
};
});

Adding Event listener to CKEDITOR plugin

I'm creating CKEDITOR plugin. Suppose, I have following:
CKEDITOR.plugins.add('internallink', {
icons: 'internallink',
toolbar: 'insert,100',
init: function (editor) {
editor.addCommand('internallink', new CKEDITOR.dialogCommand('internalLinkDialog'));
editor.ui.addButton('InternalLink', {
label: 'Internal link',
command: 'internallink',
toolbar: 'links'
});
CKEDITOR.dialog.add('internalLinkDialog', function (editor) {
return {
title: 'Internal link',
minWidth: 600,
minHeight: 400,
contents: [
{
id: 'tab-main',
label: 'Select page',
elements: [
{
type: 'select',
id: 'page_tree',
label: 'Select page',
items: [[1],[2],[3]],
},
]
}
],
};
});
}
});
I want a tooltip to appear while hovering one of select options.
How can I insert event listener for this?

option element doesn't have onMouseOver event.
That's it )

tinymce, get input field value from dialog box with click button on the main window

I know, no one uses tinymce in this site. Because I asked 2 question before related tinymce. No one visited the pages. But again, I have a problem. I coded like this:
editor.addButton('site_link', {
icon: 'fa-heart',
tooltip: 'Internal link',
onclick: function() {
editor.windowManager.open({
file : url + '/link.php',
width : 500,
height : 200,
title: 'Internal link',
buttons: [
{
text: "Get Link",
classes: 'widget btn primary',
id: "link",
onclick: function() {
var link = $('#bag_link').val();
alert(link);
}
},
{
id: "close",
text: 'Kapat',
onclick: 'close'
}
]
});
}
});
And the "link.php" page is like this:
When click "Get Link" button, I want to get values form elements which located in the "link.php". But I did not manage it. Could you help me ? How can I do this?

I had to wrestle through this too, but i came up with something like this.
Instead of calling the windowmanager i had the following inside the onclick function:
function showDialog()
{
var var1, var2;
// do whatever you need here
var win = tinymce.ui.Factory.create({
type: 'window',
layout: "flex",
pack: "center",
align: "center",
onClose: function() {
ed.focus();
},
onSubmit: function(e) {
var x,y,z;
e.preventDefault();
// read Field!!!!!
x = win.find('#my_content_field').value();
// Do whatever you need here
// Dialog schließen
win.close();
},
onPostRender: function(){
ed.my_control = this;
},
buttons: [
{
text: "Paste",
onclick: function() {
win.submit();
}},
{
text: "Cancel",
name: 'cancel',
disabled: false,
onclick: function() {
win.close();
}}
],
title: 'my title',
items: {
type: "form",
padding: 20,
labelGap: 30,
spacing: 10,
items: [
{
type: 'textbox',
multiline: true,
name: 'my_content_field',
value: 'standard text'
}
]
}
}).renderTo().reflow();
};

JTable jquery, Close Child button

I am using Jtable (Jquery based).
I have some trouble with the child table.
In the child table I added a new button in the toolbar.
With this new button in the toolbar, che close icon disappear, how can I fix it?
(if I remove the toolbar element the X of close button is correctly displayed).
$('#ListHeader').jtable({
title: 'ExpensesAccounts' ,
actions: {
listAction: function (postData, jtParams) {
return getListDataHeader();
}
},
fields: {
ID:{
key: true,
list:false
},
Details: {
title: '',
width: '5%',
sorting: false,
edit: false,
saveUserPreferences: false,
create: false,
display: function (headerData) {
//Create an image that will be used to open child table
var $img = $('<img src="../Images/viewDetails.png" width="20p" height="20p" title="View Details" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ListHeader').jtable('openChildTable',
$img.closest('tr'),
{
title: headerData.record.Title + ' - Row' ,
saveUserPreferences: false,
paging: true,
pageSize: 3,
showCloseButton:true,
toolbar: {
items: [{
icon: '../scripts/jtable/themes/metro/add.png',
text: 'Add New Row',
click: function (headerID) {
window.location = "InsertRow.aspx";
}
}]
},
actions: {
listAction: function (postData, jtParams) {
return getListDataRow(headerData.record.ID, jtParams.jtStartIndex, jtParams.jtPageSize);
//return { "Result": "OK", "Records": [] };
},
deleteAction: function (postData) {
return deleteItem(postData, 'Expense Account Rows');
}
},
fields: {
HeaderID: {
type: 'hidden',
defaultValue: headerData.record.ID
},
ID: {
key: true,
create: false,
edit: false,
list: false
},
Title: {
title: 'Title',
width: '20%'
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
Title: {
title: 'Title'
},
Status: {
title: 'Status',
width: '8%'
}
}
});
$('#ListHeader').jtable('load');
Thanks,
Nk

how to add function handler in extjs 3.4 panel items

. when i run and click on Icon button then it is not able to call function func_1(); nothing is appear. on the screen
Ext.onReady(function () {
function func_1() {
//some functionality
}
new_win = new Ext.Panel({
renderTo: Ext.getBody(),
activeItem: 0,
tbar: {
items: [{
text: 'List',
ref: '../prevButton',
disabled: true,
handler: function () {
new_win.getLayout().setActiveItem(0);
new_win.prevButton.disable();
new_win.nextButton.enable();
}
}, '-', {
text: 'Icon',
ref: '../nextButton',
handler: function () {
new_win.getLayout().setActiveItem(1);
new_win.prevButton.enable();
new_win.nextButton.disable();
}
}]
},
items: [{
html: 'hello'
}, {
handler: function () {
func_1();
}
}]
});
});
can you please tell me how to call func_1(); or handler in panel items ?

There is no need to call the function from within anonymous function you can refer to it directly from the handler.
for example:
tbar: {
items: {
xtype: 'toolbar',
style: 'border:0;',
items: [{
xtype: 'buttongroup',
items: [{
id: 'btnAddItem',
text: 'Add Item',
icon: 'images/icons/add-icon.png',
handler: add_item
}]
}]
}
},
...
function add_item(){
}

You should create a global variable and then you can see the scope within the handler like this:
Ext.onReady(function () {
var me = this;
function func_1() {
//some functionality
}
new_win = new Ext.Panel({
renderTo: Ext.getBody(),
activeItem: 0,
tbar: {
items: [{
text: 'List',
ref: '../prevButton',
disabled: true,
handler: function () {
new_win.getLayout().setActiveItem(0);
new_win.prevButton.disable();
new_win.nextButton.enable();
}
}, '-', {
text: 'Icon',
ref: '../nextButton',
handler: function () {
me.func_1();
new_win.getLayout().setActiveItem(1);
new_win.prevButton.enable();
new_win.nextButton.disable();
}
}]
},
items: [{
html: 'hello'
}, {
handler: function () {
func_1();
}
}]
});