J'ai ajouté l'éditeur TinyMCE (version 4.0.2) dans un formulaire HTML existant dans mon projet (PHP, Codeigniter). Mon objectif final est d'activer le bouton d'envoi du formulaire si des modifications sont apportées au formulaire, y compris l'éditeur TinyMCE Je ne peux le faire qu'avec le formulaire, à l'exception de l'éditeur TinyMCE. Je n'ai pas pu détecter les modifications de TinyMCE.
Je veux détecter si un changement se produit lorsque la clé est en place. J'ai vu que tinymce a une fonction onchange similaire à celle ci-dessous.
setup : function(ed) {
ed.onChange.add(function(ed, l) {
console.debug('Editor contents was modified. Contents: ' + l.content);
});
J'ai inséré le code d'installation supérieur dans la fonction d'initialisation ci-dessous, mais aucune sortie n'a été trouvée.
tinymce.init({ });
Pouvez-vous dire comment détecter un changement, ou une meilleure idée?
Pour Tinymce 4 cela fonctionne pour moi,
editor.on('keyup', function(e) {
alert('keyup occured');
//console.log('init event', e);
console.log('Editor contents was modified. Contents: ' + editor.getContent());
check_submit(); //another function calling
});
Notez que keyup will not capturera tous les cas. par exemple copy
/paste
/cut
de menu
et non de keyboard
si vous voulez, vous pouvez capturer ceux avec
editor.on('paste', function(e) {
console.debug('paste event');
});
editor.on('cut', function(e) {
console.debug('cut event');
});
NOTE Si vous capturez cut
et paste
de tinymce, vous ne devriez probablement pas traiter ces événements depuis keyup. Ce que j'ai fait est de ne sauvegarder que si les clés ne sont pas des clés pour cut
& paste
/**
* MCE keyup callback, update the master model selected attribute
*
* @method tinyMCEKeyup
*/
tinyMCEKeyUp : function(e) {
console.log('tinymce:keyup');
var ctrlDown = false;
var ctrlKey = 17, vKey = 86, xKey = 88;
if ((e.ctrlKey) && (e.keyCode === vKey)) {
console.log('paste from keyboard')
/* got here. do nothing. let paste event handle this one */
return;
} else if ((e.ctrlKey) && (e.keyCode === xKey)) {
console.log('cut from keyboard')
/* got here. do nothing. let paste event handle this one */
return;
}
this.doSave();
},
et appelez cette fonction à partir de l'événement keyup. De cette façon, vous éviterez de faire quelques actions deux fois sur le copier/coller.
NOTEvous allez bientôt comprendre que tout style changes
qui survient à partir de menu
seraPASdéclenchera aussi ces événements ..
Je cherche toujours une réponse pour saisir le changement de style.
Je suis en retard pour la fête, mais pour référence future, voici comment vous le faites dans TinyMCE 4.X:
tinyMCE.init({
setup:function(ed) {
ed.on('change', function(e) {
console.log('the event object ', e);
console.log('the editor object ', ed);
console.log('the content ', ed.getContent());
});
}
});
Ça marche pour moi:
tinyMCE.init({
setup : function(ed){
ed.on('NodeChange', function(e){
console.log('the event object ' + e);
console.log('the editor object ' + ed);
console.log('the content ' + ed.getContent());
});
}
});
également
ed.on('SaveContent', function(e) {
ou
ed.on('submit', function(e) {
Trouvé à la page http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor in Section Event
Ce qui suit va capturer "keyup" et d'autres événements de changement (copier, coller, centrer, etc.):
tinymce.init({
setup: function (ed) {
ed.on('keyup', function (e) {
tinyMceChange(ed);
});
ed.on('change', function(e) {
tinyMceChange(ed);
});
}
});
function tinyMceChange(ed) {
console.debug('Editor contents was modified. Contents: ' + ed.getContent());
}
Je l'utilise en tinymce 4.x
tinymce.init({
selector: "#tinymce-textarea",
setup : function(ed) {
ed.on("change", function(e){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
ed.on("keyup", function(){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
}
});
Explication:
on ("change") sert à détecter les modifications sur un événement de souris si vous cliquez sur l’icône de la barre d’outils ou sur une sélection dans le menu. Il est également capable de détecter l'événement de clavier mais seulement après une perte de focus (pas en temps réel).
on ("keyup") sert à détecter les modifications sur un événement de clavier en temps réel
Essaye ça:
tinyMCE.init({
setup : function(ed) {
ed.onChange.add(function(ed, l) {
var editorContent = l.content; // editorContent will hold the values of the editor
alert(editorContent);
});
}
});
Cliquez pour le Référence ici
Nous avons constaté que l'événement change parfois ne se déclenche qu'après avoir appuyé sur entrée; Il semble être lié au traitement de annuler . De plus, l'événement keyup se déclenche lorsque le contenu n'a pas changé, par exemple lorsque vous appuyez sur shift ou CMD-A .
Nous utilisons donc à la fois change et keyup et comparons la dernière valeur traitée à la valeur actuelle pour détecter un changement réel.
Cette solution fonctionne également pour couper, coller et modifier les éléments de menu.
//Sometimes does not fire unless enter is pressed
editor.on('change', () => {
var value = editor.getContent();
if (value !== editor._lastChange) {
editor._lastChange = value;
window.console.log(editor._lastChange);
}
});
//Sometimes fires even if content did not change
editor.on('keyup', () => {
var value = editor.getContent();
if (value !== editor._lastChange) {
editor._lastChange = value;
window.console.log(editor._lastChange);
}
});
tinymce.init({
// ...
setup: function(editor) {
editor.on('Paste Change input Undo Redo', function () {
if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
editorChangeHandler = setTimeout(function() {
console.log('changed');
}, 100);
});
}
// ,...
});
Ce travail me convient en toutes conditions clé en main, couper, copier, coller
setup: function (editor) {
editor.on('KeyUp', function(e){
alert(editor.getContent());
});
}
Les solutions ci-dessus ne détecteront pas si le bouton tinymce updo a été utilisé. Malheureusement, cela ne le sera pas non plus, mais c'est un peu plus correct sur le plan sémantique.
if (tinymce.activeEditor.isDirty()) {
alert("Your content is changed.");
}
http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty