I am using anglarjs TinyMCE editor, https://www.tinymce.com/docs/integrations/angularjs/, here, I added custom dropdown button in toolbox, and Its working fine when I used static value,but I don't know actually how can I loaded dynamic data value in this dropdownlist.
setup : function ( editor ) {
editor.addButton( 'customDrpdwn', {
text : 'Customers List',
type: 'menubutton',
icon : false,
menu: [
{
text: 'Customer 1',
onclick: function(){
alert("Clicked on Customer 1");
}
},
{
text: 'Customer 2',
onclick: function(){
alert("Clicked on Customer 2");
}
}
]
});
},
};
I try myself to load dynamic value in Menu text field, but I'm getting error. After dynamic loading my code like this -
$scope.customerList = ['Customer 1','Customer 2'];
setup : function ( editor ) {
editor.addButton( 'customDrpdwn', {
text : 'Customers List',
type: 'menubutton',
icon : false,
for(var i =0; i< $scope.customerList.length; i++){
menu: [
{
text: $scope.customerList[i],
onclick: function(){
alert("Clicked on Customer 1");
}
}
]
}
});
}
Now, my question is that, this is possible to load dynamic data in this custom field. If so then how can I load data dynamically? Please help me.
here is one way to do this:
$scope.customerList = ['Customer 1','Customer 2'];
// first make all the menu items
var menuItems = [];
$scope.customerList.forEach(function(customer, index){
item = {
'text': customer,
onclick: function(){
alert("Clicked on " + customer);
}
};
menuItems.push(item);
});
$scope.tinymceOptions = {
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code | customDrpdwn',
setup: function(editor){
editor.addButton( 'customDrpdwn', {
text : 'Customers List',
type: 'menubutton',
icon : false,
menu: menuItems // then just add it here
});
}
};
Related
I am trying to get the click event of the tinymce custom button while building a plugin.
My code snippet looks like:
const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
Can Anyone help me with this?
I tried reading the tinymce docs where it clearly states onAction is a way to go but it is still not working
const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
});
tinymce.PluginManager.add('yourparams', function(editor, url) {
editor.addButton('your_button_name', {
text: 'Open Dialog',
icon: false,
onclick: function() {
openDialog();
}
});
});
TinyMCE plugin defined using tinymce.PluginManager.add(), this method add new button in editor toolbar with respect to editor.addButton() method, onclick open the OpenDialog() function when you clicked on it.
I am trying to create toolbar button in TinyMCE with options that are derived from the array. I've followed the examples on Tiny's website and the button is getting generated as expected. Here is the code:
var mergeFields = {one: "first", two: "second", three: "third"};
tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: 'mergefields',
setup: function (editor) {
editor.ui.registry.addMenuButton('mergefields', {
text: 'Merge Fields',
fetch: function (callback) {
var items = [];
for (var fieldName in mergeFields) {
var menuItem = {
type: 'menuitem',
text: mergeFields[fieldName],
onAction: function() {
// The problem: this function always inserts the last element of the array
// instead of the expected fieldName associated with this menuItem
editor.insertContent(fieldName);
},
};
items.push(menuItem);
}
callback(items);
},
});
}
});
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=XXXXX"></script>
<textarea>Editor</textarea>
The problem happens when one of the options is selected and the anonymous function assigned to onAction property is executed -- it always inserts "three" into the document (presumably because after running through the whole array, fieldName is set to "three"). How can I make the onAction handler insert the right value into the document?
This needs to work in TinyMCE 5.
I've found a similar question here: Adding custom dropdown menu to tinyMCE and insert dynamic contents, but it was referring to TinyMCE 4 and unfortunately the provided answer does not work for TinyMCE 5.
Thanks for your help!
I had the same problem.
I solved it using value+onSetup
https://jsfiddle.net/stvakis/tjh7k20v/8/
var mergeFields = {
one: "first",
two: "second",
three: "third"
};
tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: 'mergefields',
setup: function(editor) {
editor.ui.registry.addMenuButton('mergefields', {
text: 'Merge Fields',
fetch: function(callback) {
var items = [];
for (var fieldName in mergeFields) {
var menuItem = {
type: 'menuitem',
text: mergeFields[fieldName],
value:fieldName,
onSetup: function(buttonApi) {
var $this = this;
this.onAction = function() {
editor.insertContent($this.data.value);
};
},
};
items.push(menuItem);
}
callback(items);
},
});
}
});
I building a sortable table in Meteor with Reactive-Table and having trouble getting my delete button to work for removing entries from the table.
Please see my javascript code below:
Movies = new Meteor.Collection("movies");
if (Meteor.isClient) {
Template.body.events({
"submit .new-movie": function (event) {
var title = event.target.title.value;
var year = event.target.year.value;
var genre = event.target.genre.value;
Movies.insert({
title: title,
year: year,
genre: genre
});
event.target.title.value = "";
event.target.year.value = "";
event.target.genre.value = "0";
return false;
}
});
Template.moviestable.events({
"click .deletebtn": function (event) {
Movies.remove(this._id);
}
});
Template.moviestable.helpers({
movies : function () {
return Movies.find();
},
tableSettings : function () {
return {
showFilter: false,
fields: [
{ key: 'title', label: 'Movie Title' },
{ key: 'year', label: 'Release Year' },
{ key: 'genre', label: 'Genre' },
{ key: 'edit', label: 'Edit', fn: function () { return new Spacebars.SafeString('<button type="button" class="editbtn">Edit</button>') } },
{ key: 'delete', label: 'Delete', fn: function () { return new Spacebars.SafeString('<button type="button" class="deletebtn">Delete</button>') } }
]
}
}
});
}
Can anyone tell me what I'm doing wrong?
In the reactive tables docs, there's an example of how to delete rows from the table. Adapting the example in the docs for your needs, your event should look like this:
Template.moviestable.events({
'click .reactive-table tbody tr': function (event) {
event.preventDefault();
var objToDelete = this;
// checks if the actual clicked element has the class `deletebtn `
if (event.target.className == "deletebtn") {
Movies.remove(objToDelete._id)
}
}
});
The problem you are having is that you are trying to find the _id property on the button click instead of the row click.
If you do console.log(this) on your button click event (as you have it in your question above) you will get something like this Object {key: "delete", label: "", fieldId: "2", sortOrder: ReactiveVar, sortDirection: ReactiveVar} which does not contain the property _id
It is easier to register the row click, where the row object is the actual document you are trying to delete, and then check if the event's target has the delete class you added.
I am using w2ui. I have a toolbar with one button. This button has the icon-image "icon-delete".
When I click on the button, I want it to change the icon-image to "icon-add", but my code doesn't work.
toolbar: {
items: [{
type: 'button',
id: 'hide',
caption: 'Menü',
img: 'icon-delete'
}],
onClick: function (target, data) {
if (target == 'hide') {
this.items.img('icon-add');
}
}
}
You can use toolbar.set() method to update toolbar button icon. So in your onClick event do the following:
onClick: function (target, data) {
this.set(target, { icon: 'new_icon' });
}
See more here: http://w2ui.com/web/docs/w2toolbar.set
I created a hidden button "show" with the "icon-add" image.
when the button "hide" is clicked, it get hidden and the button "show" get shown.
toolbar: {
name: 'toolbar',
items: [
{ type: 'button', id: 'hide', caption: 'Menü', img: 'icon-delete' },
{ type: 'button', id: 'show', hidden: 'true', caption: 'Menü', img: 'icon-add' }
],
onClick: function (target, data) {
if (target == 'hide' ) {w2ui['layout'].toggle('left', window.instant);
this.hide('hide');
this.show('show');
}
if (target == 'show' ) {w2ui['layout'].toggle('left', window.instant);
this.hide('show');
this.show('hide');
}
}
}
I think you were missing the refresh line in your original approach. Here is an example that worked for me. I added an else part
if (event.target == 'hide') {
if (this.items[0].icon == 'icon-delete') {
this.items[0].icon = 'icon-add';
//do something code
} else {
this.items[0].icon = 'icon-delete';
//do something else code
}
w2ui['toolbar'].refresh('hide');
}
How to disable the delete button using if condition in Extjs for ex;i want to disable the button if it satifies the given if condition else remain enabled.
if(validAction(entityHash.get('entity.xyz'),actionHash.get('action.delete')))
This is the grid Delete button code.
Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{
xtype: 'tbspacer', width: 5
});
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
//text: 'Delete',
cls: 'ad-img-button',
width:61,
height:40,
iconCls: 'ad-btn-icon',
icon: '/webapp/resources/images/btn_del.png',
handler:function(){
statusChange(this.parentBar.parentGrid, 'Delete')
}
});
create actioncolumn and make custom renderer:
{
xtype: 'actioncolumn',
width: 38,
renderer: function (val, metadata, record) {
this.items[0].icon = '${CONTEXT_PATH}/images/' + record.get('fileType') + '.png';
this.items[0].disabled = !record.get('isDownloadActionEnable');
this.items[1].disabled = !record.get('isDeleteActionEnable');
metadata.style = 'cursor: pointer;';
return val;
},
items: [
{
icon: '${CONTEXT_PATH}/images/pdf.png', // Use a URL in the icon config
tooltip: 'Download',
handler: function (grid, rowIndex, colIndex) {
//handle
}
},
{
icon: '${CONTEXT_PATH}/images/delete.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
handle
}
}
]
}
in this example You see additionally how to change dynamically icon.
One way to solve it is to attach a unique ID to your delete button and bind a listener to the selectionchange event of your SelectionModel, whenever the selection changes you can check whatever you want and enable/disable the button as you see fit.
ie.
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
id: 'btnDelete',
cls: 'ad-img-button',
...
});
and in your selectionmodel do something like this :
var sm = new Ext.grid.CheckboxSelectionModel({
...
,listeners: {
'selectionchange' : {
fn: function(sm) {
if (sm.hasSelection()) {
var selected = sm.getSelected();
if (selected.get('field') == value) {
Ext.getCmp('btnDelete').disable();
}
else {
Ext.getCmp('btnDelete').enable();
}
}
}
,scope: this
}
}
});