Rich:editor can't select text area to enter text in firefox

[mpgong]

Hello,

For some odd reason i can't select the text area in the rich:editor when using FireFox 9.  The buttons in the toolbar don't seem to work either.  I can click them but nothing happens.  I click in the text area but it doesn't focus and i don't see the cursor and can't type anything.

It works fine in IE.

Does anyone have an idea as to what might be my issue?

Thanks

[mpgong]

Further investigation seems to indicate that there is something odd with possibly how i'm using the editor.

I have it in a popupPanel and it seems to be ok'ish if the toolbar isn't showing.  Though there is no option to turn it off, but the following seems to remove it.

   <h:form id="noteForm">

            <rich:popupPanel id="addNotePane" modal="true" moveable="true"

                header="Task Notes" width="620" height="365"

                domElementAttachment="form">

                <f:facet name="controls">

                    <h:graphicImage value="/resources/images/close.png"

                        style="cursor:pointer"

                        onclick="#{rich:component('addNotePane')}.hide()" />

                </f:facet>

                <rich:editor id="task_notes" value="#{StatusFormBean.editedTask.taskNotes}">

                    <f:facet name="config">       

                        toolbar : Basic,

                        resize_enabled : false               

                    </f:facet>               

                </rich:editor>

                <h:panelGrid columns="2"

                    style="text-align:center;margin-top:10px">

                    <a4j:commandButton value="Save"

                        execute="addNotePane"

                        action="#{StatusFormBean.processSaveTaskNotes}"

                        oncomplete="#{rich:component('addNotePane')}.hide();" />

                    <a4j:commandButton value="Cancel" execute="@this"

                        onclick="#{rich:component('addNotePane')}.hide();"/>

                </h:panelGrid>

            </rich:popupPanel>

        </h:form>

Does anyone know what might be wrong with the above usage?

Thanks

[lfryc]

Hey Michal, I can't see nothing wrong on your usage,

I can only guess there are z-index problems.

You can try Firebug and instant CSS editting in the DOM inspection editor to give Editor higher z-index.

[hedes]

Hello

i have the same issue. I thnik it is due to initialization CKEditor: when CkEditor is not initialized at the page loading phase, we cannot not use it. I have the same issue on GWT: when i display a page with CkEditor, i always initialize it even if it is not displayed/used.

For firefox, i found the following workaround  :

• you create a managed bean with properties visible, top, left
• you bind the "visible" property to the "show' attribute of the popup
• you create a richface function which updates the properties and re render the form.

this workaround works fine on IE9/FF but not on Chrome (and maybe Safari).

<h:form id="formPage">

  <a4j:commandButton id='ll'

                                                            onclick="showPopupPanel('true',Math.round(jQuery(#{rich:element('ll')}.parentNode).offset().top + jQuery(#{rich:element('ll')}.parentNode).height()), Math.round(jQuery(#{rich:element('ll')}.parentNode).offset().left)); return true;"

                                                            value="Show">

                                                    </a4j:commandButton>

<rich:popupPanel header="Send"

                                        id="sendAdvToAFriendPopUp" autosized="true" modal="true"

                                        show="#{beanWebSendAdvToAFriend.visible}"

                                        top="#{beanWebSendAdvToAFriend.top}"

                                        left="#{beanWebSendAdvToAFriend.left}" moveable="false"

                                        resizeable="false" followByScroll="false">

                                        <f:facet name="controls">

                                                  <h:outputLink value="#"

                                                            onclick="#{rich:component('sendAdvToAFriendPopUp')}.hide(); showPopupPanel('false') ;return true;">

                X

            </h:outputLink>

                                        </f:facet>

                                        <h:panelGrid columns="2">

                              <h:outputText value="Text" />

                                                  <rich:editor value="#{beanWebSendAdvToAFriend.textMail}"

                                                            id="editor" />

                                                  <f:facet name="footer">

                                                            <a4j:commandButton value="Envoyer" render="rep"

                                                                      action="#{beanWebSendAdvToAFriend.send}">

                                                            </a4j:commandButton>

                                                  </f:facet>

</h:panelGrid>

</rich:popupPanel>

<a4j:jsFunction name="showPopupPanel" render="formPage"

                              action="#{beanWebSendAdvToAFriend.send}">

                              <a4j:param name="visible"

                                        assignTo="#{beanWebSendAdvToAFriend.visible}" />

                              <a4j:param name="top" assignTo="#{beanWebSendAdvToAFriend.top}" />

                              <a4j:param name="left" assignTo="#{beanWebSendAdvToAFriend.left}" />

                    </a4j:jsFunction>

</h:form>

Regards

Hery

[hedes]

Hello

here is a hack which is working fine with chrome, with the previous code :

<h:form id="formPage" >

...

<a4j:jsFunction name="showPopupPanel" render="formPage"

                              action="#{beanWebSendAdvToAFriend.display}"

                              oncomplete="initializeEditor('editor');"

                              >

...

</a4j:jsFunction>

<script type="">

            function initializeEditor(editor) {

                    var options = null;

                    var config = {};

                    var instance = CKEDITOR.instances['formPage:'+editor+':inp'];

                   if(instance)

                   {

                       instance.destroy(true);

                   }

                    new RichFaces.ui.Editor('formPage:'+editor, options, config);

                };

</script>

</h:form>

regards.

Hery