CKEditor 4 getEditor not working

Question

When the page loads the editor does not appear. The javascript console shows the following error "Uncaught TypeError: Cannot read property 'getEditor' of undefined "

ckeditor.js:347 Uncaught TypeError: Cannot read property 'getEditor' of undefined

at a (ckeditor.js:347)

at Object.CKEDITOR.replace (ckeditor.js:351)

at submit-information:793

My load jquery page is follow line:

<script src="{{ asset('themes/js/jquery.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<script src="{{ asset('themes/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('themes/js/bootstrap-toggle.min.js') }}"></script>
<script src="{{ asset('themes/ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace('body' ,{
filebrowserUploadUrl : '/admin/panel/upload-image',
filebrowserImageUploadUrl :  '/admin/panel/upload-image'
});
</script>
<script type="text/javascript" src="{{ asset('themes/js/jquery.smartWizard.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){

        // Toolbar extra buttons
        var btnFinish = $('<button ></button>').text('Final')
            .addClass('btn btn-info')
            .on('click', function(){
                if (!$(this).hasClass('disabled')){
                    var elmForm = $("#schools");
                    if(elmForm){
                        elmForm.validator('validate');
                        var elmErr = elmForm.find('.has-error');
                        if(elmErr && elmErr.length > 0){
                            alert('Oops we still have error in the form');
                            return false;
                        }else{
                            alert('Great! we are ready to submit form');
                            elmForm.submit();
                            return false;
                        }
                    }
                }
            });
        var btnCancel = $('<button></button>').text('Cancel')
            .addClass('btn btn-danger')
            .on('click', function(){
                $('#smartwizard').smartWizard("reset");
                $('#schools').find("input, textarea").val("");
            });



        // Smart Wizard
        $('#smartwizard').smartWizard({
            selected: 0,
            theme: 'dots',
            transitionEffect:'fade',
            toolbarSettings: {toolbarPosition: 'bottom',
                toolbarExtraButtons: [btnFinish, btnCancel]
            },
            anchorSettings: {
                markDoneStep: true, // add done css
                markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
                removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
                enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
            }
        });

        $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
            var elmForm = $("#form-step-" + stepNumber);
            // stepDirection === 'forward' :- this condition allows to do the form validation
            // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
            if(stepDirection === 'forward' && elmForm){
              //elmForm.validator('validate');
                var elmErr = elmForm.children('.has-error');
                if(elmErr && elmErr.length > 0){
                    // Form validation failed
                    return false;
                }
            }
            return true;
        });

        $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
            // Enable finish button only on last step
            if(stepNumber == 3){
                $('.btn-finish').removeClass('disabled');
            }else{
                $('.btn-finish').addClass('disabled');
            }
        });

    });
</script>
<script src="{{ asset('themes/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('themes/js/bootstrap-datepicker.fa.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $("#birthdate").datepicker();
        $("#datepicker1btn").click(function(event) {
            event.preventDefault();
            $("#datepicker1").focus();
        });
    });
</script>

Answer 1

You need to call below code after the textarea has been loaded. Please see the source code of this sample (there is a link at the bottom of the page): https://sdk.ckeditor.com/samples/classic.html

CKEDITOR.replace('body' ,{
filebrowserUploadUrl : '/admin/panel/upload-image',
filebrowserImageUploadUrl :  '/admin/panel/upload-image'
});

NOTE: I hope that 'body' is an id for textarea or div because replace method can only be used on these two tags. You can't use it on body tag. Please see: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#method-replace