为什么我的模式只在最后一个id值/项中显示微小的选项？

Question

我试图调用一个模式来编辑保存在我的数据库中的数据。“观测”字段使用tiny来格式化它的值。我也用树枝。但是，当我调用这个模式时，只有最后保存的数据(只有最后一个id项)显示了观测字段中的微小选项和格式。如果我试图调用另一个item/id，该模式将显示该值，但不使用tiny进行格式化。

这是模态码

{% for matriz in matrizes %}
<div class="modal fade " id="ModalEdit{{matriz.id}}" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header modal-header-primary">
        <h5 class="modal-title" id="TituloModalCentralizado">Editar Matriz</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ doc_root }}matriz/matriz-edit/{{ matriz.id }}" method="POST"  enctype="multipart/form-data">
        <div class="modal-body">
          <br>
          <div class="row">
             <div class="col-5"> 
                <div class="form-group">
                      <label for="title">Nome: </label>
                      <input type="text" name="name" id="name" value="{{ matriz.name }}" class="form-control">
                      <span class="errors">{{ errors.title }}</span>
                </div>
                <div class="form-group">
                      <label for="title">Senha: </label>
                      <input type="password" name="password" id="password" value="" class="form-control text-right" style="width: 200px;">
                      <span class="errors">{{ errors.password }}</span>
                </div>
                <br>
              </div>
              <div class="col-6 ml-5"> 
                    <div class="form-group">
                      <label for="article-content">Observação: </label>
                      <textarea name="observacao" id="matriz-observacao" class="form-control">{{ matriz.observacao | raw}}</textarea>
                      <span class="errors">{{ errors.observacao }}</span>
                    </div>
              </div>
          </div>
          <br>
          <br>
      {% if errors.message %}<div class="alert alert-danger">{{ errors.message }}</div>{% endif %}
        </div>
        <div class="modal-footer">
          <section class="text">
            <br>
            <input type="hidden" name="member_id" value="{{ session.id }}" />
            <input type="hidden" name="investimento_id" value="{{ session.investimento_id }}" />
            <span class="errors">{{ errors.member }}</span>
            <input type="submit" name="update" value="Salvar" class="btn btn-primary mr-2">
          </section>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}

我称之为这个剧本：

<script type="text/javascript">
  $('#ModalEdit{{matriz.id}}').on('shown.bs.modal', function () {
    alert("modal open");
    $('#meuInput').trigger('focus')
  })
</script>

用这个打电话给蒂尼：

  <script src="https://cdn.tiny.cloud/1/kwdb6s3lt2pbcfu9m220i0kok6vcr80w8se19hgmpv9jeaps/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    if (document.getElementById('matriz-observacao')){
      tinymce.init({
        menubar: false,
        selector: '#matriz-observacao',
        toolbar: 'bold italic link',
        plugins: 'link',
        target_list: false,
        link_title: false
      });
    }
  </script>

当一个模态被调用时，我应该做些什么来给所有的人显示微小的选项？

Answer 1

matriz.id id用于多个元素，我将将其更改为在所有输入字段id中包含{{matriz.id}}。对于tinymce，使用一个类作为选择器，因此它适用于该类的所有字段。

注意，我没有使用tinymce，所以如果类选择器不能工作，可以使用document.getElementsByClassName()和循环遍历所有字段。

{% for matriz in matrizes %}
<div class="modal fade " id="ModalEdit{{matriz.id}}" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header modal-header-primary">
        <h5 class="modal-title" id="TituloModalCentralizado">Editar Matriz</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ doc_root }}matriz/matriz-edit/{{ matriz.id }}" method="POST"  enctype="multipart/form-data">
        <div class="modal-body">
          <br>
          <div class="row">
             <div class="col-5"> 
                <div class="form-group">
                      <label for="name{{ matriz.id }}">Nome: </label>
                      <input type="text" name="name" id="name{{ matriz.id }}" value="{{ matriz.name }}" class="form-control">
                      <span class="errors">{{ errors.title }}</span>
                </div>
                <div class="form-group">
                      <label for="password{{ matriz.id }}">Senha: </label>
                      <input type="password" name="password" id="password{{ matriz.id }}" value="" class="form-control text-right" style="width: 200px;">
                      <span class="errors">{{ errors.password }}</span>
                </div>
                <br>
              </div>
              <div class="col-6 ml-5"> 
                    <div class="form-group">
                      <label for="matriz-observacao{{ matriz.id }}">Observação: </label>
                      <textarea name="observacao" id="matriz-observacao{{ matriz.id }}" class="form-control tinyField">{{ matriz.observacao | raw}}</textarea>
                      <span class="errors">{{ errors.observacao }}</span>
                    </div>
              </div>
          </div>
          <br>
          <br>
      {% if errors.message %}<div class="alert alert-danger">{{ errors.message }}</div>{% endif %}
        </div>
        <div class="modal-footer">
          <section class="text">
            <br>
            <input type="hidden" name="member_id" value="{{ session.id }}" />
            <input type="hidden" name="investimento_id" value="{{ session.investimento_id }}" />
            <span class="errors">{{ errors.member }}</span>
            <input type="submit" name="update" value="Salvar" class="btn btn-primary mr-2">
          </section>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}

微码

<script src="https://cdn.tiny.cloud/1/kwdb6s3lt2pbcfu9m220i0kok6vcr80w8se19hgmpv9jeaps/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    if (document.getElementsByClassName('tinyField').length > 0) {
      tinymce.init({
        menubar: false,
        selector: '.tinyField',
        toolbar: 'bold italic link',
        plugins: 'link',
        target_list: false,
        link_title: false
      });
    }
</script>