How can I add or associate data to a custom menu button in TinyMCE? My code goes like this:
tinyMCE.init({
selector: 'textarea',
toolbar: " example",
setup: function (ed) {
ed.addButton('example', {
type: 'menubutton',
title: 'Insert Latest Newsletter Link',
icon: false,
text: 'Insert Latest Newsletter Link',
menu: [{text: "Insert Link", onclick: function () {
//this is where i want to retrieve data that
//i associated with my button
} }]
});
}
The solution is by using 'value' in the menu object like:
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Menu item I',
value: 'Text from menu item I',
onclick: function() {
editor.insertContent(this.value());
}
}
]
});
menu:[[object1],[object2],[object3]]
displays the object1,object2, object3 in custom button menu
Related
I added two classes by table_class_list, but every time I create a table I have to open the advanced settings, choose the class, and save. Without that it doesn't use any class and is unformatted.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_class_list: [
{ title: 'None', value: '' },
{ title: 'No Borders', value: 'table_no_borders' },
{ title: 'Red borders', value: 'table_red_borders' },
{ title: 'Blue borders', value: 'table_blue_borders' },
{ title: 'Green borders', value: 'table_green_borders' }
]
});
I want the first class to always be selected by default, without me having to open the settings and hit save.
Have a menu on Ionic action sheet and we need to set more two option to share the content, one icon to share using email and other whatsapp.
Has anyone made a menu with an icon like that?
Now, it is like this
The code
async menu(channelId: any, title: any) {
const actionSheet = await this._ActionSheetController.create({
backdropDismiss: false,
header: title,
buttons: [
{
icon: 'mail-outline',
handler: () => {}
},
{
icon: 'logo-whatsapp',
handler: () => {}
},
{
text: this._TranslocoService.translate('channel.FollowedChannelsPage.stopFollowChannel'),
icon: 'person-remove-outline',
handler: () => {
this.stopFollow(channelId)
}
},
{
text: this._TranslocoService.translate('others.close'),
icon: 'close',
role: 'destructive'
}
]
});
await actionSheet.present();
}
I am trying to incorporate input text and radio button in one alert dialog box. I have three options and if the user chose the third option, an input text will appear and the user needs to type something.
I've searched on the internet but I can't find something that can help me with this. I hope someone can help me with this.
Here is my code and the sample output.
let alert = this.alertCtrl.create({
title: 'Select one?',
message: "Please select one or enter something",
inputs: [
{
type: 'radio',
label: 'Option 1',
value: 'Option 1',
},
{
type: 'radio',
label: 'Option 2',
value: 'Option 2',
},
{
type: 'radio',
label: 'Other Option',
value: 'Other Option',
},
{
type: 'text',
placeholder: 'Enter other option',
}
],
buttons: [
{
text: 'Submit',
handler: (data: any) => {
console.log(data);
}
}
]
});
alert.present();
Here is the current output of my code.
You can't have different types of input inside ionic AllertController.
You should use Modal Controller with formBuilder and then you can customize form as you want
Following example is add a custom dropdown to tinyMCE, is it possible to change again after init tinyMCE? for example, after init the tinyMCE, update the list again by another button by different list.
https://codepen.io/tinymce/pen/JYwJVr
tinymce.init({
selector: 'textarea',
height: 500,
toolbar: 'mybutton',
menubar: false,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
setup: function (editor) {
editor.addButton('mybutton', {
type: 'listbox',
text: 'My listbox',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: 'Menu item 1', value: ' <strong>Some bold text!</strong>' },
{ text: 'Menu item 2', value: ' <em>Some italic text!</em>' },
{ text: 'Menu item 3', value: ' Some plain text ...' }
],
onPostRender: function () {
// Select the second item by default
this.value(' <em>Some italic text!</em>');
}
});
}
});
I didn't find any choice that I can update only for the custom dropdown. This is not what good way but the only way I can make it work. So what I did was remove tinymce and re-add it again.
tinymce.remove();
tinymce.init({
selector: 'textarea',
setup: function (editor) {
var self = this;
editor.addButton('mybutton', {
type: 'listbox',
text: 'myList',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: newList,
onPostRender: function () {
// Select the second item by default
this.value(' <em>Some italic text!</em>');
}
});
}
});
I'm trying to show sap.m.Select when dialog pop up. And my dialog is opening when I press a button. So I create sap.m.Dialog dynamically when user press the button. Here how I create my dialog in controller in buttonPress function:
that = this;
var dialog = new Dialog({
id : 'reasonDialog',
title: 'Reason',
type: 'Message',
content: [
that.reasonTypeSelect,
new TextArea('id1Textarea', {
width: '100%',
maxLength: 100,
placeholder: 'Enter a reason explanation'
})
],
beginButton: new sap.m.Button({
text: 'Confirm',
press: function () {
MessageToast.show('Succesfully confirmed');
dialog.close();
}
}),
endButton: new sap.m.Button({
text: 'Cancel',
press: function () {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
and I'm creating that.reasonTypeSelect in onAfterRendering function as below :
var oItemSelectTemplate = new sap.ui.core.Item({
key : "{key}",
text : "{value}"
});
this.reasonTypeSelect= new sap.m.Select({ id: 'selectReasonTypeId',
width:'100%',
change:'handleReasonTypeSelect'
});
this.reasonTypeSelect.setModel(this.getView().getModel());
this.reasonTypeSelect.bindAggregation("items", "/ReasonTypeList", oItemSelectTemplate);
Here I can see the Select but there is no items in it.
Seems you model is not visible from the dialog component, try setting your model
oDialog.setModel(yourModel);
If it doesn't work try to do it in the "onAfterRendering" callback.
onAfterRendering: function() {
var oDialog = sap.ui.getCore().byId("reasonDialog");
oDialog.setModel(this.getView().getModel("YourModel"));
}