enable Submit button on ckeditor validation-CodePudding

<!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;
    }
  }

CodePudding user response：

You may try this.

<!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>
                 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>
        </body>
</html>