Я использую 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/
Не понимаю, почему это не такработает.