Как добавить динамические trix-редакторы в HTML? - PullRequest
Новая
       35

Как добавить динамические trix-редакторы в HTML?

0 голосов
/ 11 февраля 2019

У меня есть следующий trix-редактор на моей HTML-странице.Мне нужно получить дополнительные редакторы trix, нажав на кнопку.Поэтому я клонирую весь родительский div редактора trix.Проблема заключается в том, что после добавления нового редактора трикс тексты не реагируют на кнопки редактирования на каждой панели инструментов трикс, но все редакторы трикс отвечают на первую панель инструментов трикс.Как я могу это исправить? 

$(".new").on("click", function(){
  $(".main").append($(".sub:last").clone(true));
});
.sub {
  width : 50%;
}
.new {
  margin-top : 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.0.0/trix.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.0.0/trix.css"/>

<div class="main">
  <div class="sub">
    <input type="hidden" class="form-control change_name clear_value hidden_trix_val" name="faq_question_1" id="faq_question_1" placeholder="Enter city subtitle" value="">
    <trix-editor input="faq_question_1" placeholder="Enter City subtitle" class="trix-bg clear_value">
    </trix-editor>
  </div>
</div>

<button class="new">Add new</button>
...