6 Replies Latest reply on Mar 8, 2013 8:07 AM by Lucas Ponce

    Rich:editor not showing on ajax reload

    jprats Newbie

      I've found the following problem while using a <rich:editor> and a partial page update via ajax.


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
              <rich:tabPanel switchType="ajax">
                  <rich:tab header="Tab 1">
                      <h:outputText value="Hello World!" />
                  <rich:tab header="Tab 2">
                      <rich:editor />


      When changing from tab1 to tab2 the editor is not shown. With switchType="server" or "client" it works fine.

      This has been tested with RichFaces 4.2.0.Final (also with 4.2.2.Final) runing on JBoss 7.1.1.Final.


      I've found this issue (https://issues.jboss.org/browse/RF-6573) but it's quite old and for version 3. The suggested workaround, include <rich:editor width="0" height="0" rendered="false"/>, is not working for me.


      It's strange because some resources seem to be loaded and others not. For example, "ckeditor.js" is always loaded, but "en.js" fails when is an ajax request.

        • 1. Re: Rich:editor not showing on ajax reload
          jprats Newbie

          After some investigation I found the problem appears when ckeditor tries to load its own resources.

          For example, it looks for:



          while the correct path is:



          A simple solution is to manually include a global javascript variable on the page, which tells ckeditor where to find its resources:


          <script type="text/javascript">
              window.CKEDITOR_BASEPATH = '#{request.contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/';


          That line should be included by the <rich:editor> itself, but for some reason it's not working properly when doing an ajax update.

          This solution works fine for switchType=ajax, client or server.

          1 of 1 people found this helpful
          • 2. Re: Rich:editor not showing on ajax reload
            Sergey Morenets Novice

            Hi, Juan.


            I encountered more weird behavior. My rich:editor is not loading even if it is placed outside of the tabPanel.

            The requested resource cannot be found. Even if I apply your fix and path has changed the resource is still unavailable.




            Showcase smaple works properly and path is similar.



            • 3. Re: Rich:editor not showing on ajax reload
              Sergey Morenets Novice

              I performed small investigation and added rich:editor component to Spring Booking RichFaces demo application.


              The editor is not loading as well. I see two resources below not found.





              What is ridiculous the same links work properly for showcase application





              So it looks like configuration issue. Any suggestions?

              • 5. Re: Rich:editor not showing on ajax reload
                Sergey Morenets Novice

                Thanks, nguyen.


                I tried the solution suggested by Brendan but it didn't work. rich:editor was not loading.


                However after few attempts I figured out that if I copy /ckeditor/ into my application and add the following lines



                  <script type="text/javascript" src="/ckeditor/ckeditor.js"/>

                  <script type="text/javascript" src="/ckeditor/adapters/jquery.js"/>



                even <rich:editor /> line works properly. I needed to copy richfaces folder from RF jar into skins folder additionally.

                However skins are completely missing. I guess it happened because skins were defined as EL expression like #{richSkin.panelBorderColor}

                and is not processed in js file.

                Is it possible to troubleshoot that?


                One more thing I didn't understand from Brendan. Doesn't rich:editor work now? The sample at showscase.richfaces.org works ok. How can it be?

                • 6. Re: Rich:editor not showing on ajax reload
                  Lucas Ponce Novice



                  I've experimented same issue with RF 3.4.1.Final and a design like this from a ui:include:


                      <a4j:outputPanel id="main-panel">


                          <h:outputText value="Folder" rendered="#{panel.view == 'folder'}" />

                          <h:outputText value="Binary" rendered="#{panel.view == 'binary'}"  />

                          <rich:tabPanel switchType="ajax" rendered="#{panel.view == 'text'}" >


                              <f:facet name="header">


                                <a4j:status name="panelUpdateStatus">

                                    <f:facet name="start">





                              <a4j:outputPanel name="previewStatus">

                                <h:outputText escape="false" value="#{panel.selected.text}" />



                            <rich:tab header="Edit">

                              <rich:editor id="editor" toolbar="full" value="#{panel.selected.text}" >                   

                                <a4j:ajax event="change" render="panel" status="panelUpdateStatus" />

                                <a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">

                                    <a4j:attachQueue requestDelay="1000" />








                  After use



                  window.CKEDITOR_BASEPATH = '#{request.contextPath}/org.richfaces.resources/javax.faces.resource/org.richfaces.ckeditor/';



                  from the parent page it worked and resolved my issue.


                  Thanks for sharing !