CKEDITOR on blur event not working

Question

Using ck editor i'm trying to create a DIV that is editable and when it is changed fire an event, which eventually will call an ajax request. I've seen this stack overflow page however I cant seem to figure out why it isn't working. The navbar.php is where I link all the libraries that I will need.

Any help would be greatly appreciated, thanks.

HTML:

<?php
  include"navbar.php";
?>
<html>
  <head>
    <script src="js/test2.js"></script>
  </head>
  <body>
    <div id="editor1" name="editor1" contenteditable="true">
      <h1>
        Hi this is editable
      </h1>
      <p>
        Some text
      </p>
    </div>
  </body>
</html>

JS:

$(document).ready(function(){
  CKEDITOR.disableAutoInline = true;
  CKEDITOR.inline("editor1",{
    on: {
      blur: function(){
        var data = CKEDITOR.instances.editor1.getData();
        console.log(data);
      }
    }
  });
})

Navbar libraries:

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 

<!-- Jquery CSS -->
<link rel="stylesheet" href=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css ">

<!-- Sweet Alert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.4.4/sweetalert2.min.css">   

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    

<!-- Font Awesome CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<!-- Code Mirror CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

<!-- Froala Editor CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.5/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.5/css/froala_style.min.css" rel="stylesheet" type="text/css" />

<!-- My CSS -->
<link rel="stylesheet" href="css/navbar.css">

<!-- Jquery JS -->
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Moment.js JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>

<!-- Sweetalert JS -->
<script src="https://cdn.jsdelivr.net/sweetalert2/6.4.4/sweetalert2.min.js"></script>

<!-- Jquery UI JS -->
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<!-- Code Mirror JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>

<!-- XML JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>     

<!-- Froala Editor JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.5/js/froala_editor.pkgd.min.js"></script>

<!-- CK Editor JS -->
<script src="ckeditor/ckeditor.js"></script>

What exactly do you mean by "when it is changed fire an event"? When editor is created in content editable div or when something was changed in the editor? At the moment you are getting data from the editor when you leave it (with tab or click somewhere else on the page). — j.swiderski, Aug 23 '17 at 10:49
I don't mind which event triggers a function call, but so far I cannot get anything to work. On blur or on change. — Teale, Aug 24 '17 at 22:53

j.swiderski · Answer 1 · 2017-10-10T22:29:13.320

Trying out your code I have noticed that CKEDITOR.disableAutoInline = true; is executed too late causing error which results in inline method not being called. The CKEDITOR.disableAutoInline = true; needs to be called before the first editable element is loaded.

$(document).ready(function(){
  CKEDITOR.inline( "editor1" ,{
    on: {
      blur: function( evt ){        
        console.log(evt.editor.getData());
      },
      change: function( evt ){        
        console.log(evt.editor.getData());
      }
    }
  });
});

<script src="https://cdn.ckeditor.com/4.7.2/standard/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
   CKEDITOR.disableAutoInline = true; 
</script>
<div id="editor1" name="editor1" contenteditable="true">
  <h1>
    Inline Editor Content Title
  </h1>
  <p>
    Inline Editor Content...
  </p>
</div>

CKEDITOR on blur event not working

1 Answers1