2016-02-10 5 views
1

J'essaie d'intégrer un éditeur WYSIWYG sur un projet existant qui utilise le framework Prototype. Il est obligatoire que le projet continue à utiliser le prototype et que l'éditeur WYSIWYG ait son propre programme d'upload d'image en JavaScript (upload à partir d'un fichier). Je ne peux pas utiliser un uploader PHP. Donc, j'ai essayé d'intégrer Summernote dans mon projet, car il utilise jQuery, j'ai des conflits avec Prototype. Pour le faire fonctionner, j'utilise:(Summernote) - Compatibilité du framework jQuery et Prototype

jQuery.noConflict(); jQuery(document).ready(function($) { $('#summernote').summernote(); });.

L'éditeur se charge bien et fonctionne, mais lorsque je passe la souris sur les icônes, elles disparaissent.

Je pense que le problème n'est pas dans l'initialisation mais dans le code summernote.js lui-même. J'ai essayé d'appliquer la fonctionnalité noConflict à ce code, mais je ne travaille toujours pas.

Quelqu'un peut-il aider à résoudre ce problème? Ou peut suggérer un autre bon éditeur open source?

p.S1: Les instalation ont été comme il se doit: http://summernote.org/getting-started/

P.S2: Je l'ai déjà essayé plusieurs variantes de noConflict comme indiqué sur le lien ci-dessous. https://api.jquery.com/jquery.noconflict/

+0

Jetez un oeil à l'une de mes autres réponses http://stackoverflow.com/a/33290106/341491 - il y a un événement (probablement 'hide') que Summernote tire sur les éléments qui font feu la méthode' Element # hide() '. Vous devrez ajuster le code source pour changer les noms des événements. –

+0

Nous vous remercions de votre suggestion. J'y ai aussi pensé, alors j'ai essayé de supprimer et de tester un à un tous les appels 'hide' dans le fichier summernote.js, malheureusement, je n'ai aucun indice. Maintenant, je teste chaque événement de la souris. – cfmarq

Répondre

0

Il provient de l'info-bulle bootstrap, qui est en conflit avec le prototype.

Ajouter cet événement après l'info-bulle est déclenchée: Source: https://github.com/twbs/bootstrap/issues/6921#issuecomment-45125243

jQuery(".YOURELEMENTS").on("hidden.bs.tooltip", function() { 
    jQuery(this).css("display", ""); 
}); 

et cette règle css pour éviter le vacillement:

.YOURELEMENTS{ 
    display: inline-block !important; 
} 

Adapt le nom des éléments à vos besoins. Pour la règle css, "inline-block" pourrait aussi être changé en "block"