Как я могу инициализировать CKEditor с загруженными Ajax формами? - PullRequest
0 голосов
/ 25 октября 2019

Я использую ckeditor, и на моей главной странице он работает хорошо:

https://ckeditor.com/

<script src="{{ asset('js/ckeditor.js') }}"></script>
  <script>
    ClassicEditor
      .create( document.querySelector( '.editor' ), {
        // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
      } )
      .then( editor => {
        window.editor = editor;
      } )
      .catch( err => {
        console.error( err.stack );
      } );
  </script>

 <textarea class="editor"></textarea>

Проблема в том, что у меня есть форма, которая загружается через ajax. И я пытаюсь инициализировать форму, когда вызов ajax сделан. Но это просто не работает. Поле textarea не преобразуется в редактор:

  function forms(e, el) {
  var uuid = $(el).attr("data-id");
   $.ajax({
      method:'POST',
      data: {
        "id": id,
      },
      url: $link.attr('href')
    }).done(function(data){
         $('.form-output').html(data.output);
         $('.select2').select2();
         ClassicEditor
         .create( document.querySelector( '.editor' ), {
         // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
         })
        .then( editor => {
          window.editor = editor;
          } )
         .catch( err => {
         console.error( err.stack );
        });
    });

Я также пробовал это:

  $.ajax({
      beforeSerialize:function($Form, options){
        /* Before serialize */
        for ( instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement();
        }
        return true;
    },
      method:'POST',
      data: {
        "id": id,
      },
      url: $link.attr('href')
    }).done(function(data){
            $('.form-output').html(data.output);
             $('.select2').select2();
     });
   });

Не сработало также.

Другой подход заключается в следующем:

<script src="{{ asset('js/ckeditor.js') }}"></script>
<script src="{{ asset('js/adapters/jquery.js') }}"></script>


   $.ajax({
          method:'POST',
          data: {
            "id": id,
          },
          url: $link.attr('href')
        }).done(function(data){
               $('.form-output').html(data.output);
               $('.select2').select2();
               $('.editor').ckeditor();
         });
       });

Также не работает.

Как описано здесь, это должно быть так просто:

https://ckeditor.com/blog/CKEditor-for-jQuery/

Не понимаю, почему это не такработает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...