CKEDITOR - HELP!

Question

I’m learning PHP and I’m trying to include Ckeditor in a modal in which information comes through javascript, but Ckeditor doesn’t apply to the textarea that comes from javascript, doesn’t show error or anything. And in other textarea that does not come from javascript it usually applies.

Button that drives the modal

<div class='btnEditNoticia view_data_edit' id='1'><a href='#'><i class='far fa-edit'></i></a></div>

Javascript that brings the modal information

//visualizar informações para editar
    $(document).ready(function(){
        $(document).on('click', '.view_data_edit', function(){
            var noticia_id = $(this).attr("id");
            if(noticia_id !== ''){
                var dados = {
                    noticia_id: noticia_id
                };
                $.post('/editar/vis_edit_noticia.php', dados, function(retorna){
                            //Carregar o conteúdo para o usuário
                            $("#visul_noticia").html(retorna);
                            $('#ModalEditarNoticia').modal('show'); 
                        });
            }
        })

    });

Modal:

<div class="modal fade" id="ModalEditarNoticia" tabindex="-1" role="dialog" aria-labelledby="ModalEditarNoticia" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="EditarNoticia">Editar Notícia</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="POST" action="/editar/edit_noticia" enctype="multipart/form-data">
                        <div class="modal-body">
                            <span id="visul_noticia"></span>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
                            <input type="submit" name="btnEditNoticia" class="btn btn-danger" value="Editar">
                        </div>
                    </form>
                </div>
            </div>
        </div>

Page containing modal data

$resultado_noticia = '';
    
    $query_noticia = "SELECT * FROM tbl_noticias WHERE id = '" . $_POST['noticia_id'] . "' LIMIT 1";
    $result_noticia = mysqli_query($conn, $query_noticia);
    $row_noticia = mysqli_fetch_assoc($result_noticia);
    
    $resultado_noticia .= '<div class="form-group">';
    $resultado_noticia .= '<label for="noticia" class="control-label">Título</label>';
    $resultado_noticia .= '<input type="text" name="tituloNoticia" class="form-control" id="tituloNoticia" value="'.$row_noticia['titulo'].'">';
    $resultado_noticia .= '</div>';

    $result_categoria = "SELECT * FROM tbl_categorias_noticias ORDER BY nome ASC";
    $resultado_categoria = mysqli_query($conn, $result_categoria);

    $resultado_noticia .= '<div class="form-group">';
    $resultado_noticia .= '<label for="categoria_noticia" class="control-label">Categoria</label>';
    $resultado_noticia .= '<select class="form-control" name="categoria_noticia_id" id="categoria_noticia_id">';
    while ($row_categoria_n = mysqli_fetch_assoc($resultado_categoria)) {
        //verifica se possui a variavel categoria id e associa ela ao id da categoria para ficar selecionado quando o úsuario for editar
        if (($row_noticia['categoria_id']) AND ($row_noticia['categoria_id'] == $row_categoria_n['id'])) {
            $resultado_noticia .= "<option value='".$row_categoria_n['id']."' selected>".$row_categoria_n['nome']."</option>";
        //caso não venha a informação da variavel aparece as opções
        }else{
            $resultado_noticia .= "<option value='".$row_categoria_n['id']."'>".$row_categoria_n['nome']."</option>";
        }
    }   
    $resultado_noticia .='</select>';
    $resultado_noticia .= '</div>';


    $result_tp_noticia = "SELECT * FROM tbl_tipo_ident ORDER BY nome ASC";
    $resultado_tp_noticia = mysqli_query($conn, $result_tp_noticia);

    $resultado_noticia .= '<div class="form-group">';
    $resultado_noticia .= '<label for="categoria_noticia" class="control-label">Tipo</label>';
    $resultado_noticia .= '<select class="form-control" name="tipo_noticia_id" id="tipo_noticia_id">';
    while ($row_tp_noticia = mysqli_fetch_assoc($resultado_tp_noticia)) {
        //verifica se possui a variavel categoria id e associa ela ao id da categoria para ficar selecionado quando o úsuario for editar
        if (($row_noticia['tipo_noticia_id']) AND ($row_noticia['tipo_noticia_id'] == $row_tp_noticia['id'])) {
            $resultado_noticia .= "<option value='".$row_tp_noticia['id']."' selected>".utf8_encode($row_tp_noticia['nome'])."</option>";
        //caso não venha a informação da variavel aparece as opções
        }else{
            $resultado_noticia .= "<option value='".$row_tp_noticia['id']."'>".utf8_encode($row_tp_noticia['nome'])."</option>";
        }
    }   
    $resultado_noticia .='</select>';
    $resultado_noticia .= '</div>';
    
    $resultado_noticia .= '<div class="form-group">';
    $resultado_noticia .= '<label for="noticia" class="control-label">Notícia</label>';
    $resultado_noticia .= '<textarea class="form-control" name="textoEdit" id="textoEdit" rows="15" maxlength="2000">';
    $resultado_noticia .= $row_noticia['texto'];
    $resultado_noticia .= '</textarea>';
    $resultado_noticia .= '<span class="caracteres">2000</span> caracteres Restantes <br>';
    $resultado_noticia .= '</div>';

    $resultado_noticia .= '<input name="noticia_id" type="hidden" class="form-control" id="noticia_id" value="'.$row_noticia['id'].'">';

    
    echo $resultado_noticia;

Javascript Ckeditor

<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
//editor de text area CKEDITOR
    ClassicEditor
    .create( document.querySelector( '#textoEdit' ), {
        toolbar: [ 'bold', 'italic', 'undo', 'redo', 'numberedList', 'bulletedList' ],
    } )
    .catch( error => {
        console.log( error );
    } );

Answer 1

Dear,

Considering what you described, I believe that the initialization of the Ckeditor is occurring prior to the loading of the data. That is, when you try to initialize, this element does not exist (as it will still be loaded via AJAX).

To resolve, you need to put the Ckeditor boot after searching the database. Considering your code, try the following:

//visualizar informações para editar
    $(document).ready(function(){
        $(document).on('click', '.view_data_edit', function(){
            var noticia_id = $(this).attr("id");
            if(noticia_id !== ''){
                var dados = {
                    noticia_id: noticia_id
                };
                $.post('/editar/vis_edit_noticia.php', dados, function(retorna){
                            //Carregar o conteúdo para o usuário
                            $("#visul_noticia").html(retorna);
                            //aqui já existem os dados e elementos buscados, portanto...
                            // ... é possível chamar o CKEditor
                            // IMPORTANTE: Lembre-se de corrigir o seletor abaixo ('#textoEdit') para o elemento adequado
                            ClassicEditor
                                .create( document.querySelector( '#textoEdit' ), {
                                    toolbar: [ 'bold', 'italic', 'undo', 'redo',                                                                                     'numberedList', 'bulletedList' ],
                                } )
                                .catch( error => {
                                    console.log( error );
    } );
                            $('#ModalEditarNoticia').modal('show'); 
                        });
            }
        })

    });