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=".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>
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./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>
- did you make sure ckEditor.js is loaded before using getEditor – user9405863 Commented Apr 19, 2018 at 12:13
- try this .. <script type="text/javascript" src="{{ asset('themes/ckeditor/ckeditor.js') }}"></script> – user9405863 Commented Apr 19, 2018 at 12:14
- I tried this .. <script type="text/javascript" src="{{ asset('themes/ckeditor/ckeditor.js') }}"></script> . but it not worked. – user9562562 Commented Apr 19, 2018 at 12:20
1 Answer
Reset to default 1You 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./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./ckeditor4/latest/api/CKEDITOR.html#method-replace