4 Replies Latest reply on Apr 6, 2012 10:23 AM by hery deslandes

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

    Michael G Novice

      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

        • 1. Re: Rich:editor can't select text area to enter text in firefox
          Michael G Novice

          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

          • 2. Re: Rich:editor can't select text area to enter text in firefox
            Lukáš Fryč Master

            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.

            • 3. Re: Rich:editor can't select text area to enter text in firefox
              hery deslandes Newbie

              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

              • 4. Re: Rich:editor can't select text area to enter text in firefox
                hery deslandes Newbie

                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