PowerCMS X Q&A

PowerCMS Xを用いてWebサイトを構築する際の技術的なヒントや解決策をご紹介します。

2つのリッチテキストエディタを持つフィールドを増減させることはできますか?

フィールド (カスタムフィールド) の作成と利用 | PowerCMS X」の「可変長フィールドのカスタマイズ例」で紹介されているコードを基に改変すると、2つのリッチテキストエディタを持つフィールドを増減させることができます。リッチテキストエディタが初期化された要素をそのままコピーしても利用できないのでJavaScriptの改変も必要です。サンプルコード中のquestionanswerや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>

関連するQ&A