TinyMCEのオプションウィンドウにリピーターフィールドを追加することは可能ですか？
TinyMCEのeditor.addCommand/windowManager.open関数を使ってWordPress用のアコーディオンショートコードビルダーを作成しようとしています。ポップアップウィンドウ内に繰り返し可能な領域を追加して、アコーディオンアイテムごとにタイトルとテキスト領域を追加して、送信時に各アコーディオンアイテムのショートコードがこれら2つのパラメータ（タイトルとテキスト）で出力されるようにします。 -エリア）。
すなわち：
[アコーディオン] [アコーディオン項目のタイトル= ""]内容[/アコーディオン項目] [アコーディオン項目のタイトル= ""]内容[/アコーディオン項目] [アコーディオン項目のタイトル= ""]内容[/アコーディオン項目] [/アコーディオン]
これは私が作りたいアコーディオンボタンに似たパネルショートコードビルダーを使った私のmce-buttonのサンプルコードです。
(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 );
}
});
});
});
})();
アコーディオンショートコードビルダーの場合、フッターフィールドはタイトルに置き換えられ、タイプドロップダウンはなくなります。タイトルとコンテンツ領域は、繰り返したいセクションになります。
繰り返しフィールドを直接追加することはできませんでした（たとえば+ボタンを押します）が、エンドユーザーが次の画面で繰り返し可能な領域の数を設定するために数値フィールドを使用できる2ステッププロセスを作成できました：
ステップ1 - ショートコードを選択
ステップ2 - ショートコードビルダーステップ1/2
ステップ3 - ショートコードビルダーステップ2/2
ステップ4 - WYSIWYGエディタへのショートコード出力
コード：
(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 );
}
});
}
});
});
});
})();
その他の注意事項：
2番目のオプション画面では、autoScrollパラメーターを使用してスクロールバーを作成しましたが、WordPressではこれがTinyMCEスタイルと競合するため、このウィンドウでクラスを設定してcssを使用して表示を修正する必要がありました。問題があります。
/*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;
}
また、最初のポップアップウィンドウのnumberフィールドにjquery検証を使用しました。これは最もきれいなコードではありません、そして、私は他の誰かがこのウィンドウをターゲットにするより良い方法を見つけることができると確信しています、しかしこれは私が数字が入力されたことを検証するために現在使っているものです。
$(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);
}
});
だから、これだけですべてをカバーしています。さらに更新がある場合は、その時点でそれらを掲載します。うまくいけば、これは繰り返しフィールドソリューションを必要とし、私がここで示したことを改善できる何人かの人々を少なくとも助けるだろう。