Est-il possible d'ajouter un champ de répéteur à la fenêtre d'option de TinyMCE?
J'essaie de créer un générateur de shortcode accordéon pour WordPress à l'aide de la fonction editor.addCommand/windowManager.open de TinyMCE. J'aimerais pouvoir ajouter une région répétable dans la fenêtre contextuelle pour ajouter un titre et une zone de texte pour chaque élément accordéon, de sorte que, lors de la soumission, chaque code court d'élément accordéon est sorti avec ces 2 paramètres (titre et texte). -surface).
c'est à dire.:
[accordéon] [accordéon-item title = ""] contenu [/ accordéon-item] [accordéon-item title = ""] contenu [/ accordéon-item] [accordéon-item title = ""] contenu [/ accordéon-item] [/ accordéon]
Voici un exemple de code de mon bouton mce utilisant un générateur de shortcode de panneau similaire au bouton accordéon que je souhaite créer.
(function() {
tinymce.PluginManager.add('shortcode_mce_button', function( editor, url ) {
editor.addButton( 'shortcode_mce_button', {
tooltip: 'Add custom shortcode',
image: '/wp-content/plugins/wdst-shortcodes/public/images/shortcodes.gif',
type: 'menubutton',
menu: [
{
text: 'panel',
onclick: function() {
editor.execCommand('panel_shortcode_mce_button_popup','',{
header : '',
footer : '',
type : 'default',
content : '',
panelclass : ''
});
}
},
]
});
var panel_tag = 'panel'; //Add to the panel shortcode naming; in our case panel works fine.
//add panel popup
editor.addCommand('panel_shortcode_mce_button_popup', function(ui, v) {
//setup defaults
var header = '';
if (v.header)
header = v.header;
var footer = '';
if (v.footer)
footer = v.footer;
var type = 'default';
if (v.type)
type = v.type;
var content = '';
if (v.content)
content = v.content;
var panelclass = '';
if (v.panelclass)
panelclass = v.panelclass;
//open the popup
editor.windowManager.open( {
title: 'Panel Shortcode Builder',
body: [
{//add header input
type: 'textbox',
name: 'header',
label: 'Header',
value: header,
tooltip: 'Leave blank for none.'
},
{//add footer input
type: 'textbox',
name: 'footer',
label: 'Footer',
value: footer,
tooltip: 'Leave blank for none.'
},
{//add type select
type: 'listbox',
name: 'type',
label: 'Type',
value: type,
'values': [
{text: 'Default', value: 'default'},
],
tooltip: 'Select the type of panel you want.'
},
{//add content textarea
type: 'textbox',
name: 'content',
label: 'Content',
value: content,
multiline: true,
minWidth: 300,
minHeight: 100
},
{//add class input
type: 'textbox',
name: 'panelclass',
label: 'Class',
value: panelclass,
tooltip: 'Add custom classes to the panel wrapper.'
},
],
onsubmit: function( e ) { // when the ok button is clicked
//start the shortcode tag
var panel_str = '<p>[' + panel_tag + ' type="'+e.data.type+'" class="'+e.data.panelclass+'"]</p>';
//check for header
if (typeof e.data.header != 'undefined' && e.data.header.length)
panel_str += '<p>[' + panel_tag + '-header class=""][' + panel_tag + '-title class=""]' + e.data.header + '[/' + panel_tag + '-title][/' + panel_tag + '-header]</p>';
//add panel content
panel_str += '<p>[' + panel_tag + '-content class=""]' + e.data.content + '[/' + panel_tag + '-content]</p>';
//check for footer
if (typeof e.data.footer != 'undefined' && e.data.footer.length)
panel_str += '<p>[' + panel_tag + '-footer class=""]' + e.data.footer + '[/' + panel_tag + '-footer]</p>';
//start the shortcode tag
panel_str += '<p>[/' + panel_tag + ']</p>';
//insert shortcode to TinyMCE
editor.insertContent( panel_str );
}
});
});
});
})();
Pour le constructeur de shortcode accordéon, le champ de pied de page serait remplacé par le titre et la liste déroulante des types disparaîtra. Titre et zone de contenu seraient les sections que je voudrais répéter.
Je n'ai pas pu ajouter directement un champ répétitif (avec un bouton +, par exemple), mais j'ai pu créer un processus en 2 étapes permettant à l'utilisateur final d'utiliser un champ numérique pour définir le nombre de zones répétables sur l'écran suivant. :
Étape 1 - Sélectionnez le code court
Étape 2 - Constructeur de code court Étape 1/2
Étape 3 - Générateur de code court, étape 2/2
Étape 4 - Sortie du code court dans l'éditeur WYSIWYG
Code:
(function() {
tinymce.PluginManager.add('shortcode_mce_button', function( editor, url ) {
editor.addButton( 'shortcode_mce_button', {
tooltip: 'Add custom shortcode',
image: '/wp-content/plugins/wdst-shortcodes/public/images/shortcodes.gif',
type: 'menubutton',
menu: [
{
text: 'accordion',
onclick: function() {
editor.execCommand('accordion_shortcode_mce_button_popup','',{
type: 'default',
accordionclass: '',
numberofitems: '2',
});
}
},
]
});
var accordion_tag = 'accordion'; //Add to the accordion shortcode naming; in our case accordion works fine.
//add accordion popup
editor.addCommand('accordion_shortcode_mce_button_popup', function(ui, v) {
//setup defaults
var type = 'default';
if (v.type)
type = v.type;
var accordionclass = '';
if (v.accordionclass)
accordionclass = v.accordionclass;
var numberofitems = '';
if (v.numberofitems)
numberofitems = v.numberofitems;
//open the popup
editor.windowManager.open( {
title: 'Accordion Shortcode Builder (Step 1 of 2)',
classes: 'items-panel',
body: [
{//add type select
type: 'listbox',
name: 'type',
label: 'Type',
value: type,
minWidth:300,
'values': [
{text: 'Default', value: 'default'},
],
tooltip: 'Select the type of accordion you want.'
},
{//add class input
type: 'textbox',
name: 'accordionclass',
label: 'Class',
value: accordionclass,
minWidth:300,
tooltip: 'Add custom classes to the accordion wrapper.'
},
{//add class input
type: 'textbox',
name: 'numberofitems',
label: 'Number of Items',
value: numberofitems,
minWidth:300,
tooltip: 'Set the number of accordion items needed.'
},
],
onsubmit: function(e) { // when the ok button is clicked
var finaltype = e.data.type;
var finalclass = e.data.accordionclass;
var totalitems = e.data.numberofitems;
var generalFormItems = [];
for(var i = 1; i <= totalitems; i++)
{
generalFormItems.Push(
{
title: 'Accordion-Item '+i,
name:'item'+i,
type: 'form',
items:[
{
label: 'Accordion-Item ' +i,
name: 'itemhtml'+i,
type: 'container',
minWidth:300
},
{
label: 'Title',
name: String('title'+i),
type: 'textbox',
minWidth:300,
tooltip: 'Leave blank for none.'
},
{
label: 'Content',
name: 'content'+i,
multiline: true,
type: 'textbox',
minWidth:300
}]
})
}
win = editor.windowManager.open({
autoScroll: true,
minWidth: 600,
resizable: true,
classes: 'largemce-panel',
title: 'Insert Accordion-Items (Step 2 of 2)',
body: generalFormItems,
onsubmit: function( e ) { // when the ok button is clicked
//start the shortcode tag
var accordion_str = '<p>[' + accordion_tag + ' type="'+finaltype+'" class="'+finalclass+'"]</p>';
for(var i = 1; i <= totalitems; i++) {
var gettitle = String('e.data.title' + i);
var title = eval(gettitle);
var getcontent = String('e.data.content' + i);
var content = eval(getcontent);
accordion_str += '<p>[' + accordion_tag + '-header]';
accordion_str += '[' + accordion_tag + '-title]' + title + '[/' + accordion_tag + '-title]';
accordion_str += '[/' + accordion_tag + '-header]</p>';
accordion_str += '<p>[' + accordion_tag + '-content]' + content + '[/' + accordion_tag + '-content]</p>';
}
//start the shortcode tag
accordion_str += '<p>[/' + accordion_tag + ']</p>';
//insert shortcode to TinyMCE
editor.insertContent( accordion_str );
}
});
}
});
});
});
})();
Notes complémentaires:
Sur le deuxième écran d’options, j’ai utilisé le paramètre autoScroll pour créer une barre de défilement, mais dans WordPress, cela était en conflit avec leurs styles TinyMCE; je devais donc ajouter le paramètre 'classes' pour définir une classe dans cette fenêtre, puis css pour corriger l’affichage. problèmes.
/*Fix Accordion Window scroll effect*/
.mce-largemce-panel {
top: 22% !important;
max-height: 500px !important;
}
.mce-largemce-panel .mce-reset {
height: 500px !important;;
overflow: auto !important;
margin-left: -16px !important;
margin-right: -16px !important;
}
.mce-largemce-panel .mce-window-head {
margin-left: 16px !important;
margin-right: 16px !important;
}
.mce-largemce-panel .mce-foot {
margin-left: 15px !important;
}
J'ai également utilisé une validation jquery sur le champ numérique de la première fenêtre contextuelle. Ce n'est pas le code le plus joli, et je suis sûr que quelqu'un d'autre pourrait trouver un meilleur moyen de cibler cette fenêtre, mais c'est ce que j'utilise actuellement pour valider qu'un nombre a été saisi.
$(document).on('keyup', '.mce-items-panel .mce-reset .mce-container-body .mce-last .mce-container-body .mce-last .mce-container-body input.mce-last', function(event) {
var v = this.value;
if($.isNumeric(v) === false) {
//chop off the last char entered
this.value = this.value.slice(0,-1);
}
});
Donc, cela couvre à peu près tout. S'il y a d'autres mises à jour, je les posterai à ce moment-là. J'espère que cela aidera au moins certaines personnes qui ont besoin d'une solution répétée sur le terrain et peut améliorer ce que j'ai montré ici.