Блог

Я пытаюсь обновить старую версию CKEditor до новой версии CKEditor 5. Я заменил старую библиотеку JavaScript и все остальное на новую. Проблема, возникающая сейчас, заключается в том, что новому редактору требуется каждый раз несколько кликов, чтобы отправить данные на серверную часть.

Вот код формы

 <form id="answer_question" action="../../backend/answer_question?post_id=409" method="POST">

        <div class="answer-text-area">

          <textarea name="answer_content" id="editor"></textarea>

        </div>

        <div class="post-answer">

          <button class="post-answer-button" id="submit">Submit Answer</button>

        </div>
 

Вот почтовый индекс Ajax

  $("#submit").click( function() {
    for ( instance in CKEDITOR.instances )
    {
      CKEDITOR.instances[instance].updateElement();
    }
$("#ack").html('<img src="images/Spinner-1s-200px.gif" width="50px" height="50px">');
$.post( $("#answer_question").attr("action"),
        $("#answer_question :input").serializeArray(),
    function(info) {
    $("#ack").empty();
    $("#ack").html(info);
    if(info == "Answer Posted")
    {
        location.reload();
    }
    });
$("#answer_question").submit( function() {
    return false; 
});
});
 

Вот код CKEditor

 ClassicEditor
        .create( document.querySelector( '#editor' ), {
            
            toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'link',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'codeBlock',
                        'highlight',
                        'imageUpload',
                        'code',
                        'blockQuote',
                        'insertTable',
                        'mediaEmbed'
                    ]
                },
                simpleUpload: {
                    // The URL that the images are uploaded to.
                    uploadUrl: '../upload.php'
                },
        language: 'en',
        codeBlock: {
            languages: [
                // Do not render the CSS class for the plain text code blocks.
                { language: 'plaintext', label: 'Plain text', class: '' },

                // Use the "php-code" class for PHP code blocks.
                { language: 'php', label: 'PHP', class: 'php-code' },

                // Use the "js" class for JavaScript code blocks.
                // Note that only the first ("js") class will determine the language of the block when loading data.
                { language: 'javascript', label: 'JavaScript', class: 'js javascript js-code' },

                // Python code blocks will have the default "language-python" CSS class.
                { language: 'python', label: 'Python' }
            ]
        },
        image: {
            toolbar: [
                'imageTextAlternative',
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side'
            ]
        },
            licenseKey: '',
            
            
            
        } )