Comment obtenir la contribution de l'utilisateur de TinyMCE de WicketStuff

Question

Question assez directe, mais je ne peux pas trouver ceci n'importe où. J'utilise TinyMCE de WicketStuff pour créer un éditeur de texte enrichi dans mon application et je ne trouve nulle part comment obtenir l'entrée de la zone de texte. Par souci de concision, voici une version simplifiée du code que j'utilise.

private String input; 
    ... 

    TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.simple); 

    TextArea<String> textArea = new TextArea<String>("editor", new PropertyModel<String>(this, "input")); 
    textArea.add(new TinyMceBehavior(settings)); 

    form.add(textArea); 

Avec cela, je me attends à la manière habituelle à utiliser simplement ma chaîne « entrée » car il est défini comme le modèle. Cela entraîne toujours null car le modèle n'est pas mis à jour.

J'ai essayé d'utiliser le plugin d'enregistrement automatique au cas où il s'attendait à ce que le bouton de sauvegarde soit cliqué (ce qui ne met pas à jour le modèle non plus), et aucun n'a fonctionné. La seule chose que j'ai pu faire pour obtenir l'entrée de l'utilisateur est d'ajouter un HiddenField, avec un nouveau modèle, et faire un appel JavaScript comme

document.getElementById('hiddenField').value = tinyMCE.get('editor').getContent(); 

mais cela a conduit à d'autres problèmes à essayer d'appeler le JS à l'endroit désiré et pour le faire fonctionner correctement. Je pense que cela ne devrait pas être nécessaire de toute façon, car sûrement quelqu'un doit avoir implémenté une méthode pour que le contenu de la zone de texte soit utilisé.

Toute aide serait grandement appréciée.

Answer 1

Merci à un blog post à Passons sur des solutions, la façon d'obtenir le modèle mis à jour est d'ajouter le code JavaScript suivant au bouton soumettre de la forme:

onclick="tinyMCE.triggerSave(true,true);" 

Ma zone de texte se trouve dans un panneau avec le bouton extérieur de le panneau, donc ça ne marche pas directement pour moi. L'astuce consistait à ajouter l'appel JavaScript à onSubmit du bouton, à déplacer la logique dans onAfterSubmit, et à créer le bouton MultiPart afin qu'il puisse appeler le déclencheur de sauvegarde avant de faire l'autre logique associée au modèle.

Espérons que cela pourrait aider d'autres dans le futur.

Answer 2

Vous devez ajouter un modificateur au bouton d'envoi afin que le modèle puisse être mis à jour.

AjaxButton btnSubmit = new AjaxButton("btnSubmit", new Model()) { 
    @Override 
    public void onSubmit(AjaxRequestTarget target, Form<?> form) { 
     doSomething(); 
    } 
}; 
btnSubmit.add(new TinyMceAjaxSubmitModifier()); 

Jetez un oeil here pour plus d'infos