fck-faces/FCKEditor: Executing javascript before the ajax fo

[carlabramsson]

Hello!

I'm looking for a way to integrate the jsf wrapper (fck-faces) around FCKEditor with ajax4JSF. The main problem is that the editor doesn't sync it's content with the hidden form field when a a4j-button is clicked. Example:

<h:inputText id="rawcontent" value="#{example.myString}" />
 <fck:editor id="richeditor" value="#{example.myString}" />
 <a4j:commandButton id="submitButton" value="Preview ajax" reRender="outdiv,raw" />
 <h:commandButton id="normalSubmit" value="Preview normal" />
 <s:div id="outdiv">
 <h:outputText value="#{example.myString}" />
 </s:div>

When you click the a4j:commandButton in the code above, the call isn't made to the editor that tells it to sync it's content with the form field, the old (or empty) value is submitted. But the the normal h:commandButton is clicked, everything works fine.
The reason must be that the fckeditor hooks this logic to the form.onSubmit, but the a4j-submit never invokes this event?

The quick and easy way to solve would be to add a onclick="[do something]" on the a4j:commandButton, but that's not so clean....

So what I really wan't is something like this:

<fck:editor id="richeditor" value="#{example.myString}" >
<mystuff:fckeditorA4jSupport />
</fck:editor>

This custom component would render the javascript that makes the sync before the a4j-submit is made.

So, could anyone give me some pointers on where to start? Is there anything in the a4j javascript api that I can use to be notified that a a4j-submit is in progress?

Thanks!

[juanignaciosl]

I've solved connecting once form's onsubmit with a function that calls FCKeditorAPI.GetInstance('${id}').UpdateLinkedField(). I think this is a clean enough way, and you can encapsulate it into a facelets component.

<a4j:outputPanel ajaxRendered="true">

 <f:verbatim>


 <script type="text/javascript">
 function alertar() {
 if(dojo.byId('${id}') != null) {
 FCKeditorAPI.GetInstance('${id}').UpdateLinkedField();
 return true;
 };
 };
 if(!dojo.byId('${id}___Frame')) {
 dojo.event.connectOnce(dojo.byId('${id}').form, 'onsubmit', 'alertar');

 var oFCKeditor = new FCKeditor( '${id}' ) ;
 oFCKeditor.BasePath = '${contexto}/scripts/fckeditor/' ;
 oFCKeditor.ToolbarSet = 'Basic';
 oFCKeditor.ReplaceTextarea() ;
 }

 </script>

 </f:verbatim>
 </a4j:outputPanel>

[carlabramsson]

Thanks for the pointer! I was wrong at first, a a4j submit triggers the onsubmit event of the form after all. So then it was quite easy to build a component that takes care of this event wiring and syncing the formvalue with the fckeditor! This is what is looks like in my code now:

<hmjsf:a4jFckSupport>
 <fck:editor id="richeditor" value="#{example.myString}" />
</hmjsf:a4jFckSupport>

That's clean! ;-)

The magic is in the encodeEnd method in my components renderer:

String fckEditorClientId = getFckEditorClientId(context,component);
 if(fckEditorClientId != null && !"".equals(fckEditorClientId)) {
 ResponseWriter writer = context.getResponseWriter();
 writer.startElement("script", component);
 writer.writeAttribute("type", "text/javascript", "type");
 writer.write("function wireA4jfckSupport(clientId) {\n" +
 " var prevHandler = document.getElementById(clientId).form.onsubmit;\n" +
 " document.getElementById(clientId).form.onsubmit = function() {\n" +
 " FCKeditorAPI.GetInstance(clientId).UpdateLinkedField();\n" +
 " if(prevHandler) { prevHandler(); }\n" +
 " }\n" +
 " }");
 writer.write("wireA4jfckSupport('"+fckEditorClientId+"')");
 writer.endElement("script");

 }

Only problem now is to push a server generated value into the editor after a a4j-action...