<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" onkeyup="val()"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>
<script>
CKEDITOR.replace( 'editor1' );
function val()
{
var a = CKEDITOR.instances['editor1'].getData();
if(a!==null || a!==""){
document.getElementById("nxtbtnwht1").disabled = false;
}
else
{
document.getElementById("nxtbtnwht1").disabled = true;
}
}
</script>
</body>
</html>I have ckeditor 4 in one page. On page, submit button is by default disabled I want to put validation on ckeditor4 textarea on check whether it is empty or not if it is empty put button as disabled and if some text is in ckeditor textarea then button should be visible. So How can I Do it with Javascript?
Ckeditor Textarea code:
<textarea cols="10" id="editor1" name="editor1" rows="10" onchange="val()"></textarea>
Submit Button Code:
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>
Javascript code:
function val()
{
var a = CKEDITOR.instances['editor1'].getData();
if(a!==null || a!==""){
document.getElementById("nxtbtnwht1").disabled = false;
}
else{
document.getElementById("nxtbtnwht1").disabled = true;
}
}
You may try this.
var editor = CKEDITOR.replace('editor1', {});
editor.on("pluginsLoaded", function(event) {
editor.on('contentDom', function(evt) {
var editable = editor.editable();
editable.attachListener(editable, 'keyup', function(e) {
if (CKEDITOR.instances['editor1'].getData() == "") {
document.getElementById("nxtbtnwht1").disabled = true;
} else {
document.getElementById("nxtbtnwht1").disabled = false;
}
});
});
});<script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<textarea cols="10" id="editor1" name="editor1" rows="10" onkeyup="val()"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled />