In a web app I'm using tinymce and I have to auto click a button.
This is the code:
$scope.tinymceOptions = {
theme: "modern",
skin: "light",
resize: false,
setup: function(ed) {
ed.addButton('mybutton', {
title : 'My button',
image : 'quill.png',
onclick : function() {
$scope.openDialog();
}
});
}
};
How can I call the 'onclick' method?
I know this is an old question but I had this same issue with tinyMCE 4, and couldn't get any of the solutions above to work. This worked for me:
tinyMCE.activeEditor.buttons.charmap.onclick();
So for example I was trying to create a custom menu in a plugin that included some built in commands:
tinymce.PluginManager.add('myplugin', function(editor) {
editor.addButton('mymenu', {
type: 'menubutton',
text: 'Insert',
icon: false,
menu: [
{
text: 'Special Character',
icon: 'charmap',
onclick: function() { editor.buttons.charmap.onclick(); }
}
]
});
});
Related
Here is an example code that I have: https://jsfiddle.net/delux123/c9tj1ywa/15/.
Clicking over the button Alert, triggers an alert box:
function alertMethod() {
alert("test alert 1");
}
Now I wonder if it's possible to add such a custom actions, using the stock-tools? In the code above, I defined a new button customAnnotation in the stock tools
Highcharts.setOptions({
lang: {
stockTools: {
gui: {
customAnnotation: 'Custom action'
}
},
navigation: {
popup: {
customAnnotation: 'Action config'
}
}
}
});
Highcharts.stockChart('container', {
...
stockTools: {
gui: {
enabled: true,
buttons: [ 'customAnnotation' ],
definitions: {
customAnnotation: {
className: 'highcharts-custom-annotation',
symbol: 'text.svg'
},
}
}
},
navigation: {
bindings: {
customAnnotation: {
start: function(e) {
alert("test alert 2");
}
}
}
},
...
What I want to do is to trigger the alertMethod when clicking on this new custom button (in the stock tools). I wonder, is such a customization possible?
You need to add className and init properies, example:
stockTools: {
gui: {
enabled: true,
buttons: ['customAnnotation'],
definitions: {
customAnnotation: {
className: 'highcharts-custom-annotation',
symbol: 'text.svg'
},
}
}
},
navigation: {
bindings: {
customAnnotation: {
className: 'highcharts-custom-annotation',
init: function(e) {
alert("test alert 2");
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/3s25vq8m/
API Reference: https://api.highcharts.com/highstock/navigation.bindings
I resolved this by adding the event on chart load:
chart: {
events: {
load: function() {
document.querySelectorAll('.highcharts-custom-annotation')[0]
.addEventListener(
'click',
alertMethod
)
}
},
},
Full code is here.
I am wanting to just display an icon instead of using text on the tabstrip tabs (the titles of the tab, not the content that pops up when you press the tab).
I have this tabstrip:
$('#filterTabStrip').kendoTabStrip({
//animation: false,
collapsible: true,
dataTextField: 'text',
dataImageUrlField: 'imageUrl',
dataContentField: 'content',
dataSource: [
{
text: 'Users',
//imageUrl: $('#user_tab_image').html(),
content: $('#user_filter_template').html()
},
{
text: 'Location',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#location")}'
content: $('#location_filter_template').html()
},
{
text: 'Description',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/action-sprite/svg/symbols.svg#description")}'
content: $('#description_filter_template').html()
},
{
text: 'Type',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#picklist")}'
content: $('#type_filter_template').html()
},
{
text: 'Custom',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#apps")}'
content: $('#user_filter_template').html()
}
]
});
I have attempted to use static resource URL as well as setting the svg image in an html template, then setting the imageURL to that template, but that didn't work either.
I am hoping this is possible. Thank you for any help.
You can probably try to have an empty text for the dataTextField and provide the imageUrl of the icon which needs to show up. Something similar to this might help!
I am currently struggling to get a FancyBox popup to work with a few embedded tinyMCE text areas. I have looked all over the internet, including pretty much every post on here and remain unsuccessful.
The FancyBox will load correctly and display the multiple tinyMCE text areas (the button toolbars all display correctly). The problem is that it will not actually display any text in the textboxes, and the actual text box is not editable.
My tinyMCE init code is:
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Cause",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,code,separator,radspell",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none"
});
And my call to FancyBox is:
$('#PopupAdd').fancybox({
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
I have tried nearly every variation of the above code I can think of. If anyone has any new ideas as to how to approach this, it would be greatly appreciated!
Update:
My HTML is:
<lcmp:LittleButton ID="AddStatusButton" Tooltip="Add a new Status." OnClick="addStatusPopup(); return false;" />
Which creates a button that when clicked calls
function addStatusPopup()
{
$('#PopupAdd').trigger('click');
}
I had exactly the same problem. What worked for me was to run the tinyMce.init after the FancyBox opened.
I don't see how your loading the embedded text areas (inline, ajax, iframe?) but try adding a "type"
$('#PopupAdd').fancybox({
titlePosition: 'none',
type: 'iframe' // Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
Not seeing a fiddle or example makes it difficult but one could do a manual call like this:
$("#PopupAdd").click(function() {
$.fancybox({
href: '#PopupAdd',
type: 'inline',
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
});
All the above code looks complicated to me, keep things simple and use this tutorial - WordPress TinyMCE Editor Tips | How to Add Custom Buttons, Styles, Dropdowns & Pop-ups. All the working code examples are there to download and customise as well.
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/
The snippet below will add a "popup" to your tinyMCE editor .
'
(function() {
tinymce.PluginManager.add('gavickpro_tc_button', function( editor, url ) {
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Custom Headline',
onclick: function() {
editor.windowManager.open( {
title: 'Insert h3 tag',
body: [{
type: 'textbox',
name: 'title',
label: 'Your title'
}],
onsubmit: function( e ) {
editor.insertContent( '<h3>' + e.data.title + '</h3>');
}
});
}
}'
The user clicks the button for my plugin.
Dialog pops up that has some textboxes, etc.
Inside that dialog, the user can click a button , and a color picker will pop up, letting the user choose which color he wants.
Today I had the same problem. Here is my solution, which is practically a copy-paste from the TableCell plugin from CKEditor 4.2. Hope it helps
CKEDITOR.dialog.add( 'myDialog', function( editor ) {
return {
title: 'Add Data',
minWidth: 300,
minHeight: 200,
contents: [
{
id: 'dataTab',
label: 'Line',
title: 'Line',
elements: [
...
{
type: "hbox",
padding: 0,
widths: ["80%", "20%"],
children: [
{
id: 'linecolor',
type: 'text',
label: 'Line color',
setup: function( element ) {
...
},
commit: function( element ) {
...
}
},
{
type: "button",
id: "lineColorChooser",
"class": "colorChooser",
label: "Choose",
style: "margin-left: 8px",
onLoad: function () {
this.getElement().getParent().setStyle("vertical-align", "bottom")
},
onClick: function () {
editor.getColorFromDialog(function (color) {
color && this.getDialog().getContentElement("dataTab", "linecolor").setValue( color );
this.focus()
}, this)
}
}
]
},
...
]
}
],
};
});
Use the following color picker plugin; attached to an input[type="text"] field in your CKEditor form:
http://jscolor.com/
This implementation is different in that the user does not need to click a button to select a color. The color selection is triggered when the user focuses into the appropriate field.
How do I fire an event when a tab is loaded in Sencha Touch? I want to AJAX in some content that isn't important enough to be loaded immediately, and Sencha Touch seems to miss the autoLoad property of ExtJS.
What can I bind to on a panel to detect that the panel has been activated?
You can listen for the event activate in the panel itself or for the event cardswitch in the TabPanel.
The cardswitch event only fires after the first card has been set, so if you want an action to trigger on initialization, add a listener for the activate event on the TabPanel.
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
//
// Listen for cardswitch event in TabPanel
//
listeners: {
cardswitch: function(comp, newCard, oldCard, index, animated) {
console.log(newCard.title, oldCard.title, index, animated);
}
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 & Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1',
//
// Listen for activate event in panel
//
listeners: {
activate: function(comp){
console.log(comp.title);
//
// Ajax Request
//
Ext.Ajax.request({
url: 'your_url_here.json',
success: function(response, opts) {
//
// Update panel html with ajax response
//
comp.update(response.responseText);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
}
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user'
}]
});
}
});
More info on the Sencha Touch Docs:
http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabPanel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel