API TinyMCE v4 windowManager.open - Quels widgets puis-je configurer pour l'option body?
Je voudrais remplir le corps d'une boîte de dialogue modale avec du HTML personnalisé, généré par Javascript.
la documentation de cette méthode est généralement vide.
Je n'ai trouvé que des exemples pour
- chargement d'un fichier externe ou
- ajout d'une zone de texte .
Existe-t-il une documentation pour les types disponibles? Plus précisément, existe-t-il un type pour ajouter un balisage général au corps d'une boîte de dialogue à partir d'une variable Javascript?
Après avoir embelli la version minifiée de tinymce, j'ai trouvé que cela pouvait être certains des types de corps de windowManager.open. Je ne sais pas comment les utiliser tous, car toutes ces informations ont été recueillies lors des essais et échouent. La documentation étant vraiment mauvaise, aucune information réelle ne peut être collectée. Voici également un lien qui contient de bonnes informations sur la case à cocher.
Il m'a fallu environ une heure pour vérifier et tester tout, donc j'espère vraiment que cela vous évitera de le faire vous-même.
LE: paramètres de zone de texte: tableau des paramètres de zone de texte https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.textbox/
LE2: vous pouvez essayer de parcourir tous les éléments tinymce.ui. * Mentionnés ci-dessous et vérifier s'il a un tableau de paramètres, je pense qu'il peut être utilisé comme paramètre valide pour le corps s'ils l'ont
LE3: c'est l'ancienne documentation http://archive.tinymce.com/wiki.php/api4:index , car elle est plus utile que la nouvelle c'est la seule documentation disponible actuellement https://www.tinymce.com/docs/api/
{
type : 'listbox',
name : 'listbox',
label : 'listbox',
values : [
{ text: 'Test1', value: 'test1' },
{ text: 'Test2', value: 'test2' },
{ text: 'Test3', value: 'test3' }
],
value : 'test2' // Sets the default
},
{
type : 'combobox',
name : 'combobox',
label : 'combobox',
values : [
{ text: 'Test', value: 'test' },
{ text: 'Test2', value: 'test2' }
]
},
{
type : 'textbox',
name : 'textbox',
label : 'textbox',
tooltip: 'Some Nice tooltip to use',
value : 'default value'
},
{
type : 'container',
name : 'container',
label : 'container',
html : '<h1>container<h1> is <i>ANY</i> html i guess...<br/><br/><pre>but needs some styling?!?</pre>'
},
{
type : 'tooltip',
name : 'tooltip',
label : 'tooltip ( you dont use it like this check textbox params )'
},
{
type : 'button',
name : 'button',
label : 'button ( i dont know the other params )',
text : 'My Button'
},
{
type : 'buttongroup',
name : 'buttongroup',
label : 'buttongroup ( i dont know the other params )',
items : [
{ text: 'Button 1', value: 'button1' },
{ text: 'Button 2', value: 'button2' }
]
},
{
type : 'checkbox',
name : 'checkbox',
label : 'checkbox ( it doesn`t seem to accept more than 1 )',
text : 'My Checkbox',
checked : true
},
{
type : 'colorbox',
name : 'colorbox',
label : 'colorbox ( i have no idea how it works )',
// text : '#fff',
values : [
{ text: 'White', value: '#fff' },
{ text: 'Black', value: '#000' }
]
},
{
type : 'panelbutton',
name : 'panelbutton',
label : 'panelbutton ( adds active state class to it,visible only on hover )',
text : 'My Panel Button'
},
{
type : 'colorbutton',
name : 'colorbutton',
label : 'colorbutton ( no idea... )',
// text : 'My colorbutton'
},
{
type : 'colorpicker',
name : 'colorpicker',
label : 'colorpicker'
},
{
type : 'radio',
name : 'radio',
label : 'radio ( defaults to checkbox, or i`m missing something )',
text : 'My Radio Button'
}
Google pour cette question, j'ai trouvé ne réponse :
editor.windowManager.open({
title: 'My dialog',
body: [{
type: 'container',
html: "Hello world!"
}]
});
J'ai trouvé cette façon de spécifier le corps du dialogue modal:
var dialogBody = '<p>Whatever you want here</p>';
editor.windowManager.open({
title: 'Dialog Title',
html: dialogBody,
buttons: [{
text: 'Do Action',
subtype: 'primary',
onclick: function() {
// TODO: handle primary button click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});