CKEDITOR on blur event not working

199
August 21, 2017, at 12:06 PM

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>
READ ALSO
How to check clicks of the user in order to toggle popup? [VueJS]

How to check clicks of the user in order to toggle popup? [VueJS]

I have a list as component and it contains hidden popup like facebookFor example you click any item on list, and it shows popup about the item here is my interface that I mentioned

224
Disable/enable window special keys

Disable/enable window special keys

Is it possible to disable/enable windows special keys(egCtrl+tab, window+tab, window, etc

151
My clickable jQuery drop-down menu does not work

My clickable jQuery drop-down menu does not work

I've made a clickable drop-down menu using JQuery

182