1

PHP генерирует таблицу (выборка текстовых публикаций), в каждой строке таблицы кнопка РЕДАКТИРОВАТЬ. По клику на кнопку копируется её атрибут, он же является ID строки в базе. Открывается модальная форма, в которой инициализируем CKEDITOR по id поля textarea.

После закрытия модальной формы и попытки кликнуть на кнопку другой строки в отладчике браузера выкидывает ошибку: Uncaught The editor instance "идентификатор поля textarea" is already attached to the provided element

Необходимо по событию: модальная форма закрыта (без перезагрузки страницы, обработчик событий имеется в коде) удалять полностью "старый" редактор и при клике на другую кнопку генерировать полю textarea новый ID, а по нему и CKEDITOR. Всё уже реализовано, кроме удаления CKEDITOR. Попытался разобраться в его API, но знаний не хватило...

Сейчас модальная форма не открывается по клику на другие кнопки...

введите сюда описание изображения

$('.intent_edit').click(function() {

  var $this = $(this);
  var int_edit = $this.attr('data-name');
  var $id_desc = 'desc-' + int_edit;
  var $ch_desc = document.getElementById('change_description');
  
  // Инициализируем скрипт модальной формы
  var modal = UIkit.modal('#modal_intent_change');
  if (modal.isActive()) {
    modal.hide();
  } else {
    modal.show();
  }
  
  // Инициализируем редактор
  CKEDITOR.replace($ch_desc);

  // Обработчик событиий модального окна: открыто/закрыто
  $('#modal_intent_change').on({

    /*'show.uk.modal': function(){ },*/

    'hide.uk.modal': function() {
      // Вот таким путём пока решаю проблему - просто перезагружаю страницу
      window.location.reload(); 
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
  <!-- поля таблицы -->
  <td width="80px">
    <!-- это кнопка РЕДАКТИРОВАТЬ -->
    <i class="intent_edit" data-name="<!-- ID строки -->"></i>
  </td>
</tr>

<div id="modal_intent_change">
  <form id="" action="" method="POST">
    <h3>ВНЕСИТЕ ИЗМЕНЕНИЯ</h3>
    <div>
      <label>Наименование </label>
      <input type="text" name="change_title" />
    </div>
    <div>
      <label>Ссылка</label>
      <input type="text" name="change_link" />
    </div>
    <div>
      <label>СУММА</label>
      <input type="text" name="change_summ" </div>
      <textarea id="change_description" name="change_description"></textarea>
      <input type="submit" class="md-btn" value="ЗАКРЫТЬ">
      <input type="submit" class="md-btn" value="ДОБАВИТЬ" name="changing_intent">
  </form>
  </div>

1
  • пожалуйста отметьте решением подходящий ответ, для этого нажмите на серую галку слева от ответа, галка станет зеленой и вопрос не будет отображаться в не отвеченных, а другие участники будут видеть, что именно является решением на Ваш вопрос.
    – Alex
    27 фев 2018 в 8:14

2 ответа 2

0
if (CKEDITOR.instances.$ch_desc) 
CKEDITOR.instances.$ch_desc.destroy();
1
  • Да уж сам разобрался. Отметил правильное решение выше. Ваш пример не совсем подошёл, но спасибо за участие. 19 мар 2017 в 5:00
0

Всё таки разобрался сам. Выкладываю рабочий код, может кому пригодится:

$('.intent_edit').click(function() {

    var $this     = $(this);
    var id_intent = $this.attr('data-name');
    var url       = 'cb/modules/public/cb_handler.php';
    var $id_desc  = 'desc-'+id_intent;
    var $ch_desc  = $('.change_description');
    $ch_desc.attr('id', $id_desc);
    $ch_desc.attr('name', $id_desc);
    
    create();

    var modal = UIkit.modal('#modal_intent_change');
    if ( modal.isActive() ) {
        modal.hide();
    } else {
        modal.show();
    }
    $('#modal_intent_change').on({
        /*'show.uk.modal': function(){
        },*/
        'hide.uk.modal': function () {
           //window.location.reload();
            destroy();
        }
    });
    function create() {
        var ckredactor = CKEDITOR.instances[$id_desc];
        if (ckredactor) {
            ckredactor.destroy();
        }
        ckredactor = CKEDITOR.replace($id_desc);
    }
    function destroy(){
        var ckredactor = CKEDITOR.instances[$id_desc];
        if (ckredactor) {
            ckredactor.destroy();
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
  <!-- поля таблицы -->
  <td width="80px">
    <!-- это кнопка РЕДАКТИРОВАТЬ -->
    <i class="intent_edit" data-name="<!-- ID строки -->"></i>
  </td>
</tr>

<div id="modal_intent_change">
  <form id="" action="" method="POST">
    <h3>ВНЕСИТЕ ИЗМЕНЕНИЯ</h3>
    <div>
      <label>Наименование </label>
      <input type="text" name="change_title" />
    </div>
    <div>
      <label>Ссылка</label>
      <input type="text" name="change_link" />
    </div>
    <div>
      <label>СУММА</label>
      <input type="text" name="change_summ" </div>
      <textarea class="change_description" cols="30" rows="20">&nbsp;</textarea>
      <input type="submit" class="md-btn" value="ЗАКРЫТЬ">
      <input type="submit" class="md-btn" value="ДОБАВИТЬ" name="changing_intent">
  </form>
  </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.