「
フィールド (カスタムフィールド) の作成と利用 | PowerCMS X」の「可変長フィールドのカスタマイズ例」で紹介されているコードを基に改変すると、2つのリッチテキストエディタを持つフィールドを増減させることができます。リッチテキストエディタが初期化された要素をそのままコピーしても利用できないのでJavaScriptの改変も必要です。サンプルコード中のquestion
・answer
やID属性値は適宜変更してください。
- 不定数の値を受け取るコントロールのname属性値は、末尾に
_multi
を付与します
<div id="<mt:var name="field_uniqueid">-field">
<mt:if name="field.answer_multi">
<mt:ignore>入力済の場合</mt:ignore>
<mt:loop name="field.answer_multi" note="answerをループして出力">
<div class="<mt:var name="field_uniqueid">-field-block">
<div class="cf-editor-wrapper">
<mt:setvarblock name="question_value_access" note="questionの値を取得するための変数名を定義">field.question_multi[<mt:var name="__index__">]</mt:setvarblock>
<textarea id="<mt:var name="field_uniqueid">_question_<mt:var name="__index__">" rows="10" class="form-control richtext" name="question_multi"><mt:var name="$question_value_access" escape></textarea>
</div>
<div class="cf-editor-wrapper">
<textarea id="<mt:var name="field_uniqueid" />_answer_<mt:var name="__index__" />" rows="10" class="form-control richtext" name="answer_multi"><mt:var name="__value__" escape /></textarea>
</div>
<button type="button" class="right-small <mt:var name="field_uniqueid">-add <mt:unless name="__first__"> hidden</mt:unless>"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="button" class="right-small <mt:var name="field_uniqueid">-detach<mt:if name="__first__"> hidden</mt:if>"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</mt:loop>
<mt:else>
<mt:ignore>未入力の場合</mt:ignore>
<mt:setvarblock name="multi_editor_set_default_html">
<div class="<mt:var name="field_uniqueid">-field-block" id="<mt:var name="field_uniqueid">-field-wrapper">
<div class="cf-editor-wrapper">
<textarea id="<mt:var name="field_uniqueid">_question" rows="10" class="form-control richtext" name="question_multi"></textarea>
</div>
<div class="cf-editor-wrapper">
<textarea id="<mt:var name="field_uniqueid">_answer" rows="10" class="form-control richtext" name="answer_multi"></textarea>
</div>
<button type="button" class="right-small <mt:var name="field_uniqueid">-add"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="button" class="right-small <mt:var name="field_uniqueid">-detach hidden"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</mt:setvarblock>
<mt:var name="multi_editor_set_default_html" />
</mt:if>
</div>
<mt:ignore>フィールド追加時に利用するHTML(未入力の場合と同一HTML)</mt:ignore>
<template id="multi_editor_set">
<mt:var name="multi_editor_set_default_html" />
</template>
<script>
$(function() {
const getRandomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
const container = document.getElementById('<mt:var name="field_uniqueid">-field');
const template = document.getElementById('multi_editor_set');
$(document).on('click', '.<mt:var name="field_uniqueid">-add', function () {
const newField = template.content.cloneNode(true);
newField.querySelector('textarea').setAttribute('id', 'multi_editor_set_' + getRandomInt(100,999));
container.appendChild(newField);
tinymce.EditorManager.remove('textarea.richtext');
editorInit();
});
$(document).on('click', '.<mt:var name="field_uniqueid">-detach', function () {
if (!confirm('<mt:trans phrase="Are you sure you want to remove this field?">')){
return false;
}
$(this).parent().remove();
});
});
</script>