CKEDITORのblurイベントが動作しない

ck editorの使用編集可能なDIVを作成しようとしていますが、変更されたときにイベントが発生すると、最終的にajaxリクエストが呼び出されます。私はthisスタックオーバーフローのページを見たことがあるが、私はなぜそれが動作していないか把握することはできません。 navbar.phpは私が必要とするすべてのライブラリをリンクする場所です。CKEDITORのblurイベントが動作しない

ご協力いただきありがとうございます。

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

ナビゲーションバーのライブラリ：あなたのコードを試して

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

出典

2017-08-21 Teale

あなたは「イベントが発生変更されたとき」で、正確に何を意味するのですか？エディタがコンテンツ編集可能divで作成されたとき、または何かがエディタで変更されたとき？現時点では、エディタを終了するときにデータを取得しています（タブをクリックするか、ページの他の場所をクリックしてください）。 –

どのイベントが関数呼び出しをトリガしても構いませんが、これまでは何もできません。ぼかしまたは変更時。 – Teale

私は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>

出典

2017-08-28 17:11:18

CKEDITORのblurイベントが動作しない

答えて

関連する問題