CKEDITOR sur l'événement de flou ne fonctionne pas

En utilisant l'éditeur de ck j'essaye de créer un DIV qui est éditable et quand il est changé tirer un événement, qui appellera finalement une demande d'ajax. J'ai vu this page de débordement de pile mais je ne peux pas sembler comprendre pourquoi il ne fonctionne pas. Le navbar.php est où je relie toutes les bibliothèques dont j'ai besoin.CKEDITOR sur l'événement de flou ne fonctionne pas

Toute aide serait grandement appréciée, merci.

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

bibliothèques 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>

Source

2017-08-21 Teale

Que voulez-vous dire par « quand il est un événement a changé le feu »? Lorsque l'éditeur est créé dans le contenu div ed ou lorsque quelque chose a été modifié dans l'éditeur? Au moment où vous obtenez des données de l'éditeur lorsque vous le quittez (avec onglet ou cliquez ailleurs sur la page). –

Cela ne me dérange pas quel événement déclenche un appel de fonction, mais jusqu'à présent, je ne peux rien faire fonctionner. Sur le flou ou sur le changement. – Teale

ESSAYER votre code J'ai remarqué que CKEDITOR.disableAutoInline = true; est exécuté à l'origine trop tard erreur qui se traduit par inline méthode non appelée. Le CKEDITOR.disableAutoInline = true; doit être appelé avant le chargement du premier élément modifiable.

$(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>

Source

2017-08-28 17:11:18

CKEDITOR sur l'événement de flou ne fonctionne pas

Répondre

Questions connexes