Question

使用ck编辑器我试图创建一个可编辑的DIV，当它被更改时触发一个事件，最终将调用一个ajax请求。我看过this堆栈溢出页面，但我似乎无法弄清楚它为什么不起作用。 navbar.php是我链接我需要的所有库的地方。

非常感谢任何帮助，谢谢。

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库：

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

Answer 1

尝试使用我的代码我注意到CKEDITOR.disableAutoInline = true;执行得太晚导致错误导致inline方法无法被调用。在加载第一个可编辑元素之前，需要调用CKEDITOR.disableAutoInline = true;。

$(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模糊事件不起作用

1 个答案: